import Link from "next/link";
import {
  Shield,
  Key,
  Lock,
  Network,
  Server,
  ArrowRight,
  CheckCircle,
} from "lucide-react";

const expertises = [
  {
    icon: Key,
    title: "OIDC & OAuth2",
    description:
      "Intégration et sécurisation des flux d'authentification. Authorization Code, PKCE, Client Credentials.",
  },
  {
    icon: Shield,
    title: "Zero Trust",
    description:
      "Architecture Zero Trust de bout en bout. Never trust, always verify. Micro-segmentation et contrôle d'accès continu.",
  },
  {
    icon: Lock,
    title: "Active Directory & Entra ID",
    description:
      "Administration, durcissement et migration AD. Configuration Entra ID, Conditional Access, PIM.",
  },
  {
    icon: Network,
    title: "IAM & Gouvernance",
    description:
      "Stratégie IAM complète. Gestion des identités, provisioning, RBAC/ABAC, audit et conformité.",
  },
  {
    icon: Server,
    title: "Infrastructure & DevSecOps",
    description:
      "Sécurisation Linux & Windows. Automatisation, durcissement, monitoring sécurité.",
  },
];

const highlights = [
  "Expert senior avec expérience en développement, systèmes et sécurité",
  "Maîtrise des environnements Open Source et Windows",
  "Approche pragmatique orientée résultats",
  "Accompagnement de la stratégie à l'implémentation",
];

export default function HomePage() {
  return (
    <>
      {/* Hero */}
      <section className="relative overflow-hidden bg-cosmos-900 py-24 sm:py-32">
        <div className="absolute inset-0 opacity-10">
          <div
            className="absolute inset-0"
            style={{
              backgroundImage: `radial-gradient(circle at 25% 25%, var(--color-araucaria-500) 1px, transparent 1px),
                               radial-gradient(circle at 75% 75%, var(--color-kultrun-700) 1px, transparent 1px)`,
              backgroundSize: "60px 60px",
            }}
          />
        </div>
        <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-sm font-semibold text-araucaria-400 uppercase tracking-widest">
              Consulting IAM & Sécurité
            </p>
            <h1 className="mt-4 text-4xl font-bold tracking-tight text-nieve sm:text-6xl">
              Sécurisez vos identités,
              <br />
              <span className="text-araucaria-400">protégez vos accès</span>
            </h1>
            <p className="mt-6 text-lg leading-8 text-cosmos-300">
              Expert senior en Identity & Access Management. J&apos;accompagne
              les organisations dans leur stratégie de sécurité des identités,
              de l&apos;audit à l&apos;implémentation.
            </p>
            <div className="mt-10 flex items-center justify-center gap-4 flex-wrap">
              <Link
                href="/services"
                className="inline-flex items-center gap-2 rounded-lg bg-kultrun-700 px-6 py-3 text-sm font-semibold text-nieve hover:bg-kultrun-600 transition-colors"
              >
                Mes services
                <ArrowRight className="w-4 h-4" />
              </Link>
              <Link
                href="/demos"
                className="inline-flex items-center gap-2 rounded-lg border border-cosmos-600 px-6 py-3 text-sm font-semibold text-cosmos-200 hover:bg-cosmos-800 hover:text-nieve transition-colors"
              >
                Voir les démos
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Highlights */}
      <section className="py-12 bg-pewma border-b border-border">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {highlights.map((text) => (
              <div key={text} className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-ngunechen-700 mt-0.5 shrink-0" />
                <p className="text-sm text-tierra-700 font-medium">{text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Expertises */}
      <section className="py-20 sm:py-28">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight text-cosmos-900 sm:text-4xl">
              Domaines d&apos;expertise
            </h2>
            <p className="mt-4 text-lg text-muted">
              Une expertise transversale, du développement à
              l&apos;infrastructure, centrée sur la sécurité des identités.
            </p>
          </div>

          <div className="mx-auto mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {expertises.map((item) => {
              const Icon = item.icon;
              return (
                <div
                  key={item.title}
                  className="group relative rounded-xl border border-border bg-nieve p-8 hover:border-cosmos-300 hover:shadow-lg transition-all duration-300"
                >
                  <div className="w-12 h-12 rounded-lg bg-cosmos-900 flex items-center justify-center group-hover:bg-cosmos-800 transition-colors">
                    <Icon className="w-6 h-6 text-araucaria-400" />
                  </div>
                  <h3 className="mt-6 text-lg font-semibold text-cosmos-900">
                    {item.title}
                  </h3>
                  <p className="mt-2 text-sm text-muted leading-relaxed">
                    {item.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-cosmos-900 py-16">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-2xl font-bold text-nieve sm:text-3xl">
              Un projet de sécurisation ?
            </h2>
            <p className="mt-4 text-cosmos-300">
              Discutons de vos besoins en IAM et sécurité informatique.
            </p>
            <Link
              href="/contact"
              className="mt-8 inline-flex items-center gap-2 rounded-lg bg-araucaria-500 px-8 py-3 text-sm font-semibold text-cosmos-950 hover:bg-araucaria-400 transition-colors"
            >
              Prendre contact
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}