import Link from "next/link";
import {
  ArrowRight,
  CheckCircle2,
  Link2,
  Megaphone,
  ShieldCheck,
  Target,
  UsersRound
} from "lucide-react";
import { AffiliationLandingExperience } from "@/components/affiliation/affiliation-landing-experience";
import { AffiliatePanel, AffiliationFrame, AffiliationHeader, StatusPill } from "@/components/affiliation/affiliation-ui";

const benefits = [
  "CPA, Revenue Share ou Hybrid",
  "Liens traqués dès validation",
  "Dashboard affilié en temps réel",
  "Paiements mensuels entre le 10 et le 15"
];

const steps = [
  ["01", "Inscription", "Présentez votre audience, vos sources de trafic et le modèle souhaité."],
  ["02", "Validation", "L'équipe vérifie votre profil et assigne l'offre adaptée."],
  ["03", "Promotion", "Vous recevez vos liens traqués et commencez à envoyer des joueurs."],
  ["04", "Commission", "Vos performances sont suivies et vos commissions sont validées chaque mois."]
];

const faqs = [
  {
    question: "Qui peut rejoindre le programme ?",
    answer: "Les éditeurs, médias sportifs, communautés, influenceurs et acheteurs média capables d'envoyer un trafic conforme, qualifié et vérifiable."
  },
  {
    question: "Quels deals sont proposés ?",
    answer: "Le programme gère les offres CPA, Revenue Share et Hybrid. Les conditions sont configurées par l'administration selon le partenaire et la qualité du trafic."
  },
  {
    question: "Comment sont suivies les conversions ?",
    answer: "Chaque affilié dispose de liens uniques. Les clics, inscriptions, premiers dépôts et commissions sont rattachés à ces liens dans le dashboard."
  },
  {
    question: "Quand les paiements sont-ils réalisés ?",
    answer: "Les commissions validées sont payées une fois par mois, entre le 10 et le 15 du mois suivant."
  }
];

export default function AffiliationLandingPage() {
  return (
    <AffiliationFrame>
      <AffiliationHeader />
      <main className="overflow-hidden">
        <HeroSection />
        <section id="avantages" className="mx-auto max-w-[1120px] px-4 py-8 sm:py-10">
          <div className="grid gap-4 lg:grid-cols-[0.82fr_1.18fr] lg:items-end">
            <div>
              <StatusPill label="Pourquoi ZiraBet ?" />
              <h2 className="mt-3 text-2xl font-black text-white sm:text-3xl">Vous envoyez des joueurs. On rend le suivi simple.</h2>
            </div>
            <p className="text-sm leading-6 text-slate-400">
              Le programme d'affiliation ZiraBet est conçu pour les partenaires qui veulent une offre claire, un tracking propre et une vue complète sur les commissions sans tableur ni échanges dispersés.
            </p>
          </div>
          <div className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            <BenefitCard icon={Target} title="Offres négociées" body="CPA, RS ou Hybrid selon votre audience, votre historique et vos volumes." />
            <BenefitCard icon={Link2} title="Liens propres" body="Recevez des liens configurés par l'équipe, avec deal, GEO et landing dédiés." />
            <BenefitCard icon={UsersRound} title="Joueurs qualifiés" body="Suivez les inscriptions, premiers dépôts et pays générés par vos campagnes." />
            <BenefitCard icon={ShieldCheck} title="Paiements cadrés" body="Les commissions sont validées puis traitées dans le cycle mensuel." />
          </div>
        </section>

        <AffiliationLandingExperience />

        <section id="fonctionnement" className="mx-auto max-w-[1120px] px-4 py-8 sm:py-10">
          <div className="grid gap-4 lg:grid-cols-[0.72fr_1.28fr] lg:items-start">
            <div>
              <StatusPill label="Comment ça marche" tone="slate" />
              <h2 className="mt-3 text-2xl font-black text-white sm:text-3xl">Un parcours court, mais contrôlé.</h2>
              <p className="mt-3 text-sm leading-6 text-slate-400">
                L'objectif est simple : valider les bons partenaires, activer les liens rapidement, puis suivre les performances de façon transparente.
              </p>
            </div>
            <div className="grid gap-3 sm:grid-cols-2">
              {steps.map(([number, title, body]) => (
                <StepCard key={number} number={number} title={title} body={body} />
              ))}
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-[1120px] px-4 py-8 sm:py-10">
          <AffiliatePanel className="relative overflow-hidden p-4 sm:p-5">
            <div className="absolute inset-0 bg-[linear-gradient(120deg,rgba(15,191,143,.12),transparent_42%),linear-gradient(90deg,rgba(245,189,71,.08),transparent_60%)]" />
            <div className="relative grid gap-4 lg:grid-cols-[1fr_auto] lg:items-center">
              <div>
                <div className="flex items-center gap-2 text-felt">
                  <Megaphone className="h-4 w-4" />
                  <span className="text-xs font-black uppercase tracking-[0.18em]">Candidature</span>
                </div>
                <h2 className="mt-3 text-2xl font-black text-white sm:text-3xl">Prêt à monétiser votre audience sport ?</h2>
                <p className="mt-3 max-w-[690px] text-sm leading-6 text-slate-300">
                  Créez votre compte, indiquez vos sources de trafic et l'équipe affiliation vous assigne une offre dès validation.
                </p>
              </div>
              <div className="flex flex-col gap-2 sm:flex-row">
                <Link href="/affiliation/register" className="inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-felt px-4 text-sm font-black text-ink-950 shadow-[0_12px_28px_rgba(15,191,143,.22)]">
                  Devenir affilié
                  <ArrowRight className="h-4 w-4" />
                </Link>
                <Link href="/affiliation/login" className="inline-flex h-10 items-center justify-center rounded-lg border border-white/10 bg-white/[0.04] px-4 text-sm font-bold text-slate-200">
                  Connexion
                </Link>
              </div>
            </div>
          </AffiliatePanel>
        </section>

        <section id="faq" className="mx-auto max-w-[1120px] px-4 pb-12">
          <div className="grid gap-4 lg:grid-cols-[0.65fr_1.35fr]">
            <div>
              <StatusPill label="FAQ" tone="slate" />
              <h2 className="mt-3 text-2xl font-black text-white sm:text-3xl">Questions fréquentes.</h2>
              <p className="mt-3 text-sm leading-6 text-slate-400">
                Les conditions définitives sont toujours liées à l'offre activée sur votre compte affilié.
              </p>
            </div>
            <div className="space-y-2">
              {faqs.map((faq) => (
                <FAQItem key={faq.question} {...faq} />
              ))}
            </div>
          </div>
        </section>
      </main>
    </AffiliationFrame>
  );
}

function HeroSection() {
  return (
    <section className="relative isolate border-b border-white/10">
      <div className="absolute inset-0 -z-10 bg-[linear-gradient(115deg,rgba(15,191,143,.14),transparent_34%),linear-gradient(180deg,rgba(4,18,27,.96),rgba(2,9,16,.98))]" />
      <div className="absolute inset-0 -z-10 opacity-[0.22] [background-image:linear-gradient(rgba(255,255,255,.08)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.08)_1px,transparent_1px)] [background-size:42px_42px]" />
      <div className="absolute right-[-22%] top-24 -z-10 hidden w-[760px] rotate-[-2deg] overflow-hidden rounded-2xl border border-white/10 opacity-55 shadow-[0_30px_110px_rgba(0,0,0,.55)] lg:block">
        <img src="/affiliation/dashboard-affiliate-full.png" alt="" className="w-full" />
        <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(2,9,16,.1),rgba(2,9,16,.62))]" />
      </div>
      <div className="mx-auto grid min-h-[650px] max-w-[1120px] px-4 py-8 sm:min-h-[620px] sm:py-12 lg:items-center">
        <div className="w-full min-w-0 max-w-[680px]">
          <StatusPill label="Programme d'affiliation ZiraBet" />
          <h1 className="mt-4 text-[2.25rem] font-black leading-[1.03] text-white sm:text-5xl">
            Recommandez ZiraBet. Suivez chaque joueur. Encaissez vos commissions.
          </h1>
          <p className="mt-4 max-w-[590px] text-sm leading-6 text-slate-300 sm:text-base sm:leading-7">
            Une plateforme indépendante pour les affiliés sportsbook : offres CPA/RS/Hybrid, liens traqués, dashboard en temps réel et paiements mensuels.
          </p>
          <div className="mt-5 flex flex-col gap-2 sm:flex-row">
            <Link href="/affiliation/register" className="inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-felt px-4 text-sm font-black text-ink-950 shadow-[0_12px_34px_rgba(15,191,143,.26)]">
              S'inscrire gratuitement
              <ArrowRight className="h-4 w-4" />
            </Link>
            <Link href="#dashboard" className="inline-flex h-10 items-center justify-center rounded-lg border border-white/10 bg-white/[0.04] px-4 text-sm font-bold text-slate-100">
              Voir le dashboard
            </Link>
          </div>
          <div className="mt-5 grid gap-2 sm:grid-cols-2">
            {benefits.map((label) => (
              <div key={label} className="flex items-center gap-2 rounded-lg border border-white/10 bg-[#061018]/72 px-3 py-2 text-xs font-bold text-slate-300">
                <CheckCircle2 className="h-4 w-4 text-felt" />
                {label}
              </div>
            ))}
          </div>
          <div className="relative mt-6 aspect-[16/10] w-full overflow-hidden rounded-xl border border-white/12 bg-[#07131b] shadow-[0_24px_80px_rgba(0,0,0,.38)] lg:hidden">
            <img src="/affiliation/dashboard-affiliate-full.png" alt="Dashboard affilié ZiraBet" className="absolute inset-x-0 top-0 w-[660px] max-w-none" />
          </div>
        </div>
      </div>
    </section>
  );
}

function BenefitCard({ icon: Icon, title, body }: { icon: typeof Target; title: string; body: string }) {
  return (
    <AffiliatePanel className="p-4">
      <div className="grid h-9 w-9 place-items-center rounded-lg border border-felt/20 bg-felt/10 text-felt">
        <Icon className="h-4 w-4" />
      </div>
      <h3 className="mt-3 text-sm font-black text-white">{title}</h3>
      <p className="mt-2 text-xs leading-5 text-slate-400">{body}</p>
    </AffiliatePanel>
  );
}

function StepCard({ number, title, body }: { number: string; title: string; body: string }) {
  return (
    <AffiliatePanel className="p-4">
      <div className="flex items-center gap-2">
        <span className="grid h-7 w-7 place-items-center rounded-md bg-felt text-[11px] font-black text-ink-950">{number}</span>
        <h3 className="text-sm font-black text-white">{title}</h3>
      </div>
      <p className="mt-2 text-xs leading-5 text-slate-400">{body}</p>
    </AffiliatePanel>
  );
}

function FAQItem({ question, answer }: { question: string; answer: string }) {
  return (
    <details className="group rounded-lg border border-white/10 bg-[#0b151d]/88 p-3">
      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-black text-white [&::-webkit-details-marker]:hidden">
        {question}
        <span className="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-white/[0.05] text-felt transition group-open:rotate-45">+</span>
      </summary>
      <p className="mt-3 text-xs leading-5 text-slate-400">{answer}</p>
    </details>
  );
}