import Link from "next/link";
import { Workflow, Terminal, KeyRound, ShieldCheck } from "lucide-react";

const demos = [
  {
    icon: Workflow,
    title: "Visualiseur OIDC",
    description:
      "Animation pas-à-pas des flux OIDC : Authorization Code, PKCE, Client Credentials. Comprenez chaque échange entre le client, l'IdP et le resource server.",
    href: "/demos/oidc-flow",
    status: "Bientôt disponible",
  },
  {
    icon: Terminal,
    title: "Playground OAuth2",
    description:
      "Testez interactivement les requêtes OAuth2. Explorez les scopes, tokens, refresh tokens. Connecté à un vrai serveur Keycloak.",
    href: "/demos/oauth-playground",
    status: "Bientôt disponible",
  },
  {
    icon: KeyRound,
    title: "Décodeur JWT",
    description:
      "Décodez et inspectez vos tokens JWT en temps réel. Visualisez le header, le payload et validez la signature.",
    href: "/demos/token-decoder",
    status: "Bientôt disponible",
  },
  {
    icon: ShieldCheck,
    title: "Simulateur Zero Trust",
    description:
      "Visualisation interactive des couches de sécurité Zero Trust. Explorez les différentes stratégies d'implémentation.",
    href: "/demos/zero-trust",
    status: "Bientôt disponible",
  },
];

export default function DemosPage() {
  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">
              Démos interactives
            </h1>
            <p className="mt-6 text-lg text-cosmos-300">
              Explorez les concepts de sécurité et d&apos;IAM à travers des
              outils interactifs. Apprenez en pratiquant.
            </p>
          </div>
        </div>
      </section>

      <section className="py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {demos.map((demo) => {
              const Icon = demo.icon;
              return (
                <div
                  key={demo.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="flex items-start justify-between mb-6">
                    <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>
                    <span className="px-3 py-1 text-xs font-medium bg-araucaria-50 text-araucaria-700 rounded-full border border-araucaria-200">
                      {demo.status}
                    </span>
                  </div>
                  <h3 className="text-xl font-semibold text-cosmos-900">
                    {demo.title}
                  </h3>
                  <p className="mt-3 text-sm text-muted leading-relaxed">
                    {demo.description}
                  </p>
                  <Link
                    href={demo.href}
                    className="mt-6 inline-flex items-center text-sm font-semibold text-cosmos-700 hover:text-kultrun-700 transition-colors"
                  >
                    Explorer la démo &rarr;
                  </Link>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}