/* ============================================================
   HOME SECTIONS — E11EVEN-inspired, Pink Pony brand
   Featured flyer carousel · shows rail · video & photo galleries
   · in the news · faq · brand grid
   ============================================================ */

/* measure a node's width (for the coverflow math) */
function useWidth() {
  const ref = useRef(null);
  const [w, setW] = useState(0);
  useEffect(() => {
    if (!ref.current) return;
    const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));
    ro.observe(ref.current);
    setW(ref.current.getBoundingClientRect().width);
    return () => ro.disconnect();
  }, []);
  return [ref, w];
}

/* ---------- a single event poster (flyer) ---------- */
/* per-night flyer theme — accent + deep tone so each night reads as its own
   textured flyer while the web (not the image) supplies all the text/promo. */
const FLYER_THEMES = {
  "PINK MAKE ME DO IT":  { a: "#FF2E88", b: "#4A1030" },
  "DESACATO FRIDAYS":    { a: "#FF6B5B", b: "#4E1212" },
  "SEDUCTIVE THURSDAYS": { a: "#C026D3", b: "#2A1060" },
  "SAINT & SINNERS":     { a: "#F43F5E", b: "#180808" },
  "FUERA DE ÓRBITA":     { a: "#6D6BF2", b: "#0C1747" },
  "INDUSTRY MONDAYS":    { a: "#CBA35C", b: "#332512" },
  "CARIÑOSA TUESDAYS":   { a: "#FF3D6E", b: "#360A14" },
};
function flyerTheme(name) {
  const key = String(name || "").toUpperCase();
  for (const k in FLYER_THEMES) if (key.includes(k) || k.includes(key)) return FLYER_THEMES[k];
  return { a: "#FF6B5B", b: "#1A0A12" };
}

function FlyerPoster({ ev, active, onBuy, onReserve, compact }) {
  const t = useT(); const { lang } = useLang();
  const th = flyerTheme(ev.name);
  return (
    <div className={"relative w-full h-full rounded-2xl overflow-hidden border transition-all duration-500 " + (active ? "border-coral/60" : "border-white/10")}
      style={{ boxShadow: active ? "0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,107,91,.25)" : "0 12px 40px -12px rgba(0,0,0,.7)" }}>
      <Photo src={window.PP.SRC(ev.img, 720, 1180)} alt={ev.name} className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: active ? "brightness(.5) saturate(1.15)" : "brightness(.34) saturate(1.1)" }} />
      {/* themed color wash — tints the flyer + keeps the bottom legible */}
      <div className="absolute inset-0" style={{ background: `linear-gradient(165deg, ${th.a}40 0%, transparent 42%, ${th.b}F0 100%)` }}></div>
      {/* fine woven texture */}
      <div className="absolute inset-0 opacity-[.10] pointer-events-none" style={{ backgroundImage: "repeating-linear-gradient(45deg,#fff 0,#fff 1px,transparent 1px,transparent 7px)" }}></div>
      {/* top accent glow */}
      <div className="absolute -top-12 left-1/2 -translate-x-1/2 w-2/3 h-32 rounded-full pointer-events-none" style={{ background: th.a, filter: "blur(55px)", opacity: active ? 0.5 : 0.32 }}></div>
      {/* top wordmark */}
      <div className="absolute top-0 inset-x-0 pt-6 text-center">
        <div className="font-black uppercase tracking-[0.22em] text-white" style={{ fontSize: compact ? 15 : 20, fontFamily: "var(--font-headline, inherit)" }}>PINK PONY</div>
        <div className="label text-white/70 text-[8px] mt-0.5">MIAMI</div>
      </div>
      {/* date ribbon */}
      <div className="absolute top-[22%] inset-x-0 text-center">
        <span className="inline-block px-3 py-1 rounded-full text-white label text-[9px]" style={{ background: th.a }}>{L(ev.date, lang)}</span>
      </div>
      {/* name block */}
      <div className="absolute inset-x-0 bottom-0 p-5 text-center">
        {ev.kicker && <div className="label text-[9px] mb-1.5" style={{ color: th.a, filter: "brightness(1.45)" }}>{L(ev.kicker, lang)}</div>}
        <h3 className="font-black uppercase leading-[0.9] tracking-tight text-white drop-shadow-lg" style={{ fontSize: compact ? 22 : 30 }}>{ev.name}</h3>
        {ev.sub && <div className="text-white/70 text-xs mt-1.5">{L(ev.sub, lang)}</div>}
        {ev.hash && <div className="text-[10px] font-bold tracking-wider mt-2" style={{ color: th.a, filter: "brightness(1.35)" }}>{ev.hash}</div>}
        {active && !compact && (
          <div className="flex flex-col gap-2 mt-5">
            <button onClick={onBuy} className="gbtn w-full py-3 rounded-full text-white text-[11px] font-bold uppercase tracking-[0.16em] transition-all" style={{ background: th.a }}>{t("Reserve a Table", "Reservar Mesa")}</button>
            <button onClick={onReserve} className="gbtn w-full py-3 rounded-full bg-white/95 hover:bg-white text-black text-[11px] font-bold uppercase tracking-[0.16em] transition-all">{t("Guestlist", "Guestlist")}</button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- FEATURED coverflow carousel ---------- */
function FeaturedFlyers({ go }) {
  const t = useT(); const { lang } = useLang();
  const feat = window.PP.MATCHDAYS;
  const [i, setI] = useState(0);
  const [wrap, W] = useWidth();
  const card = Math.min(320, Math.max(200, W * 0.46));
  const gap = 24;
  const go2 = (d) => setI((p) => Math.max(0, Math.min(feat.length - 1, p + d)));
  const ev = feat[i];

  return (
    <section className="py-20 md:py-28 overflow-hidden">
      <div className="container">
        <div className="text-center mb-10">
          <Eyebrow num="01" className="justify-center">{t("This Week · Watch Parties", "Esta Semana · Watch Parties")}</Eyebrow>
          <h2 className="reveal text-4xl md:text-6xl font-black uppercase mt-5" data-d="1">{t(<>Featured <span className="serif-it font-normal text-coral">Events</span></>, <>Eventos <span className="serif-it font-normal text-coral">Destacados</span></>)}</h2>
        </div>
      </div>
      {/* coverflow of the real flyers — full image, nothing overlaid on top */}
      <div ref={wrap} className="relative" style={{ height: card * 1.34 + 20 }}>
        <div className="absolute top-1/2 left-1/2 flex items-center" style={{ gap, transform: `translate(${-(i * (card + gap) + card / 2)}px, -50%)`, transition: "transform .55s cubic-bezier(.4,0,.2,1)" }}>
          {feat.map((m, idx) => {
            const act = idx === i;
            return (
              <div key={idx} onClick={() => act ? go("reserve") : setI(idx)}
                className="shrink-0 cursor-pointer rounded-2xl overflow-hidden border transition-all duration-500"
                style={{ width: card, height: card * 1.34, borderColor: act ? "rgba(255,107,91,.6)" : "rgba(255,255,255,.1)", opacity: act ? 1 : 0.4, transform: `scale(${act ? 1 : 0.9})`, background: "#0B0B0C", boxShadow: act ? "0 30px 80px -20px rgba(0,0,0,.85)" : "0 12px 40px -12px rgba(0,0,0,.6)" }}>
                <img src={m.img} alt={L(m.alt, lang)} loading="lazy" className="w-full h-full object-contain" />
              </div>
            );
          })}
        </div>
        {/* arrows */}
        <button onClick={() => go2(-1)} disabled={i === 0} className="absolute left-3 md:left-8 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-black/55 backdrop-blur border border-white/20 flex items-center justify-center text-white hover:bg-coral hover:border-coral transition-all disabled:opacity-20"><Icon name="chevron-left" className="w-6 h-6" /></button>
        <button onClick={() => go2(1)} disabled={i === feat.length - 1} className="absolute right-3 md:right-8 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-black/55 backdrop-blur border border-white/20 flex items-center justify-center text-white hover:bg-coral hover:border-coral transition-all disabled:opacity-20"><Icon name="chevron-right" className="w-6 h-6" /></button>
      </div>
      {/* caption sits BELOW the flyer — never on top of the artwork */}
      <div className="text-center mt-7">
        <div className="label text-coral text-[11px]">{L(ev.date, lang)} · {ev.time}</div>
        <div className="font-black uppercase text-xl md:text-2xl mt-1.5">{ev.match}</div>
      </div>
      <div className="flex justify-center gap-2 mt-6">
        {feat.map((_, idx) => <button key={idx} onClick={() => setI(idx)} className="h-1.5 rounded-full transition-all" style={{ width: idx === i ? 28 : 8, background: idx === i ? "var(--c-coral)" : "rgba(255,255,255,.25)" }}></button>)}
      </div>
      <div className="text-center mt-8"><PrimaryBtn icon="arrow-right" onClick={() => go("reserve")}>{t("Reserve Your Table", "Reserva tu Mesa")}</PrimaryBtn></div>
    </section>
  );
}

/* ---------- UPCOMING SHOWS rail ---------- */
function ShowsRail({ go }) {
  const t = useT(); const { lang } = useLang();
  const { SPECIAL_EVENTS, PERFORMANCES } = window.PP;
  const shows = [
    ...PERFORMANCES.map((p) => ({ ...p, kicker: p.role })),
    ...SPECIAL_EVENTS.map((e) => ({ ...e, kicker: { en: "Special Event", es: "Evento Especial" } })),
  ];
  const railRef = useRef(null);
  const scroll = (d) => railRef.current && railRef.current.scrollBy({ left: d * 280, behavior: "smooth" });
  return (
    <section className="py-20 md:py-24 bg-ink">
      <div className="container">
        <div className="flex items-end justify-between gap-4 mb-8">
          <div><Eyebrow num="02">{t("The Lineup", "La Cartelera")}</Eyebrow><h2 className="reveal text-3xl md:text-5xl font-black uppercase mt-4" data-d="1">{t("Upcoming Shows", "Próximos Shows")}</h2></div>
          <div className="hidden md:flex gap-2">
            <button onClick={() => scroll(-1)} className="w-11 h-11 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10"><Icon name="chevron-left" className="w-5 h-5" /></button>
            <button onClick={() => scroll(1)} className="w-11 h-11 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10"><Icon name="chevron-right" className="w-5 h-5" /></button>
          </div>
        </div>
        <div ref={railRef} className="flex gap-4 overflow-x-auto pb-4 -mx-1 px-1 snap-x" style={{ scrollbarWidth: "none" }}>
          {shows.map((s, i) => (
            <div key={i} className="shrink-0 w-[230px] snap-start group cursor-pointer" onClick={() => go("reserve")}>
              <div className="relative w-full rounded-2xl overflow-hidden border border-white/10" style={{ aspectRatio: "3/4.4" }}>
                <FlyerPoster ev={s} active={false} compact onBuy={() => go("reserve")} onReserve={() => go("reserve")} />
                <div className="absolute inset-0 bg-coral/0 group-hover:bg-coral/10 transition-colors"></div>
              </div>
              <div className="mt-3 px-1"><div className="font-bold text-sm leading-tight">{s.name}</div><div className="text-white/45 text-xs mt-0.5">{L(s.date, lang)}</div></div>
            </div>
          ))}
        </div>
        <div className="text-center mt-9"><GhostBtn icon="arrow-right" onClick={() => go("events")}>{t("View All Shows", "Ver Todos los Shows")}</GhostBtn></div>
      </div>
    </section>
  );
}

/* ---------- VIDEO GALLERY (YouTube · click-to-load for speed) ----------
   Content lives in PP.VIDEOS (see data.js). A tile with no YouTube id yet
   shows its poster as a branded "Coming soon" teaser — never a broken player. */
function VideoTile({ id, poster, label, title }) {
  const t = useT();
  const [play, setPlay] = useState(false);
  const hasVid = !!id;
  return (
    <div className="relative rounded-2xl overflow-hidden border border-white/10 bg-black group" style={{ aspectRatio: "16/9" }}>
      {play && hasVid ? (
        <iframe className="w-full h-full" style={{ border: 0 }} src={`https://www.youtube.com/embed/${id}?rel=0&modestbranding=1&autoplay=1`} title={title || "Pink Pony video"} allow="autoplay; encrypted-media; picture-in-picture" allowFullScreen></iframe>
      ) : (
        <button onClick={() => hasVid && setPlay(true)} className="absolute inset-0 w-full h-full text-left" aria-label={hasVid ? t("Play video", "Reproducir video") : (title || t("Coming soon", "Próximamente"))} style={{ cursor: hasVid ? "pointer" : "default" }}>
          <img src={window.__asset ? window.__asset(poster) : poster} alt="" loading="lazy" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" style={{ filter: "brightness(.58)" }} />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
          <div className="absolute inset-0 flex items-center justify-center">
            {hasVid
              ? <span className="w-16 h-16 rounded-full bg-coral/90 backdrop-blur flex items-center justify-center shadow-[0_0_30px_rgba(255,107,91,.5)] group-hover:scale-110 transition-transform"><Icon name="play" className="w-7 h-7 text-white" /></span>
              : <span className="px-4 py-1.5 rounded-full bg-black/55 backdrop-blur border border-white/20 label text-white/85 text-[10px]">{t("Coming soon", "Próximamente")}</span>}
          </div>
          {label && <span className="absolute top-4 left-4 label text-coral text-[10px]">{label}</span>}
          {title && <span className="absolute bottom-4 left-4 right-4 font-bold text-sm leading-tight drop-shadow">{title}</span>}
        </button>
      )}
    </div>
  );
}
function VideoGallery({ go }) {
  const t = useT(); const { lang } = useLang();
  const { VIDEOS, VIDEO_CATS } = window.PP;
  const cats = VIDEO_CATS.filter((c) => VIDEOS.some((v) => v.cat === c.id));
  const [tab, setTab] = useState(cats[0] ? cats[0].id : "latest");
  const vids = VIDEOS.filter((v) => v.cat === tab).slice(0, 4);
  return (
    <section className="py-20 md:py-28">
      <div className="container">
        <div className="mb-8"><Eyebrow num="03">{t("Watch", "Mira")}</Eyebrow><h2 className="reveal text-3xl md:text-5xl font-black uppercase mt-4" data-d="1">{t("Video Gallery", "Galería de Video")}</h2></div>
        <div className="reveal flex flex-wrap gap-2 mb-6" data-d="2">
          {cats.map((c) => <button key={c.id} onClick={() => setTab(c.id)} className={"px-5 py-2.5 rounded-full text-[11px] font-bold uppercase tracking-wider transition-all " + (tab === c.id ? "bg-coral text-white" : "bg-white/5 border border-white/12 text-white/60 hover:text-white")}>{L(c.label, lang)}</button>)}
        </div>
        <div key={tab} className="fade-view grid md:grid-cols-2 gap-4">
          {vids.map((v, i) => <VideoTile key={i} id={v.yt} poster={v.poster} label={L((VIDEO_CATS.find((c) => c.id === v.cat) || {}).label || {}, lang)} title={L(v.title, lang)} />)}
        </div>
        <div className="text-center mt-9"><GhostBtn icon="arrow-right" onClick={() => go("watch")}>{t("See All Videos", "Ver Todos los Videos")}</GhostBtn></div>
      </div>
    </section>
  );
}

/* ---------- VIDEOS PAGE ("watch" route) — full filterable reel ---------- */
function VideosPage({ go }) {
  const t = useT(); const { lang } = useLang();
  const { VIDEOS, VIDEO_CATS, YOUTUBE_CHANNEL } = window.PP;
  const [cat, setCat] = useState("all");
  const list = cat === "all" ? VIDEOS : VIDEOS.filter((v) => v.cat === cat);
  const cats = VIDEO_CATS.filter((c) => VIDEOS.some((v) => v.cat === c.id));
  useReveal(cat);
  return (
    <div className="pt-28 md:pt-32 pb-24">
      <div className="container">
        <div className="reveal flex flex-col md:flex-row md:items-end justify-between gap-5 mb-9">
          <div>
            <Eyebrow num="">{t("Watch", "Mira")}</Eyebrow>
            <h1 className="text-5xl md:text-7xl font-black uppercase leading-[0.9] mt-4">{t(<>The <span className="serif-it font-normal text-coral">Reel</span></>, <>El <span className="serif-it font-normal text-coral">Reel</span></>)}</h1>
            <p className="text-white/55 text-lg mt-3 max-w-xl">{t("Recaps, live performances and the energy of every night — straight from our channel.", "Resúmenes, shows en vivo y la energía de cada noche — directo de nuestro canal.")}</p>
          </div>
          <div className="flex shrink-0 items-center gap-3">
            {YOUTUBE_CHANNEL ? (
              <a href={YOUTUBE_CHANNEL} target="_blank" rel="noopener" className="gbtn inline-flex items-center gap-2 bg-coral hover:bg-coral-deep text-white px-7 py-3.5 rounded-full text-[12px] font-bold uppercase tracking-[0.16em] transition-all"><BrandIcon name="youtube" className="w-4 h-4" />{t("Subscribe on YouTube", "Suscríbete en YouTube")}</a>
            ) : null}
            <button onClick={() => window.PP.share(undefined, t("Watch Pink Pony Club", "Mira Pink Pony Club"))} className="inline-flex items-center gap-2 border border-white/20 text-white hover:bg-white/5 px-6 py-3.5 rounded-full text-[12px] font-bold uppercase tracking-[0.16em] transition-all"><Icon name="share-2" className="w-4 h-4" />{t("Share", "Compartir")}</button>
          </div>
        </div>

        <div className="reveal flex flex-wrap gap-2 mb-7" data-d="1">
          {[{ id: "all", label: { en: "All", es: "Todo" } }, ...cats].map((c) => (
            <button key={c.id} onClick={() => setCat(c.id)} className={"px-5 py-2.5 rounded-full text-[11px] font-bold uppercase tracking-wider transition-all " + (cat === c.id ? "bg-coral text-white" : "bg-white/5 border border-white/12 text-white/60 hover:text-white")}>{L(c.label, lang)}</button>
          ))}
        </div>

        {list.length ? (
          <div key={cat} className="fade-view grid sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5">
            {list.map((v, i) => <VideoTile key={i} id={v.yt} poster={v.poster} label={L((VIDEO_CATS.find((c) => c.id === v.cat) || {}).label || {}, lang)} title={L(v.title, lang)} />)}
          </div>
        ) : (
          <div className="rounded-2xl border border-dashed border-white/15 p-10 text-center text-white/50">{t("New videos dropping soon.", "Pronto subimos nuevos videos.")}</div>
        )}

        <p className="reveal text-center text-white/40 text-sm mt-10">{t("Follow us for daily clips and behind-the-scenes.", "Síguenos para clips diarios y detrás de cámaras.")}</p>
      </div>
    </div>
  );
}

/* ---------- PHOTO GALLERY (tabbed) ---------- */
function PhotoGalleryHome() {
  const t = useT();
  const TABS = [
    { id: "latest", label: t("Latest", "Lo Último"), pics: ["assets/photos/crowd-group.jpg", "assets/photos/live-artist.jpg", "assets/photos/performer-pink.jpg", "assets/photos/exterior-cars.jpg", "assets/photos/cocktails.jpg", "assets/photos/venue-bar.jpg"] },
    { id: "nights", label: t("Club Nights", "Noches de Club"), pics: ["assets/photos/live-artist.jpg", "assets/photos/crowd-group.jpg", "assets/photos/venue-bar.jpg", "assets/photos/performer-pink.jpg", "assets/photos/exterior-cars.jpg", "assets/photos/cocktails.jpg"] },
    { id: "food", label: t("Food & Drink", "Comida y Bebida"), pics: ["assets/photos/cocktails.jpg", "assets/photos/burger-1.jpg", "assets/photos/burger-2.jpg", "assets/photos/chicken-sando.jpg", "assets/photos/venue-bar.jpg", "assets/photos/crowd-group.jpg"] },
  ];
  const [tab, setTab] = useState("latest");
  const cur = TABS.find((x) => x.id === tab);
  return (
    <section className="py-20 md:py-28 bg-ink">
      <div className="container">
        <div className="mb-8"><Eyebrow num="04">{t("The Atmosphere", "El Ambiente")}</Eyebrow><h2 className="reveal text-3xl md:text-5xl font-black uppercase mt-4" data-d="1">{t("Photo Gallery", "Galería de Fotos")}</h2></div>
        <div className="reveal flex flex-wrap gap-2 mb-6" data-d="2">
          {TABS.map((tb) => <button key={tb.id} onClick={() => setTab(tb.id)} className={"px-5 py-2.5 rounded-full text-[11px] font-bold uppercase tracking-wider transition-all " + (tab === tb.id ? "bg-coral text-white" : "bg-white/5 border border-white/12 text-white/60 hover:text-white")}>{tb.label}</button>)}
        </div>
        <div key={tab} className="fade-view grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
          {cur.pics.map((p, i) => (
            <div key={i} className={"gal-item rounded-2xl overflow-hidden " + (i === 0 ? "col-span-2 row-span-2 h-[260px] md:h-[420px]" : "h-[125px] md:h-[202px]")}>
              <img src={p} className="w-full h-full object-cover" alt="Atmosphere" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- IN THE NEWS ---------- */
function InTheNews() {
  const t = useT(); const { lang } = useLang();
  const NEWS = [
    { date: { en: "JUN 2, 2026", es: "2 JUN, 2026" }, title: { en: "Pink Pony Club crowned Doral's #1 nightlife destination", es: "Pink Pony Club coronado el destino nocturno #1 de Doral" }, img: "assets/photos/crowd-group.jpg" },
    { date: { en: "MAY 18, 2026", es: "18 MAY, 2026" }, title: { en: "Inside Miami's most exclusive bottle-service experience", es: "Dentro de la experiencia de botellas más exclusiva de Miami" }, img: "assets/photos/venue-bar.jpg" },
    { date: { en: "MAY 5, 2026", es: "5 MAY, 2026" }, title: { en: "Live timbal meets the decks: inside Pink Pony's Latin nights", es: "El timbal en vivo se une a los platos: las noches latinas de Pink Pony" }, img: "assets/photos/live-artist.jpg" },
  ];
  return (
    <section className="py-20 md:py-28">
      <div className="container">
        <div className="mb-10"><Eyebrow num="05">{t("Press", "Prensa")}</Eyebrow><h2 className="reveal text-3xl md:text-5xl font-black uppercase mt-4" data-d="1">{t("In The News", "En las Noticias")}</h2></div>
        <div className="grid md:grid-cols-3 gap-5">
          {NEWS.map((n, i) => (
            <a key={i} href="#" onClick={(e) => e.preventDefault()} className="reveal group block rounded-2xl overflow-hidden border border-white/10 bg-card hover:border-coral/40 transition-all" data-d={(i % 3) + 1}>
              <div className="relative h-48 overflow-hidden"><Photo src={window.PP.SRC(n.img, 600, 360)} alt="" className="absolute inset-0 w-full h-full" imgClass="object-cover transition-transform duration-700 group-hover:scale-105" style={{ filter: "brightness(.8)" }} /></div>
              <div className="p-5">
                <div className="label text-gold-soft text-[10px] mb-2">{L(n.date, lang)}</div>
                <h3 className="font-bold text-lg leading-snug mb-4 text-balance">{L(n.title, lang)}</h3>
                <span className="label text-coral text-[11px] flex items-center gap-2 group-hover:gap-3 transition-all">{t("Read more", "Leer más")}<Icon name="arrow-right" className="w-3.5 h-3.5" /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- ABOUT + ranking ---------- */
function AboutRanking({ go }) {
  const t = useT();
  return (
    <section className="py-24 md:py-32 bg-ink text-center">
      <div className="container max-w-3xl">
        <Eyebrow num="06" className="justify-center">{t("About", "Acerca")}</Eyebrow>
        <h2 className="reveal text-4xl md:text-6xl font-black uppercase leading-[0.95] mt-6 mb-7" data-d="1">{t(<>Doral's Premier <span className="serif-it font-normal text-coral">Ultraclub</span></>, <>El Ultraclub <span className="serif-it font-normal text-coral">Premier</span> de Doral</>)}</h2>
        <p className="reveal text-coral font-bold uppercase tracking-wide text-sm mb-5" data-d="2">{t("#1 Gentlemen's Club in Doral · Top-Rated Nightlife in Miami", "Club de Caballeros #1 en Doral · Nightlife Mejor Valorado de Miami")}</p>
        <p className="reveal text-white/65 text-lg leading-relaxed mb-10" data-d="2">{t("Luxurious, electric and entirely unforgettable — Pink Pony Club is an entertainment venue like no other. A vibrant nightclub with top performers and DJs, a chef-driven kitchen, premium bottle service, a hookah lounge, private VIP rooms and five-star hospitality. There truly is nothing else like it.", "Lujoso, eléctrico y completamente inolvidable — Pink Pony Club es un venue de entretenimiento como ningún otro. Un nightclub vibrante con los mejores performers y DJs, una cocina de autor, servicio de botellas premium, hookah lounge, salas VIP privadas y hospitalidad cinco estrellas. No hay nada igual.")}</p>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-y-10 gap-x-6 mb-12">
          {[["500+", t("Guest Capacity", "Capacidad")], ["20+", t("4K Sports Screens", "Pantallas 4K")], ["7", t("Signature Nights", "Noches de Firma")], ["12PM", t("Open Daily · til 5AM", "Cada Día · hasta 5AM")]].map(([n, l], i) => (
            <div key={i} className="reveal text-center" data-d={(i % 3) + 1}><div className="serif text-5xl md:text-6xl text-gold-soft mb-1">{n}</div><div className="label text-white/55 text-[10px]">{l}</div></div>
          ))}
        </div>
        <div className="reveal flex flex-col sm:flex-row gap-4 justify-center" data-d="3"><PrimaryBtn icon="arrow-up-right" onClick={() => go("reserve")}>{t("Reserve a Table", "Reservar Mesa")}</PrimaryBtn><GhostBtn icon="ticket" onClick={() => go("events")}>{t("Buy Tickets", "Comprar Tickets")}</GhostBtn></div>
      </div>
    </section>
  );
}

/* ---------- FAQ accordion (home) ---------- */
function HomeFAQ() {
  const t = useT(); const { lang } = useLang();
  const { FAQ } = window.PP;
  const [open, setOpen] = useState(0);
  return (
    <section className="py-20 md:py-28">
      <div className="container max-w-3xl">
        <div className="text-center mb-10"><Eyebrow num="07" className="justify-center">{t("Good to Know", "Buen Saber")}</Eyebrow><h2 className="reveal text-3xl md:text-5xl font-black uppercase mt-4" data-d="1">FAQ</h2></div>
        <div className="border-t border-white/10">
          {FAQ.map((f, 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-4 py-5 text-left group">
                  <span className={"flex-1 text-lg md:text-xl font-bold transition-colors " + (isOpen ? "text-white" : "text-white/70 group-hover:text-white")}>{L(f.q, lang)}</span>
                  <Icon name={isOpen ? "minus" : "plus"} className="w-5 h-5 text-coral shrink-0" />
                </button>
                <div className="overflow-hidden transition-all duration-400" style={{ maxHeight: isOpen ? 200 : 0 }}><p className="pb-6 text-white/60 leading-relaxed max-w-2xl">{L(f.a, lang)}</p></div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- GET SOCIAL brand grid ---------- */
function BrandGrid() {
  const t = useT();
  const TILES = [
    { name: "PINK PONY", sub: "MIAMI", img: "assets/photos/crowd-group.jpg", socials: ["facebook", "instagram", "twitter", "youtube"] },
    { name: "PONY", sub: "NIGHTS", img: "assets/photos/live-artist.jpg", socials: ["instagram", "twitter"] },
    { name: "PONY", sub: "BOTTLE CO.", img: "assets/photos/cocktails.jpg", socials: ["facebook", "instagram", "youtube"] },
    { name: "11 ANGELS", sub: "PERFORMERS", img: "assets/photos/performer-pink.jpg", socials: ["facebook", "instagram"] },
    { name: "PONY", sub: "EXPERIENCE", img: "assets/photos/exterior-cars.jpg", socials: ["instagram", "youtube"] },
    { name: "PONY", sub: "KITCHEN", img: "assets/photos/burger-2.jpg", socials: ["facebook", "instagram"] },
    { name: "PONY", sub: "SOUND", img: "assets/photos/venue-bar.jpg", socials: ["instagram", "youtube"] },
    { name: "THE", sub: "PONY CLUB", img: "assets/photos/performer-pink.jpg", socials: ["facebook", "instagram", "twitter"] },
  ];
  return (
    <section className="py-20 md:py-28 bg-ink">
      <div className="container">
        <div className="text-center mb-10"><Eyebrow num="08" className="justify-center">{t("@clubpinkpony", "@clubpinkpony")}</Eyebrow><h2 className="reveal text-3xl md:text-5xl font-black uppercase mt-4" data-d="1">{t("Get Social With Us", "Síguenos")}</h2></div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
          {TILES.map((b, i) => (
            <div key={i} className="reveal group relative rounded-2xl overflow-hidden aspect-square border border-white/10" data-d={(i % 3) + 1}>
              <Photo src={window.PP.SRC(b.img, 500, 500)} alt={b.name} className="absolute inset-0 w-full h-full" imgClass="object-cover transition-transform duration-700 group-hover:scale-105" style={{ filter: "brightness(.55)" }} />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
              <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-3">
                <div className="font-black uppercase tracking-[0.15em] text-white leading-none" style={{ fontSize: 18 }}>{b.name}</div>
                <div className="label text-white/70 text-[8px] mt-1">{b.sub}</div>
              </div>
              <div className="absolute bottom-0 inset-x-0 p-3 flex justify-center gap-3 opacity-80">
                {b.socials.map((s, j) => <BrandIcon key={j} name={s} className="w-4 h-4 text-white/90" />)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FeaturedFlyers, ShowsRail, VideoGallery, VideosPage, PhotoGalleryHome, InTheNews, AboutRanking, HomeFAQ, BrandGrid });