/* global React, AX */

/* ---- shared bits ---- */
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 = [["Platform", "#platform"], ["Venues", "/venue/"], ["Pricing", "/pricing/"], ["Cities", "#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.ma" className="focusable text-[14px] font-medium text-sub hover:text-paper transition-colors px-3">Partner with us</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" }}>Get Axxess</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" }}>Get 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">
      {/* atmospheric bg */}
      <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">
        {/* copy */}
        <div>
          <div className="reveal"><Eyebrow>Nightlife OS · Multi-region</Eyebrow></div>
          <h1 className="reveal mt-6 font-bold tracking-[-0.035em] leading-[0.92]" style={{ fontSize: "clamp(46px, 7vw, 88px)" }}>
            The operating<br/>system for<br/><span className="text-amber">nightlife</span> &amp; events.
          </h1>
          <p className="reveal mt-7 text-[17px] lg:text-[19px] leading-relaxed text-sub max-w-[480px]" data-d="1">
            Discover the night, buy tickets, and reserve tables in one app — while venues and promoters run the whole floor from another. One platform, both sides of the door.
          </p>
          <div className="reveal mt-9 flex flex-wrap items-center gap-3" data-d="2">
            <CTA primary href="#cta">Get the app</CTA>
            <CTA href="mailto:contact@yellogem.ma">Partner with us</CTA>
          </div>
          {/* micro proof */}
          <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%" v="commission on tickets"/>
            <span className="hidden sm:block w-px h-8 bg-line"></span>
            <Proof icon={<AX.IconGlobe size={15}/>} k="Multi-region" v="launching city by city"/>
            <span className="hidden sm:block w-px h-8 bg-line"></span>
            <Proof icon={<AX.IconShield size={15}/>} k="Cryptographic" v="ticket infrastructure"/>
          </div>
        </div>

        {/* floating phone hint */}
        <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>
          {/* floating ticket chip */}
          <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 · party 4</div>
                <div className="text-[10px] text-faint">your table is your ticket</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>
  );
}

/* ============ DUAL AUDIENCE ============ */
function DualAudience() {
  const guest = [
    ["Discover the night", "A live feed of events in your city — curated, filterable, never a missed lineup."],
    ["Tickets in your wallet", "Buy in two taps. Codes live in one wallet, brightness auto-boosts at the gate."],
    ["Reserve the table", "Book bottle service or a booth — and walk straight in on the reservation alone."],
  ];
  const biz = [
    ["Sell with zero friction", "List events, set tiers, go on sale in minutes. 0% commission, free through launch."],
    ["Manage reservations", "Tables, deposits, and seating in one board your whole team works from."],
    ["Run a unified door", "One scanner admits tickets and table bookings alike. No double-entry, ever."],
  ];
  return (
    <section id="platform" className="relative py-20 lg:py-28">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[640px]">
          <Eyebrow>Two sides, one platform</Eyebrow>
          <h2 className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize: "clamp(32px,4.4vw,52px)" }}>
            Built for the guest <span className="text-faint">and</span> the house.
          </h2>
        </div>

        <div className="mt-12 grid lg:grid-cols-2 gap-5">
          <AudienceCard tag="For guests" app="Axxess" title="Everything between you and the night." items={guest} cta="Get the app" />
          <AudienceCard tag="For venues &amp; promoters" app="Axxess Venue · Ops" title="Everything it takes to run the room." items={biz} cta="Partner with us" accent />
        </div>
      </div>
    </section>
  );
}
function AudienceCard({ tag, app, title, items, cta, accent }) {
  return (
    <div className="reveal relative rounded-3xl p-7 lg:p-9 overflow-hidden" data-d={accent ? "1" : "0"}
      style={{ background: accent ? "rgba(255,255,255,0.05)" : "rgba(255,255,255,0.025)", boxShadow: accent ? "inset 0 0 0 1px rgba(250,250,250,0.18)" : "inset 0 0 0 1px rgba(250,250,250,0.08)" }}>
      {accent && <div className="absolute -top-20 -right-20 w-56 h-56 rounded-full blur-3xl" style={{ background: "radial-gradient(circle,rgba(250,250,250,0.07),transparent 70%)" }}></div>}
      <div className="relative">
        <div className="flex items-center justify-between">
          <span className="text-[11px] font-bold uppercase tracking-[0.18em]" style={{ color: accent ? "rgba(250,250,250,0.62)" : "rgba(250,250,250,0.4)" }} dangerouslySetInnerHTML={{ __html: tag }}></span>
          <span className="text-[11px] font-semibold text-faint">{app}</span>
        </div>
        <h3 className="mt-4 text-[25px] lg:text-[28px] font-bold tracking-[-0.02em] leading-[1.08] max-w-[340px]">{title}</h3>
        <div className="mt-7 space-y-4">
          {items.map(([h, b], i) => (
            <div key={i} className="flex gap-3.5">
              <div className="mt-0.5 w-6 h-6 rounded-full shrink-0 flex items-center justify-center" style={{ background: accent ? "rgba(250,250,250,0.14)" : "rgba(250,250,250,0.06)" }}>
                <AX.IconCheck size={14} stroke={2.4} style={{ color: "#FAFAFA" }}/>
              </div>
              <div>
                <div className="text-[15px] font-semibold">{h}</div>
                <div className="text-[13.5px] text-sub leading-snug mt-0.5">{b}</div>
              </div>
            </div>
          ))}
        </div>
        <a href="#cta" className="focusable group mt-8 inline-flex items-center gap-1.5 text-[14px] font-semibold" style={{ color: "#FAFAFA" }}>
          {cta} <AX.IconArrowRight size={16} className="group-hover:translate-x-0.5 transition-transform"/>
        </a>
      </div>
    </div>
  );
}

/* ============ SIGNATURE: table is your ticket ============ */
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>The signature idea</Eyebrow>
              <h2 className="mt-5 font-bold tracking-[-0.03em] leading-[0.98]" style={{ fontSize: "clamp(34px,5vw,62px)" }}>
                Your table<br/>is your <span className="text-amber">ticket</span>.
              </h2>
              <p className="mt-6 text-[17px] leading-relaxed text-sub max-w-[440px]">
                Reserve a table and the reservation becomes a valid entry credential. No separate ticket to buy, find, or forward. Walk to the door, scan, and you're in — the party admitted on the booking itself.
              </p>
              <div className="mt-8 flex flex-wrap gap-2.5">
                {["No double purchase", "One credential", "Party admitted together"].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>

            {/* visual: reservation -> entry */}
            <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)" }}>
                {/* reservation card */}
                <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">Reservation</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">The Marchetti party</div>
                      <div className="text-[12px] text-sub">Sat 28 · 11:20 PM · party of 4</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>
                {/* connector */}
                <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">resolves to</span>
                  <div className="w-px h-4 bg-amber/40"></div>
                </div>
                {/* entry credential — metallic, the brand's only sanctioned color moment */}
                <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">Valid entry · admits 4</div>
                    <div className="text-[12px] text-ink/65">Scan at The Door — no ticket needed</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, DualAudience, Signature });