import Link from "next/link";

export default function LandingPage() {
  return (
    <div className="mx-auto max-w-3xl">
      <div className="py-16 md:py-24">
        <h1 className="font-mono text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50 md:text-4xl">
          Évaluez la maturité IA/GenAI de vos candidats
        </h1>
        <p className="mt-6 font-mono text-base leading-relaxed text-zinc-600 dark:text-zinc-400">
          Grilles structurées, guide d&apos;entretien, rubriques 1→5, questions de relance. 
          Un outil pensé pour standardiser vos évaluations et générer synthèses et recommandations.
        </p>
        <div className="mt-10 flex flex-wrap gap-4">
          <Link
            href="/auth/login"
            className="rounded-lg border border-cyan-500 bg-cyan-500 px-5 py-2.5 font-mono text-sm font-medium text-white hover:bg-cyan-600 dark:border-cyan-400 dark:bg-cyan-500/90 dark:text-zinc-900 dark:hover:bg-cyan-400 transition-colors"
          >
            Accéder à l&apos;app
          </Link>
          <Link
            href="/auth/signup"
            className="rounded-lg border border-zinc-300 dark:border-zinc-600 px-5 py-2.5 font-mono text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
          >
            Créer un compte
          </Link>
        </div>
      </div>

      <section className="border-t border-zinc-200 dark:border-zinc-700 py-12">
        <h2 className="font-mono text-lg font-medium text-zinc-800 dark:text-zinc-200">
          Fonctionnalités
        </h2>
        <ul className="mt-6 grid gap-6 sm:grid-cols-2">
          <li className="rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800/50 p-4">
            <span className="font-mono text-sm font-medium text-cyan-600 dark:text-cyan-400">Templates</span>
            <p className="mt-1 font-mono text-xs text-zinc-600 dark:text-zinc-400">
              Grilles multi-dimensions (Full 15, Short 8) avec rubriques et signaux par niveau.
            </p>
          </li>
          <li className="rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800/50 p-4">
            <span className="font-mono text-sm font-medium text-cyan-600 dark:text-cyan-400">Guide d&apos;entretien</span>
            <p className="mt-1 font-mono text-xs text-zinc-600 dark:text-zinc-400">
              Questions suggérées, relances IA, notation 1→5 avec justification et exemples.
            </p>
          </li>
          <li className="rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800/50 p-4">
            <span className="font-mono text-sm font-medium text-cyan-600 dark:text-cyan-400">Radar & synthèse</span>
            <p className="mt-1 font-mono text-xs text-zinc-600 dark:text-zinc-400">
              Visualisation radar, findings et recommandations générés automatiquement.
            </p>
          </li>
          <li className="rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800/50 p-4">
            <span className="font-mono text-sm font-medium text-cyan-600 dark:text-cyan-400">Export</span>
            <p className="mt-1 font-mono text-xs text-zinc-600 dark:text-zinc-400">
              Export PDF et CSV pour partage et archivage.
            </p>
          </li>
        </ul>
      </section>

      <div className="border-t border-zinc-200 dark:border-zinc-700 py-8 text-center">
        <p className="font-mono text-xs text-zinc-500 dark:text-zinc-400">
          IA Gen Maturity Evaluator · Peaksys
        </p>
      </div>
    </div>
  );
}
