import {
  Search,
  Key,
  ShieldCheck,
  Server,
  ArrowRight,
} from "lucide-react";
import Link from "next/link";

const services = [
  {
    id: "audit",
    icon: Search,
    title: "Audit IAM & Sécurité",
    description:
      "Évaluation complète de votre posture de sécurité des identités. Analyse des configurations AD, Entra ID, politiques d'accès, et recommandations priorisées.",
    deliverables: [
      "Rapport d'audit détaillé",
      "Matrice de risques priorisée",
      "Plan de remédiation",
    ],
  },
  {
    id: "oidc",
    icon: Key,
    title: "Intégration OIDC / OAuth2",
    description:
      "Conception et implémentation de flux d'authentification modernes. Intégration d'applications existantes avec OIDC, migration depuis SAML, mise en place de SSO.",
    deliverables: [
      "Architecture d'authentification",
      "Implémentation et tests",
      "Documentation technique",
    ],
  },
  {
    id: "zero-trust",
    icon: ShieldCheck,
    title: "Stratégie Zero Trust",
    description:
      "Définition et déploiement d'une architecture Zero Trust adaptée à votre contexte. Conditional Access, micro-segmentation, vérification continue.",
    deliverables: [
      "Feuille de route Zero Trust",
      "Configuration Conditional Access",
      "Formation des équipes",
    ],
  },
  {
    id: "ad-entra",
    icon: Server,
    title: "AD & Entra ID",
    description:
      "Administration avancée, durcissement et migration Active Directory. Configuration Entra ID, synchronisation hybride, PIM/PAM.",
    deliverables: [
      "Durcissement AD (tiering model)",
      "Configuration Entra ID",
      "Migration et synchronisation",
    ],
  },
];

export default function ServicesPage() {
  return (
    <>
      <section className="bg-cosmos-900 py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-2xl text-center">
            <h1 className="text-3xl font-bold tracking-tight text-nieve sm:text-5xl">
              Services de consulting
            </h1>
            <p className="mt-6 text-lg text-cosmos-300">
              Des mandats ciblés pour sécuriser vos identités et vos accès,
              de l&apos;audit stratégique à l&apos;implémentation technique.
            </p>
          </div>
        </div>
      </section>

      <section className="py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="space-y-16">
            {services.map((service, index) => {
              const Icon = service.icon;
              const isEven = index % 2 === 0;
              return (
                <div
                  key={service.id}
                  id={service.id}
                  className={`flex flex-col lg:flex-row gap-8 lg:gap-16 items-start ${
                    isEven ? "" : "lg:flex-row-reverse"
                  }`}
                >
                  <div className="flex-1">
                    <div className="flex items-center gap-4 mb-4">
                      <div className="w-12 h-12 rounded-lg bg-cosmos-900 flex items-center justify-center">
                        <Icon className="w-6 h-6 text-araucaria-400" />
                      </div>
                      <h2 className="text-2xl font-bold text-cosmos-900">
                        {service.title}
                      </h2>
                    </div>
                    <p className="text-muted leading-relaxed">
                      {service.description}
                    </p>
                  </div>
                  <div className="flex-1 w-full lg:max-w-sm">
                    <div className="rounded-xl border border-border bg-pewma p-6">
                      <h3 className="text-sm font-semibold text-cosmos-700 uppercase tracking-wider mb-4">
                        Livrables
                      </h3>
                      <ul className="space-y-3">
                        {service.deliverables.map((item) => (
                          <li
                            key={item}
                            className="flex items-start gap-3 text-sm text-tierra-700"
                          >
                            <ArrowRight className="w-4 h-4 text-kultrun-700 mt-0.5 shrink-0" />
                            {item}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="bg-pewma py-16 border-t border-border">
        <div className="mx-auto max-w-7xl px-6 lg:px-8 text-center">
          <h2 className="text-2xl font-bold text-cosmos-900">
            Besoin d&apos;un mandat sur mesure ?
          </h2>
          <p className="mt-4 text-muted">
            Chaque organisation est unique. Discutons de vos besoins spécifiques.
          </p>
          <Link
            href="/contact"
            className="mt-8 inline-flex items-center gap-2 rounded-lg bg-kultrun-700 px-8 py-3 text-sm font-semibold text-nieve hover:bg-kultrun-600 transition-colors"
          >
            Discuter de mon projet
          </Link>
        </div>
      </section>
    </>
  );
}