/* global React, AX */

function Eyebrow({ children, className = "" }) {
  return (
    <div className={"flex items-center gap-2.5 " + className}>
      <span className="h-px w-7" style={{ background: "rgba(250,250,250,0.55)" }}></span>
      <span className="text-[11px] font-bold uppercase tracking-[0.22em]" style={{ color: "rgba(250,250,250,0.58)" }}>{children}</span>
    </div>
  );
}

function CTA({ children, primary, href = "#", className = "", ...rest }) {
  if (primary) {
    return (
      <a href={href} {...rest}
        className={"focusable group inline-flex items-center gap-2 h-12 px-6 rounded-full text-[14.5px] font-semibold text-ink active:scale-[.98] transition-all " + className}
        style={{ background: "#FAFAFA", boxShadow: "0 12px 30px -10px rgba(255,255,255,0.16)" }}>
        {children}
        <AX.IconArrowRight size={17} stroke={2.2} className="group-hover:translate-x-0.5 transition-transform"/>
      </a>
    );
  }
  return (
    <a href={href} {...rest}
      className={"focusable inline-flex items-center gap-2 h-12 px-6 rounded-full text-[14.5px] font-semibold text-paper active:scale-[.98] transition-all hover:bg-paper/[0.06] " + className}
      style={{ boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.16)" }}>
      {children}
    </a>
  );
}

/* ============ NAV ============ */
function Nav() {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const links = [["Produit", "#venue"], ["Tarifs", "/fr/pricing/"], ["Sécurité", "/fr/security/"], ["Villes", "#cities"]];
  return (
    <header className="fixed top-0 inset-x-0 z-50 transition-all"
      style={{
        background: scrolled ? "rgba(10,10,10,0.72)" : "transparent",
        backdropFilter: scrolled ? "blur(16px) saturate(140%)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(16px) saturate(140%)" : "none",
        borderBottom: scrolled ? "1px solid rgba(250,250,250,0.08)" : "1px solid transparent",
      }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 h-[72px] flex items-center justify-between">
        <a href="#top" className="focusable text-paper"><AX.Wordmark markSize={24} fontSize={18} ls={4} accent/></a>
        <nav className="hidden md:flex items-center gap-8">
          {links.map(([l, h]) => (
            <a key={l} href={h} className="focusable text-[14px] font-medium text-sub hover:text-paper transition-colors">{l}</a>
          ))}
        </nav>
        <div className="hidden md:flex items-center gap-2.5">
          <a href="mailto:contact@yellogem.com" className="focusable text-[14px] font-medium text-sub hover:text-paper transition-colors px-3">Rejoignez-nous</a>
          <a href="#cta" className="focusable inline-flex items-center gap-1.5 h-10 px-5 rounded-full text-[13.5px] font-semibold text-ink active:scale-[.98] transition-transform" style={{ background: "#FAFAFA" }}>Télécharger</a>
        </div>
        <button className="md:hidden focusable text-paper p-1.5" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(o => !o)}>
          <AX.IconMenu size={24}/>
        </button>
      </div>
      {open && (
        <div className="md:hidden px-6 pb-5 pt-1" style={{ background: "rgba(10,10,10,0.95)", backdropFilter: "blur(16px)", borderBottom: "1px solid rgba(250,250,250,0.08)" }}>
          <div className="flex flex-col gap-1">
            {links.map(([l, h]) => (
              <a key={l} href={h} onClick={() => setOpen(false)} className="focusable py-2.5 text-[15px] font-medium text-sub">{l}</a>
            ))}
            <a href="#cta" onClick={() => setOpen(false)} className="mt-2 inline-flex items-center justify-center h-11 rounded-full text-[14px] font-semibold text-ink" style={{ background: "#FAFAFA" }}>Télécharger Axxess</a>
          </div>
        </div>
      )}
    </header>
  );
}

/* ============ HERO ============ */
function Hero() {
  return (
    <section id="top" className="relative overflow-hidden pt-[120px] lg:pt-[150px] pb-20 lg:pb-28">
      <div className="absolute inset-0 -z-10" aria-hidden="true">
        <div className="absolute inset-0" style={{ background: "radial-gradient(120% 90% at 78% 8%, rgba(250,250,250,0.08), transparent 52%), radial-gradient(80% 70% at 8% 95%, rgba(250,250,250,0.04), transparent 55%)" }}></div>
        <div className="absolute inset-0 opacity-[0.4]" style={{ backgroundImage: "linear-gradient(rgba(250,250,250,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(250,250,250,0.025) 1px,transparent 1px)", backgroundSize: "62px 62px", maskImage: "radial-gradient(100% 100% at 50% 0%, #000 30%, transparent 85%)" }}></div>
      </div>

      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 grid lg:grid-cols-[1.15fr_0.85fr] gap-12 items-center">
        <div>
          <div className="reveal"><Eyebrow>Pour les salles &amp; promoteurs · Multi-région</Eyebrow></div>
          <h1 className="reveal mt-6 font-bold tracking-[-0.035em] leading-[1.02]" style={{ fontSize: "clamp(34px, 4.6vw, 58px)" }}>
            Billets à <span className="text-amber">0% de commission</span>.<br/>Une seule porte pour<br/>billets &amp; tables.
          </h1>
          <p className="reveal mt-7 text-[17px] lg:text-[19px] leading-relaxed text-sub max-w-[480px]" data-d="1">
            Axxess, c'est ainsi que les salles et les promoteurs affichent complet, gèrent leurs réservations et admettent chaque invité depuis un seul écran en direct — sur les téléphones que votre équipe possède déjà. Les invités ont une application pour découvrir et entrer directement. Premier événement en ligne en 30 minutes.
          </p>
          <div className="reveal mt-9 flex flex-wrap items-center gap-3" data-d="2">
            <CTA primary href="mailto:contact@yellogem.com">Rejoignez-nous</CTA>
            <CTA href="/fr/venue/">Voir Axxess Venue</CTA>
          </div>
          <div className="reveal mt-10 flex flex-wrap items-center gap-x-7 gap-y-3" data-d="3">
            <Proof icon={<AX.IconZap size={15}/>} k="0% commission" v="vous gardez la recette"/>
            <span className="hidden sm:block w-px h-8 bg-line"></span>
            <Proof icon={<AX.IconDoor size={15}/>} k="Une porte" v="billets + tables"/>
            <span className="hidden sm:block w-px h-8 bg-line"></span>
            <Proof icon={<AX.IconShield size={15}/>} k="Infalsifiable" v="sans matériel"/>
          </div>
        </div>

        <div className="reveal relative hidden lg:flex justify-center" data-d="2">
          <div className="absolute w-[300px] h-[300px] rounded-full blur-3xl" style={{ background: "radial-gradient(circle, rgba(250,250,250,0.10), transparent 68%)" }}></div>
          <div className="floaty relative">
            <AX.Phone><AX.DoorScreen/></AX.Phone>
          </div>
          <div className="floaty2 absolute -left-6 top-16 rounded-2xl px-4 py-3 z-10"
            style={{ background: "rgba(18,18,21,0.82)", backdropFilter: "blur(10px)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.1), 0 20px 40px -16px rgba(0,0,0,0.8)" }}>
            <div className="flex items-center gap-2.5">
              <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: "rgba(250,250,250,0.12)" }}><AX.IconTicket size={16} className="text-paper"/></div>
              <div>
                <div className="text-[12px] font-bold leading-tight">Table 12 · 4 personnes</div>
                <div className="text-[10px] text-faint">admis sur la réservation</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
function Proof({ icon, k, v }) {
  return (
    <div className="flex items-center gap-2.5">
      <span className="text-amberHi">{icon}</span>
      <div className="leading-tight">
        <div className="text-[14px] font-bold">{k}</div>
        <div className="text-[12px] text-faint">{v}</div>
      </div>
    </div>
  );
}

/* ============ SIGNATURE ============ */
function Signature() {
  return (
    <section className="relative py-20 lg:py-28">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="relative rounded-[2rem] overflow-hidden px-7 lg:px-16 py-14 lg:py-20"
          style={{ background: "linear-gradient(150deg,#121214,#0b0b0c)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.07)" }}>
          <div className="absolute -top-24 right-0 w-[420px] h-[420px] rounded-full blur-3xl" style={{ background: "radial-gradient(circle,rgba(250,250,250,0.06),transparent 68%)" }}></div>
          <div className="relative grid lg:grid-cols-[1fr_0.9fr] gap-12 items-center">
            <div className="reveal">
              <Eyebrow>L'idée signature</Eyebrow>
              <h2 className="mt-5 font-bold tracking-[-0.03em] leading-[0.98]" style={{ fontSize: "clamp(34px,5vw,62px)" }}>
                Votre table<br/>est votre <span className="text-amber">billet</span>.
              </h2>
              <p className="mt-6 text-[17px] leading-relaxed text-sub max-w-[440px]">
                Réservez une table et la réservation elle-même devient un titre d'entrée valide — pas de billet séparé à acheter, trouver ou transmettre. Tout le groupe entre directement. C'est pourquoi les invités choisissent Axxess, et pourquoi vos tables se remplissent sans aucune friction au guichet.
              </p>
              <div className="mt-8 flex flex-wrap gap-2.5">
                {["Pas d'achat double", "Un seul justificatif", "Groupe admis ensemble"].map(t => (
                  <span key={t} className="text-[12.5px] font-semibold px-3.5 py-2 rounded-full" style={{ background: "rgba(250,250,250,0.05)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.09)" }}>{t}</span>
                ))}
              </div>
            </div>

            <div className="reveal" data-d="1">
              <div className="rounded-2xl p-6" style={{ background: "rgba(255,255,255,0.025)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.08)" }}>
                <div className="rounded-xl p-4" style={{ background: "rgba(250,250,250,0.06)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.18)" }}>
                  <div className="flex items-center justify-between">
                    <span className="text-[10px] font-bold uppercase tracking-[0.18em] text-amberHi">Réservation</span>
                    <span className="text-[10px] font-semibold text-faint">Velvet Room</span>
                  </div>
                  <div className="mt-2.5 flex items-end justify-between">
    <div>
                      <div className="text-[19px] font-bold leading-tight">La famille Marchetti</div>
                      <div className="text-[12px] text-sub">Sam 28 · 23h20 · 4 personnes</div>
                    </div>
                    <div className="text-right">
                      <div className="text-[24px] font-bold leading-none">T12</div>
                      <div className="text-[9px] text-faint tracking-wide">TABLE</div>
                    </div>
                  </div>
                </div>
                <div className="flex flex-col items-center py-2.5">
                  <div className="w-px h-4 bg-amber/40"></div>
                  <span className="text-[10px] font-bold uppercase tracking-[0.18em] text-faint">se résout en</span>
                  <div className="w-px h-4 bg-amber/40"></div>
                </div>
                <div className="rounded-xl p-4 flex items-center gap-3.5" style={{ background: "linear-gradient(135deg,#F6F6F8,#CFCFD5)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px rgba(10,10,10,0.06)" }}>
                  <div className="w-11 h-11 rounded-lg bg-ink/20 flex items-center justify-center shrink-0">
                    <AX.IconQr size={24} className="text-ink"/>
                  </div>
                  <div className="flex-1">
                    <div className="text-[14px] font-bold text-ink">Entrée valide · admet 4</div>
                    <div className="text-[12px] text-ink/65">Scanner à La Porte — pas de billet requis</div>
                  </div>
                  <AX.IconCheck size={22} stroke={2.6} className="text-ink"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AX = Object.assign(window.AX || {}, { Eyebrow, CTA, Nav, Hero, Signature });