/* global React, AX */
const { useState } = React;

/* ---- NAV ---- */
function PricingNav() {
  return (
    <header className="sticky top-0 z-50 border-b border-line"
      style={{ background:"rgba(10,10,10,0.92)", backdropFilter:"blur(18px)", WebkitBackdropFilter:"blur(18px)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 h-16 flex items-center justify-between gap-8">
        <div className="flex items-center gap-6">
          <a href="../../fr/" className="focusable flex items-center gap-1.5 text-[13px] text-sub hover:text-paper transition-colors">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M9 11L5 7L9 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Retour
          </a>
          <span className="w-px h-4 bg-line"/>
          <AX.Wordmark markSize={20} fontSize={16} ls={4}/>
        </div>
        <AX.CTA primary href="mailto:contact@yellogem.com">Accès anticipé</AX.CTA>
      </div>
    </header>
  );
}

/* ---- HERO ---- */
function PricingHero() {
  return (
    <section aria-labelledby="pricing-h1" className="relative pt-24 pb-20 lg:pt-32 lg:pb-24 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] rounded-full blur-[140px]"
          style={{ background:"radial-gradient(ellipse,rgba(250,250,250,0.05),transparent 70%)" }}/>
      </div>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 relative text-center">
        <div className="reveal max-w-[680px] mx-auto">
          <AX.Eyebrow className="justify-center">Tarification transparente</AX.Eyebrow>
          <h1 id="pricing-h1" className="mt-6 font-bold tracking-[-0.04em] leading-[1.0]"
            style={{ fontSize:"clamp(44px,6.5vw,82px)" }}>
            Zéro pourcent.<br className="hidden sm:block"/>Sans astérisque.
          </h1>
          <p className="mt-7 text-[18px] text-sub leading-relaxed max-w-[520px] mx-auto">
            Vendez des billets. Gardez tout. Pas de frais par billet, pas de commission plateforme, pas de surprise au virement. C'est tout le modèle tarifaire.
          </p>
        </div>
        <div className="reveal mt-10 flex flex-wrap justify-center gap-4" data-d="1">
          <AX.CTA primary href="mailto:contact@yellogem.com">Commencer gratuitement</AX.CTA>
          <AX.CTA href="#comparison">Voir la comparaison</AX.CTA>
        </div>
      </div>
    </section>
  );
}

/* ---- PLAN ---- */
function PricingPlan() {
  return (
    <section aria-labelledby="plan-h" className="relative py-16 lg:py-20">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[680px] mx-auto">
          <div className="rounded-[2rem] p-10 lg:p-14 relative overflow-hidden"
            style={{ background:"linear-gradient(145deg,rgba(250,250,250,0.07),rgba(250,250,250,0.02))", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.22)" }}>
            <div className="absolute -top-16 -right-12 w-64 h-64 rounded-full blur-3xl pointer-events-none" aria-hidden="true"
              style={{ background:"radial-gradient(circle,rgba(250,250,250,0.08),transparent 70%)" }}/>
            <div className="relative">
              <div className="flex items-start justify-between flex-wrap gap-4">
                <div>
                  <span className="text-[12px] font-bold uppercase tracking-[0.16em] text-faint">Axxess pour les salles</span>
                  <div className="mt-3 flex items-baseline gap-2">
                    <span className="text-[58px] lg:text-[72px] font-bold tracking-[-0.04em] leading-none">0%</span>
                    <span className="text-[18px] text-sub">par billet</span>
                  </div>
                </div>
                <span className="text-[11px] font-bold px-3 py-1.5 rounded-full bg-paper text-ink">GRATUIT AU LANCEMENT</span>
              </div>
              <p className="mt-6 text-[15.5px] text-sub leading-relaxed max-w-[480px]">
                Toutes les fonctionnalités incluses. Pas de paliers, pas d'options, pas de frais d'usage. La plateforme est gratuite ; vous gardez 100% des revenus billetterie.
              </p>
              <div className="mt-8 grid sm:grid-cols-2 gap-3">
                {[
                  "Types de billets illimités","Réservations de tables","App scan (tout appareil)","Tableau de bord analytique",
                  "Comptes du personnel","Gestion multi-événements","Liste d'invités et liste d'attente","Mode entrée hors ligne",
                  "Validation infalsifiable","Virement en 3–5 jours","Support 24/7","Accès API",
                ].map(item => (
                  <div key={item} className="flex items-center gap-2.5 text-[14px] text-sub">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                      <path d="M3 7.5l2.5 2.5 5.5-6" stroke="rgba(250,250,250,0.6)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    {item}
                  </div>
                ))}
              </div>
              <div className="mt-10 flex flex-wrap gap-4">
                <AX.CTA primary href="mailto:contact@yellogem.com">Commencer gratuitement</AX.CTA>
                <AX.CTA href="../venue/">Voir les fonctionnalités</AX.CTA>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- COMPARISON ---- */
function PricingComparison() {
  const rows = [
    { feature:"Commission billets", axxess:"0%", eventbrite:"8%", ra:"10%", dice:"10%" },
    { feature:"Frais acheteur", axxess:"Aucun", eventbrite:"Jusqu'à 15%", ra:"10%", dice:"Variable" },
    { feature:"Délai de virement", axxess:"3–5 jours", eventbrite:"5–7 jours", ra:"30+ jours", dice:"30+ jours" },
    { feature:"Réservations tables", axxess:"✓", eventbrite:"—", ra:"—", dice:"—" },
    { feature:"Mode scan hors ligne", axxess:"✓", eventbrite:"—", ra:"—", dice:"—" },
    { feature:"Comptes personnel", axxess:"✓", eventbrite:"Limité", ra:"Limité", dice:"Limité" },
    { feature:"Outils liste d'invités", axxess:"✓", eventbrite:"Option payante", ra:"—", dice:"—" },
    { feature:"Occupation en direct", axxess:"✓", eventbrite:"—", ra:"—", dice:"—" },
    { feature:"Accès API", axxess:"✓", eventbrite:"Plan payant", ra:"Plan payant", dice:"—" },
  ];

  const ColHead = ({ children, hi }) => (
    <th className="px-5 py-4 text-left text-[13px] font-bold" style={{ color: hi ? "#FAFAFA" : "rgba(250,250,250,0.45)" }}>{children}</th>
  );
  const Cell = ({ children, hi }) => (
    <td className="px-5 py-3.5 text-[13.5px]" style={{ color: hi ? "#FAFAFA" : "rgba(250,250,250,0.45)" }}>{children}</td>
  );

  return (
    <section id="comparison" aria-labelledby="comp-h" className="relative py-20 lg:py-28"
      style={{ background:"linear-gradient(180deg,transparent,rgba(250,250,250,0.02),transparent)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[540px]">
          <AX.Eyebrow>Comparaison des plateformes</AX.Eyebrow>
          <h2 id="comp-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
            Ce que vous comparez vraiment.
          </h2>
          <p className="mt-4 text-[15px] text-sub leading-relaxed">La commission n'est qu'une partie de l'histoire. Voici comment les fonctionnalités complètes se comparent.</p>
        </div>

        <div className="reveal mt-10 overflow-x-auto rounded-[1.5rem]" data-d="1"
          style={{ background:"#0f0f12", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.08)" }}>
          <table className="w-full min-w-[600px] border-collapse">
            <thead>
              <tr className="border-b border-line">
                <th className="px-5 py-4 text-left text-[12px] font-bold uppercase tracking-[0.1em] text-faint w-52">Fonctionnalité</th>
                <ColHead hi>Axxess</ColHead>
                <ColHead>Eventbrite</ColHead>
                <ColHead>Resident Advisor</ColHead>
                <ColHead>DICE</ColHead>
              </tr>
            </thead>
            <tbody>
              {rows.map(({ feature, axxess, eventbrite, ra, dice },i) => (
                <tr key={feature} className="border-b border-line last:border-0"
                  style={{ background: i%2===0?"transparent":"rgba(250,250,250,0.015)" }}>
                  <td className="px-5 py-3.5 text-[13.5px] text-sub">{feature}</td>
                  <Cell hi>{axxess}</Cell>
                  <Cell>{eventbrite}</Cell>
                  <Cell>{ra}</Cell>
                  <Cell>{dice}</Cell>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ---- FAQ ---- */
function PricingFAQ() {
  const [open, setOpen] = useState(null);
  const qs = [
    { q:"Le 0% est vraiment 0% ? Pas de condition cachée ?", a:"Oui. Axxess ne prélève aucune part de vos revenus billetterie. La plateforme est gratuite pendant le lancement. Les revenus futurs proviendront de services opérateurs premium — le modèle 0% sur les billets reste." },
    { q:"Que se passe-t-il après la période de lancement ?", a:"La commission 0% sur les billets est notre modèle de base, pas une promotion temporaire. Nous pourrons introduire des fonctionnalités premium optionnelles (analytiques avancées, marque blanche) à un tarif mensuel fixe — les ventes de billets restent gratuites." },
    { q:"Qui paie les frais de traitement ?", a:"Le traitement des paiements est assuré par notre partenaire (Stripe). Des frais de traitement minimes s'appliquent mais sont pris en charge de notre côté pendant le lancement. Nous communiquerons clairement avant tout changement." },
    { q:"Y a-t-il un volume minimum de billets ?", a:"Non. Que vous organisiez 1 événement avec 50 invités ou 10 événements avec 2 000 invités, le modèle tarifaire est le même : 0% de commission sur les billets." },
    { q:"Qu'en est-il des acomptes de réservation ?", a:"Les acomptes de réservation sont collectés et conservés jusqu'à l'événement. Si un invité ne se présente pas, vous gardez l'acompte. Des frais de traitement s'appliquent sur les acomptes comme sur les billets." },
    { q:"Dans quel délai suis-je payé ?", a:"Les virements sont traités dans les 3–5 jours ouvrables suivant votre événement. Des virements plus rapides sont prévus pour les salles établies." },
  ];
  return (
    <section aria-labelledby="pfaq-h" className="relative py-20 lg:py-24">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[540px]">
          <AX.Eyebrow>FAQ tarification</AX.Eyebrow>
          <h2 id="pfaq-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.6vw,44px)" }}>
            Questions sur les chiffres.
          </h2>
        </div>
        <div className="mt-10 max-w-[760px] space-y-2">
          {qs.map(({ q, a },i) => (
            <div key={i} className="reveal rounded-2xl overflow-hidden" data-d={(i%2)+1}
              style={{ background:"rgba(255,255,255,0.025)", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.07)" }}>
              <button className="focusable w-full px-6 py-5 flex items-center justify-between gap-4 text-left"
                aria-expanded={open===i} onClick={() => setOpen(open===i?null:i)}>
                <span className="text-[15.5px] font-semibold">{q}</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"
                  style={{ transform: open===i?"rotate(180deg)":"none", transition:"transform .25s", flexShrink:0 }}>
                  <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              {open===i && (
                <div className="px-6 pb-5 text-[14.5px] text-sub leading-relaxed border-t border-line pt-4">{a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CTA ---- */
function PricingCTA() {
  return (
    <section id="pricing-cta" aria-labelledby="pcta-h" className="relative pt-12 pb-24 lg:pt-16 lg:pb-32">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal rounded-[2.5rem] p-10 lg:p-16 relative overflow-hidden"
          style={{ background:"linear-gradient(140deg,rgba(250,250,250,0.07),rgba(250,250,250,0.02))", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.2)" }}>
          <div className="absolute -top-16 -right-16 w-72 h-72 rounded-full blur-3xl pointer-events-none" aria-hidden="true"
            style={{ background:"radial-gradient(circle,rgba(250,250,250,0.07),transparent 70%)" }}/>
          <div className="relative max-w-[560px]">
            <AX.Eyebrow>Commencer</AX.Eyebrow>
            <h2 id="pcta-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,52px)" }}>
              Commencez à vendre des billets à 0% aujourd'hui.
            </h2>
            <p className="mt-5 text-[16px] text-sub leading-relaxed">Gratuit pendant le lancement. Sans carte bancaire. Votre premier événement en ligne en moins de 30 minutes.</p>
            <div className="mt-9 flex flex-wrap gap-4">
              <AX.CTA primary href="mailto:contact@yellogem.com">Devenir partenaire</AX.CTA>
              <AX.CTA href="../venue/">Voir les fonctionnalités</AX.CTA>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AX = Object.assign(window.AX||{}, {
  PricingNav, PricingHero, PricingPlan, PricingComparison, PricingFAQ, PricingCTA,
});