/* ============================================================
   HOME — long-scroll experience
   heroVariant: "video" | "split" | "minimal"
   ============================================================ */
function HomeHero({ variant, go }) {
  const t = useT();
  const meta = (
    <div className="hidden md:flex absolute top-28 inset-x-0 z-10 container justify-between text-white/55 label">
      <span>Doral · Miami, FL</span><span>{t("Open Daily · From 12PM", "Abierto Cada Día · Desde 12PM")}</span>
    </div>
  );
  const ctas = (
    <div className="reveal in flex flex-col sm:flex-row gap-4 justify-center">
      <PrimaryBtn icon="arrow-up-right" onClick={() => go("reserve")}>{t("Reserve a Table", "Reservar Mesa")}</PrimaryBtn>
      <GhostBtn icon="play" onClick={() => go("membership")}>{t("Become a Member", "Hazte Miembro")}</GhostBtn>
    </div>
  );
  const eyebrow = (
    <div className="reveal in flex items-center gap-4 mb-7 justify-center">
      <span className="w-10 hairline"></span>
      <span className="label text-gold-soft">{t("Miami's Premier Gentlemen's Club", "El Club de Caballeros Premier de Miami")}</span>
      <span className="w-10 hairline"></span>
    </div>
  );
  // Daytime offer banner — open from 12 PM, free lunch Mon–Fri (pay only entry)
  const lunchBanner = (
    <div className="reveal in mb-6 flex justify-center">
      <div className="inline-flex items-center gap-2.5 rounded-full border border-gold/45 bg-gold/10 backdrop-blur-md px-4 py-2 shadow-[0_8px_30px_-12px_rgba(201,146,154,.6)]">
        <Icon name="utensils" className="w-4 h-4 text-gold-soft shrink-0" />
        <span className="label text-gold-soft text-[9.5px] md:text-[11px] leading-tight">{t("Open from 12 PM · Free lunch Mon–Fri — you only pay your entry", "Abierto desde las 12 PM · Almuerzo gratis Lun–Vie — solo pagas tu entrada")}</span>
      </div>
    </div>
  );

  if (variant === "split") {
    return (
      <section id="top" className="relative min-h-screen grid lg:grid-cols-2 bg-black">
        <div className="relative flex items-center px-6 md:px-12 lg:px-16 pt-28 pb-16 lg:py-0 order-2 lg:order-1">
          <div className="max-w-xl">
            <div className="reveal in inline-flex items-center gap-2.5 rounded-full border border-gold/45 bg-gold/10 px-4 py-2 mb-5"><Icon name="utensils" className="w-4 h-4 text-gold-soft shrink-0" /><span className="label text-gold-soft text-[9.5px] md:text-[11px] leading-tight">{t("Open from 12 PM · Free lunch Mon–Fri — you only pay your entry", "Abierto desde las 12 PM · Almuerzo gratis Lun–Vie — solo pagas tu entrada")}</span></div>
            <div className="reveal in flex items-center gap-3 mb-6"><span className="w-10 hairline"></span><span className="label text-gold-soft">{t("Premier Gentlemen's Club", "Club de Caballeros Premier")}</span></div>
            <h1 className="reveal in text-[clamp(3rem,8vw,6.5rem)] font-black uppercase leading-[0.86] tracking-tighter mb-5">Pink Pony<br /><span className="shine">Club</span></h1>
            <p className="reveal in serif-it text-2xl text-white/80 mb-8">{t("An evening, elevated.", "Una noche, elevada.")}</p>
            <div className="reveal in flex flex-col sm:flex-row gap-4"><PrimaryBtn icon="arrow-up-right" onClick={() => go("reserve")}>{t("Reserve a Table", "Reservar Mesa")}</PrimaryBtn><GhostBtn onClick={() => go("membership")}>{t("Membership", "Membresía")}</GhostBtn></div>
          </div>
        </div>
        <div className="relative min-h-[50vh] lg:min-h-screen order-1 lg:order-2 overflow-hidden">
          <Photo src="assets/photos/venue-bar.jpg" alt="Pink Pony Club" className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.7) contrast(1.05)" }} />
          <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-transparent to-transparent lg:from-black/90"></div>
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        </div>
      </section>
    );
  }

  if (variant === "minimal") {
    return (
      <section id="top" className="relative h-screen flex flex-col justify-center items-center bg-black overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[80vw] h-[80vw] max-w-3xl bg-coral/12 rounded-full blur-[160px]"></div>
          <div className="absolute bottom-0 right-1/4 w-[40vw] h-[40vw] bg-grape/10 rounded-full blur-[140px]"></div>
        </div>
        {meta}
        <div className="relative z-10 container flex flex-col items-center text-center">
          {lunchBanner}
          {eyebrow}
          <h1 className="reveal in text-[clamp(3.5rem,13vw,12rem)] font-black uppercase leading-[0.82] tracking-tighter">Pink Pony<br /><span className="shine">Club</span></h1>
          <p className="reveal in serif-it text-2xl md:text-4xl text-white/85 mt-6 mb-9">{t("An evening, elevated.", "Una noche, elevada.")}</p>
          {ctas}
        </div>
        <a onClick={() => document.getElementById("marquee")?.scrollIntoView({ behavior: "smooth" })} className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 text-white/45 hover:text-gold transition-colors scroll-cue cursor-pointer"><Icon name="chevron-down" className="w-7 h-7" /></a>
      </section>
    );
  }

  // video (default) — scroll-reactive cinematic hero: a pinned still zooms
  // (slow Ken-Burns + scroll zoom) while the headline parallaxes up & fades.
  // Self-contained (no external embed) so the banner never breaks.
  const heroRef = useRef(null);
  const [p, setP] = useState(0); // 0..1 scroll progress through the hero
  useEffect(() => {
    const onScroll = () => {
      const el = heroRef.current; if (!el) return;
      const total = el.offsetHeight - window.innerHeight;
      setP(Math.min(1, Math.max(0, -el.getBoundingClientRect().top / (total || 1))));
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const stats = [
    [t("Open Daily", "Cada Día"), "12PM–5AM"],
    [t("4K Screens", "Pantallas 4K"), "20+"],
    [t("VIP Tables", "Mesas VIP"), "60+"],
  ];
  return (
    <section ref={heroRef} id="top" className="relative bg-black" style={{ height: "200vh" }}>
      <div className="sticky top-0 h-screen w-full overflow-hidden flex flex-col justify-center items-center">
        <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none" style={{ transform: `scale(${(1 + p * 0.22).toFixed(3)})`, transformOrigin: "center 38%" }}>
          <img src={window.__asset ? window.__asset("assets/photos/crowd-pink.jpg") : "assets/photos/crowd-pink.jpg"} alt="" className="hero-kenburns absolute inset-0 w-full h-full object-cover" style={{ filter: "brightness(.62) saturate(1.06) contrast(1.04)" }} />
        </div>
        {/* legibility scrims — darken on scroll so the next section reads cleanly */}
        <div className="absolute inset-0 z-[1] bg-black" style={{ opacity: 0.34 + p * 0.55 }}></div>
        <div className="absolute inset-0 z-[1]" style={{ background: "linear-gradient(to top,#0B0B0C 3%,rgba(11,11,12,.45) 30%,transparent 56%,rgba(11,11,12,.6) 100%)" }}></div>
        {/* coral brand glow */}
        <div className="absolute inset-0 z-[1] pointer-events-none"><div className="absolute top-[24%] left-1/2 -translate-x-1/2 w-[72vw] h-[72vw] max-w-3xl bg-coral/10 rounded-full blur-[170px]"></div></div>
        <div className="hidden md:flex absolute top-28 inset-x-0 z-10 container justify-between text-white/55 label" style={{ opacity: 1 - p * 1.6 }}>
          <span>Doral · Miami, FL</span><span>{t("Open Daily · From 12PM", "Abierto Cada Día · Desde 12PM")}</span>
        </div>
        <div className="relative z-10 container flex flex-col items-center text-center" style={{ transform: `translateY(${(-p * 90).toFixed(1)}px) scale(${(1 - p * 0.1).toFixed(3)})`, opacity: Math.max(0, 1 - p * 1.5) }}>
          {lunchBanner}
          {eyebrow}
          <h1 className="reveal in text-[clamp(3rem,11vw,9rem)] font-black uppercase leading-[0.86] tracking-tighter drop-shadow-2xl">Pink Pony<br /><span className="shine">Club</span></h1>
          <p className="reveal in serif-it text-2xl md:text-4xl text-white/85 mt-6 mb-9">{t("An evening, elevated.", "Una noche, elevada.")}</p>
          {ctas}
        </div>
        {/* stat strip — fades IN as the guest scrolls through */}
        <div className="absolute inset-x-0 bottom-[16%] z-10 container flex justify-center gap-10 md:gap-16" style={{ opacity: Math.max(0, (p - 0.45) * 2.6), transform: `translateY(${((1 - Math.min(1, p * 1.6)) * 30).toFixed(1)}px)` }}>
          {stats.map(([l, v], i) => (
            <div key={i} className="text-center">
              <div className="serif text-4xl md:text-6xl text-gold-soft leading-none">{v}</div>
              <div className="label text-white/55 text-[10px] mt-2">{l}</div>
            </div>
          ))}
        </div>
        <a onClick={() => document.getElementById("marquee")?.scrollIntoView({ behavior: "smooth" })} className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 text-white/45 hover:text-gold transition-colors scroll-cue cursor-pointer" style={{ opacity: Math.max(0, 1 - p * 3) }}><Icon name="chevron-down" className="w-7 h-7" /></a>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ["BOTTLE SERVICE", "LIVE PERFORMANCES", "LIVE TIMBAL", "HOOKAH LOUNGE", "VIP SUITES", "LATIN NIGHTS", "RESIDENT DJS", "RESERVATIONS OPEN"];
  const row = (key) => (
    <div key={key} className="flex shrink-0 items-center">
      {items.map((it, i) => (
        <span key={i} className="flex items-center">
          <span className="px-7 text-lg font-bold uppercase tracking-[0.2em] text-white/70">{it}</span>
          <span className="text-coral">✦</span>
        </span>
      ))}
    </div>
  );
  return (
    <div id="marquee" className="relative border-y border-white/10 bg-ink py-5 overflow-hidden">
      <div className="marquee">{row("a")}{row("b")}</div>
    </div>
  );
}

function NightsAccordion() {
  const t = useT(); const { lang } = useLang();
  const N = window.PP.NIGHTS;
  const [open, setOpen] = useState(5);
  return (
    <div className="border-t border-white/10">
      {N.map((n, i) => {
        const isOpen = open === i;
        return (
          <div key={i} className="border-b border-white/10 reveal" data-d={(i % 3) + 1}>
            <button onClick={() => setOpen(isOpen ? -1 : i)} className="w-full flex items-center gap-5 py-6 text-left group">
              <span className="w-14 shrink-0 label text-gold-soft/70 text-[11px]">{L(n.day, lang)}</span>
              <span className={"flex-1 text-2xl md:text-4xl font-bold uppercase tracking-tight transition-colors " + (isOpen ? "text-white" : "text-white/55 group-hover:text-white/80")}>{n.name}</span>
              <span className="hidden md:block label text-white/40 text-[11px]">{n.time}</span>
              <Icon name={isOpen ? "minus" : "plus"} className="w-5 h-5 text-coral shrink-0" />
            </button>
            <div className="overflow-hidden transition-all duration-500" style={{ maxHeight: isOpen ? 320 : 0 }}>
              <div className="pb-7 pl-0 md:pl-[76px] grid md:grid-cols-2 gap-6 items-center">
                <div>
                  <p className="text-white/65 mb-4">{L(n.d, lang)}</p>
                  <div className="flex flex-wrap gap-2">
                    <Chip color="var(--c-gold)"><Icon name="disc-3" className="w-3 h-3" />{n.dj}</Chip>
                    <Chip color="var(--c-coral)"><Icon name="wine" className="w-3 h-3" />{t("Bottles", "Botellas")} {n.bottle}</Chip>
                    <Chip color="#5FBFA8"><Icon name="star" className="w-3 h-3" />{t("Table", "Mesa")} {n.table}</Chip>
                  </div>
                </div>
                <div className="relative h-36 rounded-2xl overflow-hidden hidden md:block">
                  <Photo src={window.PP.SRC(n.img, 700, 360)} alt={n.name} className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.8)" }} />
                  <div className="absolute inset-0 bg-gradient-to-r from-ink/60 to-transparent"></div>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function HomePage({ heroVariant, hookahVariant, go }) {
  const t = useT(); const { lang } = useLang();
  useReveal(heroVariant);

  return (
    <div>
      <HomeHero variant={heroVariant} go={go} />
      <Marquee />

      {/* FEATURED EVENTS — flyer coverflow */}
      <FeaturedFlyers go={go} />

      {/* NIGHTS */}
      <section className="py-20 md:py-28 bg-ink">
        <div className="container">
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
            <div>
              <Eyebrow num="03">{t("The Weekly Lineup", "Programación Semanal")}</Eyebrow>
              <h2 className="reveal text-4xl md:text-6xl font-bold leading-none mt-5" data-d="1">{t(<>Seven Nights,<br />One <span className="serif-it font-normal text-coral">Address</span></>, <>Siete Noches,<br />Una <span className="serif-it font-normal text-coral">Dirección</span></>)}</h2>
            </div>
            <p className="reveal text-white/50 max-w-sm md:text-right" data-d="2">{t("A rotating cast of world-class DJs and signature programming, every night of the week.", "Un elenco rotativo de DJs de clase mundial y programación de firma, cada noche de la semana.")}</p>
          </div>
          <NightsAccordion />
        </div>
      </section>

      {/* UPCOMING SHOWS rail */}
      <ShowsRail go={go} />

      {/* SPORTS TEASER */}
      <section className="relative py-28 md:py-36 overflow-hidden">
        <div className="absolute inset-0"><Photo src="assets/photos/fire-show.jpg" alt="Sports" className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.32)" }} /><div className="absolute inset-0 bg-gradient-to-r from-ink via-ink/70 to-transparent"></div></div>
        <div className="container relative z-10 max-w-2xl">
          <Eyebrow num="04">{t("Watch Parties", "Watch Parties")}</Eyebrow>
          <h2 className="reveal text-4xl md:text-6xl font-black uppercase leading-[0.95] mt-5 mb-5" data-d="1">{t(<>Every Fight.<br />Every <span className="serif-it font-normal text-coral">Match</span>.</>, <>Cada Pelea.<br />Cada <span className="serif-it font-normal text-coral">Partido</span>.</>)}</h2>
          <p className="reveal text-white/65 text-lg mb-8" data-d="2">{t("Soccer, UFC, NBA and more on 20+ 4K screens — with ringside tables and bottle service.", "Fútbol, UFC, NBA y más en 20+ pantallas 4K — con mesas ringside y servicio de botellas.")}</p>
          <div className="reveal" data-d="3"><PrimaryBtn icon="arrow-right" onClick={() => go("sports")}>{t("See the schedule", "Ver la cartelera")}</PrimaryBtn></div>
        </div>
      </section>

      {/* HOOKAH (variant) */}
      <HookahSection variant={hookahVariant} />

      {/* MENU TEASER */}
      <section className="py-24 md:py-32 bg-ink">
        <div className="container">
          <div className="text-center mb-12">
            <Eyebrow num="06" className="justify-center">{t("Eat · Drink", "Comer · Beber")}</Eyebrow>
            <h2 className="reveal text-4xl md:text-6xl font-bold mt-5" data-d="1">{t(<>Taste the <span className="serif-it font-normal text-coral">Night</span></>, <>Saborea la <span className="serif-it font-normal text-coral">Noche</span></>)}</h2>
          </div>
          <div className="grid sm:grid-cols-3 gap-4 mb-9">
            {[["Pink Pony Martini", "assets/photos/cocktails.jpg", t("Signature cocktails", "Cócteles de firma")], ["Pink Pony Smash Burger", "assets/photos/burger-2.jpg", t("Chef's late-night kitchen", "Cocina nocturna de autor")], ["Bottle Service", "assets/photos/venue-bar.jpg", t("Premium bottle service", "Botellas premium")]].map(([nm, img, sub], i) => (
              <div key={i} className="gal-item reveal relative h-72 rounded-2xl overflow-hidden" data-d={(i % 3) + 1}>
                <Photo src={img} alt={nm} className="absolute inset-0 w-full h-full" />
                <div className="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
                <div className="absolute bottom-0 inset-x-0 p-5"><div className="font-bold text-lg">{nm}</div><div className="text-white/55 text-sm">{sub}</div></div>
              </div>
            ))}
          </div>
          <div className="text-center reveal"><GhostBtn icon="arrow-right" onClick={() => go("menu")}>{t("View full menu", "Ver menú completo")}</GhostBtn></div>
        </div>
      </section>

      {/* PHOTO GALLERY */}
      <PhotoGalleryHome />

      {/* VIP */}
      <section className="py-28 md:py-36 relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none"><div className="absolute top-1/4 left-0 w-72 h-72 bg-grape/10 rounded-full blur-[120px]"></div><div className="absolute bottom-1/4 right-0 w-[28rem] h-[28rem] bg-coral/5 rounded-full blur-[140px]"></div></div>
        <div className="container relative z-10 grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
          <div className="lg:col-span-5 reveal">
            <Eyebrow num="05">{t("VIP Services", "Servicios VIP")}</Eyebrow>
            <h2 className="text-4xl md:text-6xl font-black leading-[0.95] mt-5 mb-7"><span className="text-white">{t("Exclusive", "Acceso")}</span><br /><span className="serif-it font-normal bg-clip-text text-transparent bg-gradient-to-r from-coral to-grape">{t("Access", "Exclusivo")}</span></h2>
            <p className="text-white/60 text-lg leading-relaxed mb-8 border-l border-gold/40 pl-6">{t("Elevate your night with premium bottle service, a dedicated personal host, and the very best seats in the house.", "Eleva tu noche con servicio de botellas premium, un host personal dedicado y los mejores asientos de la casa.")}</p>
            <div className="space-y-3 mb-9">
              {[t("Premium Bottle Service", "Servicio de Botellas Premium"), t("Personal VIP Host", "Host VIP Personal"), t("Best Seats in the House", "Mejores Asientos")].map((x, i) => <div key={i} className="flex items-center gap-3 text-white/80"><Icon name="check" className="w-5 h-5 text-gold" />{x}</div>)}
            </div>
            <PrimaryBtn icon="arrow-right" onClick={() => go("reserve")}>{t("Explore VIP", "Explorar VIP")}</PrimaryBtn>
          </div>
          <div className="lg:col-span-7 relative h-[480px] lg:h-[620px] rounded-[28px] overflow-hidden group reveal" data-d="1">
            <Photo src="assets/photos/crowd-led.jpg" alt="VIP bottle service" className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.82) contrast(1.08)" }} />
            <div className="absolute inset-0 bg-gradient-to-t from-ink via-transparent to-black/30"></div>
            <div className="absolute top-7 right-7 z-20"><Chip color="var(--c-gold)" className="!bg-black/40 backdrop-blur-md"><Icon name="star" className="w-3 h-3" />{t("Premium Access", "Acceso Premium")}</Chip></div>
            <div className="absolute bottom-8 left-7 z-20 max-w-[290px] floaty-slow">
              <div className="bg-[#161616]/90 backdrop-blur-xl border-l-2 border-coral p-5 rounded-r-2xl shadow-2xl">
                <div className="flex items-center gap-3 mb-2"><div className="p-2 bg-coral/10 rounded-lg"><Icon name="wine" className="w-5 h-5 text-coral" /></div><div><h4 className="font-bold text-sm uppercase tracking-wide">{t("Bottle Service", "Servicio de Botellas")}</h4><p className="text-gold-soft text-xs font-bold">{t("From $350", "Desde $350")}</p></div></div>
                <p className="text-white/55 text-xs leading-relaxed">{t("Premium mixers, a dedicated server, and express entry for your group.", "Mezcladores premium, servidor dedicado y entrada exprés para tu grupo.")}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* GALLERY (replaced by PhotoGalleryHome above) — In The News */}
      <InTheNews />

      {/* ABOUT + ranking */}
      <AboutRanking go={go} />

      {/* FAQ */}
      <HomeFAQ />

      {/* MEMBERSHIP TEASER */}
      <section className="py-28 md:py-36 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-coral via-[#d6554a] to-grape opacity-95"></div>
        <div className="absolute inset-0 opacity-[0.06]" style={{ backgroundImage: "radial-gradient(circle at 1px 1px,#fff 1px,transparent 0)", backgroundSize: "26px 26px" }}></div>
        <div className="container relative z-10 text-center reveal">
          <div className="label text-white/70 mb-6">{t("Membership", "Membresía")}</div>
          <h2 className="text-4xl md:text-7xl font-black leading-[0.95] mb-6">{t(<>Belong to the<br /><span className="serif-it font-normal">Inner Circle</span></>, <>Pertenece al<br /><span className="serif-it font-normal">Círculo Íntimo</span></>)}</h2>
          <p className="text-white/85 text-lg max-w-xl mx-auto mb-10">{t("Skip the line, earn rewards and unlock exclusive content. Three tiers, one unforgettable club.", "Salta la fila, gana recompensas y desbloquea contenido exclusivo. Tres niveles, un club inolvidable.")}</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button onClick={() => go("membership")} className="gbtn bg-white text-coral px-10 py-4 rounded-full text-[13px] font-bold uppercase tracking-[0.16em] hover:scale-105 transition-all shadow-2xl">{t("See memberships", "Ver membresías")}</button>
            <button onClick={() => go("reserve")} className="border border-white/70 text-white px-10 py-4 rounded-full text-[13px] font-bold uppercase tracking-[0.16em] hover:bg-white hover:text-coral transition-all">{t("Reserve a table", "Reservar mesa")}</button>
          </div>
        </div>
      </section>

      {/* GET SOCIAL brand grid */}
      <BrandGrid />
    </div>
  );
}

Object.assign(window, { HomePage, NightsAccordion });