import { Code, Server, Shield, Award } from "lucide-react";

const timeline = [
  {
    icon: Code,
    period: "Début de carrière",
    title: "Développeur",
    description:
      "Développement logiciel, compréhension profonde du code et des architectures applicatives. Base solide pour comprendre les enjeux de sécurité au niveau applicatif.",
  },
  {
    icon: Server,
    period: "Évolution",
    title: "Administrateur Systèmes",
    description:
      "Administration Linux et Windows Server. Gestion d'infrastructures, scripting, automatisation. Vision complète de la chaîne technique.",
  },
  {
    icon: Shield,
    period: "Spécialisation",
    title: "Expert IAM & Sécurité",
    description:
      "Spécialisation en Identity & Access Management. Administration AD et Entra ID, implémentation OIDC/OAuth, stratégies Zero Trust.",
  },
];

const skills = {
  "Identity & Access Management": [
    "OIDC / OAuth 2.0 / SAML",
    "Keycloak",
    "Active Directory",
    "Microsoft Entra ID (Azure AD)",
    "PIM / PAM",
    "RBAC / ABAC",
    "Conditional Access",
    "SSO / Federation",
  ],
  "Sécurité": [
    "Zero Trust Architecture",
    "Durcissement AD (Tiering Model)",
    "Sécurité des endpoints",
    "PKI & Certificats",
    "Audit de sécurité",
    "Conformité & Gouvernance",
  ],
  "Systèmes & Infra": [
    "Windows Server / AD DS",
    "Linux (Debian, RHEL, Ubuntu)",
    "Docker & Conteneurisation",
    "PowerShell / Bash",
    "Automatisation & CI/CD",
    "Monitoring & Logging",
  ],
};

export default function AboutPage() {
  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">
              À propos
            </h1>
            <p className="mt-6 text-lg text-cosmos-300">
              Un parcours du développement à la sécurité, pour une vision
              complète et pragmatique de l&apos;IAM.
            </p>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-cosmos-900 text-center mb-16">
            Parcours professionnel
          </h2>
          <div className="relative">
            <div className="absolute left-1/2 -translate-x-px h-full w-0.5 bg-border hidden lg:block" />
            <div className="space-y-12 lg:space-y-16">
              {timeline.map((item, index) => {
                const Icon = item.icon;
                const isLeft = index % 2 === 0;
                return (
                  <div
                    key={item.title}
                    className={`relative flex flex-col lg:flex-row items-center gap-8 ${
                      isLeft ? "lg:flex-row" : "lg:flex-row-reverse"
                    }`}
                  >
                    <div
                      className={`flex-1 ${isLeft ? "lg:text-right" : "lg:text-left"}`}
                    >
                      <p className="text-sm font-semibold text-araucaria-600 uppercase tracking-wider">
                        {item.period}
                      </p>
                      <h3 className="mt-2 text-xl font-bold text-cosmos-900">
                        {item.title}
                      </h3>
                      <p className="mt-3 text-muted leading-relaxed">
                        {item.description}
                      </p>
                    </div>
                    <div className="relative z-10 w-14 h-14 rounded-full bg-cosmos-900 flex items-center justify-center border-4 border-nieve shadow-lg shrink-0">
                      <Icon className="w-6 h-6 text-araucaria-400" />
                    </div>
                    <div className="flex-1 hidden lg:block" />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Compétences */}
      <section className="py-20 bg-pewma border-t border-border">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-cosmos-900 text-center mb-16">
            Compétences techniques
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {Object.entries(skills).map(([category, items]) => (
              <div
                key={category}
                className="rounded-xl border border-border bg-nieve p-8"
              >
                <div className="flex items-center gap-3 mb-6">
                  <Award className="w-5 h-5 text-kultrun-700" />
                  <h3 className="text-lg font-semibold text-cosmos-900">
                    {category}
                  </h3>
                </div>
                <ul className="space-y-2">
                  {items.map((skill) => (
                    <li
                      key={skill}
                      className="text-sm text-muted flex items-center gap-2"
                    >
                      <span className="w-1.5 h-1.5 rounded-full bg-araucaria-500 shrink-0" />
                      {skill}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}