import { Link } from 'react-router-dom';

export default function LandingPage() {
  return (
    <div className="flex flex-col gap-24 pb-16">

      {/* ── Hero ──────────────────────────────────────────────────────────── */}
      <section className="pt-16 flex flex-col gap-6 max-w-3xl">

        {/* Badge */}
        <div className="inline-flex w-fit items-center gap-2 rounded border border-od-border bg-od-surface px-3 py-1">
          <span className="h-1.5 w-1.5 rounded-full bg-od-accent" />
          <span className="font-mono text-2xs text-od-muted tracking-widest uppercase">
            Vidéos · Playlists · Communauté
          </span>
        </div>

        {/* Headline */}
        <h1 className="font-display text-5xl font-bold leading-[1.1] tracking-tight text-od-text">
          Partagez vos vidéos.{' '}
          <span className="text-od-accent">Construisez votre audience.</span>
        </h1>

        {/* Sous-titre */}
        <p className="text-base text-od-muted leading-relaxed max-w-xl">
          OriginsDigital est une plateforme de partage vidéo pensée pour les créateurs.
          Organisez votre contenu en playlists, proposez du contenu libre ou premium,
          et faites grandir votre communauté.
        </p>

        {/* CTAs */}
        <div className="flex items-center gap-4 pt-2">
          <Link
            to="/app"
            className="inline-flex items-center gap-2 rounded border border-od-accent bg-od-accent px-6 py-2.5 font-mono text-sm font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim"
          >
            Explorer les vidéos
          </Link>
          <Link
            to="/login"
            className="inline-flex items-center gap-2 rounded border border-od-border px-6 py-2.5 font-mono text-sm text-od-muted transition-all duration-150 hover:border-od-border-hi hover:text-od-text"
          >
            Se connecter
          </Link>
        </div>

      </section>

      {/* ── Features ──────────────────────────────────────────────────────── */}
      <section className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        {[
          {
            label: 'Playlists organisées',
            desc: 'Regroupez vos vidéos par thème, série ou parcours. Vos spectateurs retrouvent facilement ce qui les intéresse.',
          },
          {
            label: 'Contenu libre & premium',
            desc: 'Proposez du contenu en accès libre pour attirer, et du contenu premium pour fidéliser. Vous décidez.',
          },
          {
            label: 'Fait pour les créateurs',
            desc: 'Interface épurée, recherche rapide, profil personnalisé. Le contenu au centre, pas la distraction.',
          },
        ].map(({ label, desc }) => (
          <div
            key={label}
            className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-5 transition-colors duration-150 hover:border-od-border-hi"
          >
            <div className="h-px w-8 bg-od-accent" />
            <p className="text-sm font-semibold text-od-text">{label}</p>
            <p className="text-xs text-od-muted leading-relaxed">{desc}</p>
          </div>
        ))}
      </section>

      {/* ── Comment ça marche ─────────────────────────────────────────────── */}
      <section className="flex flex-col gap-8">
        <div className="flex flex-col gap-2">
          <span className="font-mono text-2xs uppercase tracking-widest text-od-muted">Comment ça marche</span>
          <h2 className="font-display text-3xl font-bold text-od-text tracking-tight">
            Simple et direct.
          </h2>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
          {[
            { step: '01', title: 'Connectez-vous', desc: 'Via Discord, GitHub, Google ou Twitch. Un clic, pas de formulaire.' },
            { step: '02', title: 'Explorez', desc: 'Parcourez les vidéos libres, cherchez par thème, découvrez les playlists.' },
            { step: '03', title: 'Accédez au premium', desc: 'Débloquez les formations complètes et le contenu exclusif.' },
          ].map(({ step, title, desc }) => (
            <div key={step} className="flex flex-col gap-2">
              <span className="font-mono text-lg font-bold text-od-accent">{step}</span>
              <p className="text-sm font-semibold text-od-text">{title}</p>
              <p className="text-xs text-od-muted leading-relaxed">{desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ── CTA final ─────────────────────────────────────────────────────── */}
      <section className="flex flex-col items-center gap-4 rounded border border-od-border bg-od-surface px-8 py-10 text-center">
        <h2 className="font-display text-2xl font-bold text-od-text">
          Prêt à découvrir ?
        </h2>
        <p className="text-sm text-od-muted max-w-md">
          Pas besoin de compte pour explorer. Connectez-vous quand vous êtes prêt.
        </p>
        <div className="flex items-center gap-4 pt-2">
          <Link
            to="/app"
            className="inline-flex items-center gap-2 rounded border border-od-accent bg-od-accent px-6 py-2.5 font-mono text-sm font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim"
          >
            Explorer les vidéos
          </Link>
        </div>
      </section>

    </div>
  );
}