/* ============================================================
   MEMBERSHIP — luxury long-scroll app showcase
   Hero · sticky phone showcase · private-transport band · tiers ·
   exclusive content · final CTA
   variant: "spotlight" | "cards"  (tier layout)
   ============================================================ */

/* ---------- HERO ---------- */
function MemHero({ go }) {
  const t = useT();
  return (
    <section className="relative min-h-[92vh] flex items-center overflow-hidden">
      <Photo src="assets/photos/crowd-led.jpg" alt="" className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.42)" }} />
      <div className="absolute inset-0" style={{ background: "linear-gradient(to top, #0B0B0C 4%, transparent 45%), radial-gradient(90% 70% at 70% 30%, rgba(255,46,136,.22), transparent 60%)" }}></div>
      <div className="container relative z-10 pt-28 pb-20">
        <div className="max-w-3xl">
          <div className="reveal label text-gold flex items-center gap-3"><span className="w-8 h-px bg-gold/60"></span>{t("The Pink Pony Club app", "La app de Pink Pony Club")}</div>
          <h1 className="reveal text-[3.4rem] sm:text-7xl md:text-[5.6rem] font-black uppercase leading-[0.88] mt-5 mb-6" data-d="1">
            {t(<>The whole night,<br /><span className="serif-it font-normal shine">in your pocket</span></>, <>Toda la noche,<br /><span className="serif-it font-normal shine">en tu bolsillo</span></>)}
          </h1>
          <p className="reveal text-white/70 text-lg md:text-xl max-w-xl leading-relaxed mb-9" data-d="2">
            {t("Reserve your table, send a private car, skip the line, claim free tickets and run your whole night — all from one membership.", "Reserva tu mesa, envía un auto privado, salta la fila, reclama tickets gratis y maneja toda tu noche — todo desde una sola membresía.")}
          </p>
          <div className="reveal flex flex-wrap items-center gap-4" data-d="3">
            <PrimaryBtn icon="crown" onClick={() => go("account")}>{t("Become a member", "Hazte miembro")}</PrimaryBtn>
            <GhostBtn icon="arrow-down" onClick={() => document.getElementById("app-showcase")?.scrollIntoView({ behavior: "smooth" })}>{t("See everything it does", "Mira todo lo que hace")}</GhostBtn>
          </div>
        </div>
      </div>
      <div className="absolute bottom-7 left-1/2 -translate-x-1/2 scroll-cue text-white/40"><Icon name="chevron-down" className="w-7 h-7" /></div>
    </section>
  );
}

/* ---------- STICKY APP SHOWCASE ---------- */
const MEM_FEATURES = (t) => [
  { screen: "reserve", num: "01", icon: "calendar-check", kicker: t("Direct reservation", "Reserva directa"),
    title: t(<>Book your table <span className="serif-it font-normal text-coral">directly</span></>, <>Reserva tu mesa <span className="serif-it font-normal text-coral">directo</span></>),
    copy: t("See the live floor plan, pick the exact table you want, and lock it in with instant confirmation — no calls, no promoters, no waiting.", "Mira el plano en vivo, elige la mesa exacta que quieres y confírmala al instante — sin llamadas, sin promotores, sin esperas."),
    points: [t("Live table availability", "Disponibilidad en vivo"), t("Choose stage-side, VIP or Skybox", "Elige junto a tarima, VIP o Skybox"), t("Instant digital confirmation", "Confirmación digital al instante")] },
  { screen: "transport", num: "02", icon: "car-front", kicker: t("Private transport", "Transporte privado"),
    title: t(<>A private car, <span className="serif-it font-normal text-coral">on us</span></>, <>Un auto privado, <span className="serif-it font-normal text-coral">de cortesía</span></>),
    copy: t("Book your table directly and a private chauffeur is included. Track your black car in real time, door to door — arrive like the headliner.", "Reserva tu mesa directo y un chofer privado va incluido. Sigue tu auto negro en tiempo real, puerta a puerta — llega como el artista principal."),
    points: [t("Included with direct table booking", "Incluido al reservar mesa directo"), t("Live driver tracking & ETA", "Seguimiento del chofer y ETA en vivo"), t("Door-to-door, both ways", "Puerta a puerta, ida y vuelta")] },
  { screen: "match", num: "03", icon: "flame", kicker: "PonyMatch",
    title: t(<>Meet the <span className="serif-it font-normal text-coral">crowd</span> tonight</>, <>Conoce la <span className="serif-it font-normal text-coral">gente</span> de hoy</>),
    copy: t("Swipe through verified members heading out the same night, match with your vibe and start a private chat before you even arrive.", "Desliza entre miembros verificados que salen la misma noche, haz match con tu vibra y empieza un chat privado antes de llegar."),
    points: [t("Verified 21+ members only", "Solo miembros verificados 21+"), t("Match with people at your event", "Match con gente de tu evento"), t("Private chat after a mutual like", "Chat privado tras un like mutuo")] },
  { screen: "drops", num: "04", icon: "gift", kicker: t("Free tickets", "Tickets gratis"),
    title: t(<>Free entries, <span className="serif-it font-normal text-coral">every week</span></>, <>Entradas gratis, <span className="serif-it font-normal text-coral">cada semana</span></>),
    copy: t("Claim free guestlist spots, skip-the-line passes, bottle credit and Skybox upgrades — fresh drops every Monday, first come first served.", "Reclama guestlist gratis, pases sin fila, crédito de botella y upgrades de Skybox — drops nuevos cada lunes, por orden de llegada."),
    points: [t("Free GA & ladies entries", "Entradas GA y damas gratis"), t("Skip-the-line passes for your crew", "Pases sin fila para tu grupo"), t("Bottle & Skybox upgrade draws", "Sorteos de botella y Skybox")] },
  { screen: "wallet", num: "05", icon: "wallet", kicker: t("Tab & rewards", "Cuenta y premios"),
    title: t(<>Your tab &amp; <span className="serif-it font-normal text-coral">points</span>, live</>, <>Tu cuenta y <span className="serif-it font-normal text-coral">puntos</span>, en vivo</>),
    copy: t("Open your tab from your phone, watch your bottle credit and loyalty points climb in real time, and unlock rewards as the nights stack up.", "Abre tu cuenta desde el teléfono, ve crecer tu crédito de botella y puntos de lealtad en tiempo real, y desbloquea premios mientras suman las noches."),
    points: [t("Monthly bottle credit", "Crédito de botella mensual"), t("1.5× loyalty points", "Puntos de lealtad 1.5×"), t("Rewards & free champagne unlocks", "Premios y champaña gratis")] },
  { screen: "concierge", num: "06", icon: "message-circle", kicker: t("24/7 concierge", "Concierge 24/7"),
    title: t(<>A concierge for <span className="serif-it font-normal text-coral">anything</span></>, <>Un concierge para <span className="serif-it font-normal text-coral">todo</span></>),
    copy: t("Message your dedicated host any time — tables, bottles, the car, a last-minute birthday — and it's handled before you walk in.", "Escribe a tu host dedicado cuando quieras — mesas, botellas, el auto, un cumpleaños de último minuto — y queda resuelto antes de que entres."),
    points: [t("Dedicated VIP host", "Host VIP dedicado"), t("Pre-arrival requests handled", "Pedidos resueltos antes de llegar"), t("Anything, anytime", "Lo que sea, cuando sea")] },
];

function DesktopFeature({ f, i, active, regRef }) {
  const on = active === i;
  return (
    <div ref={(el) => regRef(i, el)} className="min-h-[92vh] flex flex-col justify-center py-10">
      <div style={{ opacity: on ? 1 : 0.32, transition: "opacity .55s cubic-bezier(.16,1,.3,1)" }}>
        <div className="flex items-center gap-3 mb-5">
          <span className="serif text-3xl" style={{ color: on ? "var(--c-coral)" : "rgba(255,255,255,.4)", transition: "color .5s" }}>{f.num}</span>
          <span className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: on ? "rgba(255,107,91,.15)" : "rgba(255,255,255,.05)", border: "1px solid " + (on ? "rgba(255,107,91,.5)" : "rgba(255,255,255,.1)"), transition: "all .5s" }}><Icon name={f.icon} className="w-4.5 h-4.5" style={{ width: 18, height: 18, color: on ? "var(--c-coral)" : "rgba(255,255,255,.55)" }} /></span>
          <span className="label text-[10px]" style={{ color: on ? "var(--c-gold-soft)" : "rgba(255,255,255,.45)", transition: "color .5s" }}>{f.kicker}</span>
        </div>
        <h3 className="text-4xl md:text-5xl lg:text-[3.4rem] font-black uppercase leading-[0.95] mb-5">{f.title}</h3>
        <p className="text-white/65 text-lg leading-relaxed max-w-md mb-6">{f.copy}</p>
        <ul className="space-y-2.5">
          {f.points.map((p, k) => (
            <li key={k} className="flex items-center gap-3 text-[15px] text-white/80">
              <span className="w-5 h-5 rounded-full bg-coral/15 border border-coral/40 flex items-center justify-center shrink-0"><Icon name="check" className="w-3 h-3 text-coral" /></span>{p}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function MobileFeature({ f }) {
  return (
    <div className="reveal relative pt-14 first:pt-2">
      {/* big watermark number */}
      <div className="serif absolute -top-1 right-0 text-[5.5rem] leading-none font-bold pointer-events-none select-none" style={{ color: "rgba(255,255,255,.05)" }}>{f.num}</div>
      {/* phone with glow */}
      <div className="relative mb-9">
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[260px] h-[260px] rounded-full blur-[70px] pointer-events-none" style={{ background: "radial-gradient(circle, rgba(255,46,136,.4), transparent 65%)" }}></div>
        <div className="relative"><PhoneFrame small><ScreenSwitch name={f.screen} /></PhoneFrame></div>
      </div>
      {/* copy */}
      <div className="text-center max-w-sm mx-auto">
        <div className="flex items-center justify-center gap-2.5 mb-3">
          <span className="w-8 h-8 rounded-lg bg-coral/15 border border-coral/40 flex items-center justify-center"><Icon name={f.icon} className="w-4 h-4 text-coral" /></span>
          <span className="label text-gold-soft text-[10px]">{f.kicker}</span>
        </div>
        <h3 className="text-[2rem] font-black uppercase leading-[0.98] mb-3">{f.title}</h3>
        <p className="text-white/60 text-[15px] leading-relaxed mb-5">{f.copy}</p>
      </div>
      <ul className="max-w-xs mx-auto space-y-2.5">
        {f.points.map((p, k) => (
          <li key={k} className="flex items-center gap-3 text-[14px] text-white/80">
            <span className="w-5 h-5 rounded-full bg-coral/15 border border-coral/40 flex items-center justify-center shrink-0"><Icon name="check" className="w-3 h-3 text-coral" /></span>{p}
          </li>
        ))}
      </ul>
    </div>
  );
}

function StickyAppShowcase() {
  const t = useT();
  const features = MEM_FEATURES(t);
  const [active, setActive] = useState(0);
  const refs = useRef([]);
  const regRef = (i, el) => { refs.current[i] = el; };

  // deterministic sync: the feature whose center is nearest the viewport center wins
  useEffect(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const mid = window.innerHeight / 2;
        let best = 0, bestDist = Infinity;
        refs.current.forEach((el, i) => {
          if (!el) return;
          const r = el.getBoundingClientRect();
          const c = r.top + r.height / 2;
          const d = Math.abs(c - mid);
          if (d < bestDist) { bestDist = d; best = i; }
        });
        setActive((p) => (p === best ? p : best));
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    onScroll();
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, []);

  return (
    <section id="app-showcase" className="relative bg-ink border-t border-white/8 py-16 md:py-24">
      <div className="container">
        <div className="reveal max-w-2xl mb-6 md:mb-2">
          <Eyebrow num="">{t("Everything you can do", "Todo lo que puedes hacer")}</Eyebrow>
          <Heading className="mt-3">{t(<>One app. The <span className="serif-it font-normal text-coral">whole</span> club.</>, <>Una app. Todo el <span className="serif-it font-normal text-coral">club</span>.</>)}</Heading>
        </div>

        {/* ---------- DESKTOP: sticky phone synced to scroll ---------- */}
        <div className="hidden lg:grid lg:grid-cols-2 lg:gap-20">
          <div>
            <div className="sticky top-0 h-screen flex flex-col items-center justify-center gap-7">
              <div className="relative">
                <div className="absolute inset-0 -z-10 blur-[90px] opacity-60" style={{ background: "radial-gradient(circle, rgba(255,46,136,.5), transparent 65%)" }}></div>
                <PhoneFrame>
                  {features.map((f, i) => (
                    <div key={f.screen} className="absolute inset-0" style={{ opacity: active === i ? 1 : 0, transition: "opacity .5s ease", pointerEvents: active === i ? "auto" : "none" }}>
                      <ScreenSwitch name={f.screen} />
                    </div>
                  ))}
                </PhoneFrame>
              </div>
              {/* sync indicator dots */}
              <div className="flex items-center gap-2.5">
                {features.map((f, i) => (
                  <span key={i} className="rounded-full transition-all duration-500" style={{ width: active === i ? 26 : 7, height: 7, background: active === i ? "var(--c-coral)" : "rgba(255,255,255,.22)", boxShadow: active === i ? "0 0 12px var(--c-coral)" : "none" }}></span>
                ))}
              </div>
            </div>
          </div>
          <div>
            {features.map((f, i) => <DesktopFeature key={f.screen} f={f} i={i} active={active} regRef={regRef} />)}
          </div>
        </div>

        {/* ---------- MOBILE: polished stacked showcase ---------- */}
        <div className="lg:hidden mt-4 divide-y divide-white/8">
          {features.map((f) => <MobileFeature key={f.screen} f={f} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- PRIVATE TRANSPORT — cinematic band ---------- */
function TransportBand({ go }) {
  const t = useT();
  return (
    <section className="relative py-24 md:py-32 overflow-hidden border-t border-white/8">
      <Photo src="assets/photos/exterior-cars.jpg" alt="" className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.4)" }} />
      <div className="absolute inset-0" style={{ background: "linear-gradient(to right, #0B0B0C 8%, rgba(11,11,12,.6) 45%, transparent 80%)" }}></div>
      <div className="container relative z-10">
        <div className="max-w-xl">
          <div className="reveal flex items-center gap-2.5 mb-5"><Icon name="sparkles" className="w-4 h-4 text-gold-soft" /><span className="label text-gold-soft text-[11px]">{t("Signature perk", "Beneficio insignia")}</span></div>
          <h2 className="reveal text-4xl md:text-6xl font-black uppercase leading-[0.95] mb-5" data-d="1">{t(<>Reserve direct.<br /><span className="serif-it font-normal text-coral">The car is included.</span></>, <>Reserva directo.<br /><span className="serif-it font-normal text-coral">El auto va incluido.</span></>)}</h2>
          <p className="reveal text-white/70 text-lg leading-relaxed mb-8" data-d="2">{t("Every direct table reservation comes with a private chauffeur. A black car picks up your group, you track it live in the app, and it brings you home when the night ends.", "Cada reserva de mesa directa incluye un chofer privado. Un auto negro recoge a tu grupo, lo sigues en vivo desde la app, y te lleva a casa cuando termina la noche.")}</p>
          <div className="reveal flex flex-wrap gap-3 mb-9" data-d="3">
            {[["car-front", t("Private black car", "Auto negro privado")], ["navigation", t("Live tracking", "Seguimiento en vivo")], ["repeat", t("Round trip", "Ida y vuelta")]].map(([ic, l], i) => (
              <span key={i} className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/[.06] border border-white/12 text-sm text-white/85"><Icon name={ic} className="w-4 h-4 text-coral" />{l}</span>
            ))}
          </div>
          <div className="reveal" data-d="4"><PrimaryBtn icon="arrow-right" onClick={() => go("reserve")}>{t("Reserve & send the car", "Reserva y manda el auto")}</PrimaryBtn></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- TIER CARD (pricing) ---------- */
function TierCard({ tier, big, go }) {
  const t = useT(); const { lang } = useLang();
  const feat = tier.featured;
  return (
    <div className={"reveal relative rounded-3xl border p-7 md:p-8 flex flex-col transition-all duration-300 hover:-translate-y-1.5 " +
        (feat ? "bg-gradient-to-b from-coral/[.14] to-card" : "bg-card") + (big ? " md:scale-[1.04]" : "")}
      style={{ borderColor: feat ? "var(--c-coral)" : "rgba(255,255,255,.12)", boxShadow: feat ? "0 30px 80px rgba(255,107,91,.18)" : "none" }}>
      {feat && <div className="absolute -top-3 left-1/2 -translate-x-1/2"><Chip color="var(--c-coral)" className="!bg-coral !text-white !border-coral">{t("Most Popular", "Más Popular")}</Chip></div>}
      <div className="flex items-center gap-2.5 mb-1">
        <span className="w-2.5 h-2.5 rounded-full" style={{ background: tier.accent, boxShadow: `0 0 12px ${tier.accent}` }}></span>
        <h3 className="text-2xl font-black uppercase tracking-wide" style={{ color: tier.accent }}>{tier.name}</h3>
      </div>
      <p className="serif-it text-white/65 text-lg mb-5">{L(tier.tagline, lang)}</p>
      <div className="flex items-end gap-1 mb-6">
        <span className="serif text-5xl md:text-6xl text-white leading-none">${tier.price}</span>
        <span className="text-white/45 text-sm mb-1.5">{L(tier.period, lang)}</span>
      </div>
      <div className="h-px bg-white/10 mb-5"></div>
      <ul className="space-y-3 mb-7 flex-1">
        {tier.perks.map((p, i) => (
          <li key={i} className="flex items-start gap-3 text-sm text-white/80">
            <Icon name="check" className="w-4 h-4 mt-0.5 shrink-0" style={{ color: tier.accent }} /> {L(p, lang)}
          </li>
        ))}
      </ul>
      <button onClick={() => go("account")}
        className={"gbtn w-full py-3.5 rounded-full text-[12px] font-bold uppercase tracking-[0.16em] transition-all " +
          (feat ? "bg-coral hover:bg-coral-deep text-white" : "border border-white/25 text-white hover:bg-white hover:text-black")}>
        {t("Become a", "Hazte")} {tier.name}
      </button>
    </div>
  );
}

function TiersSection({ variant, go }) {
  const t = useT();
  const T = window.PP.TIERS;
  const ordered = variant === "spotlight" ? [T[0], T[1], T[2]] : T;
  return (
    <section className="py-20 md:py-28 border-t border-white/8">
      <div className="container">
        <div className="reveal max-w-2xl mb-12">
          <Eyebrow num="">{t("Membership", "Membresía")}</Eyebrow>
          <h2 className="text-5xl md:text-7xl font-black uppercase leading-[0.9] mt-4 mb-4">{t(<>Choose how you <span className="serif-it font-normal text-coral">belong</span></>, <>Elige cómo <span className="serif-it font-normal text-coral">perteneces</span></>)}</h2>
          <p className="text-white/60 text-lg">{t("Three tiers. Skip the line, send the car, earn rewards, and unlock content the public never sees.", "Tres niveles. Salta la fila, manda el auto, gana recompensas y desbloquea contenido que el público nunca ve.")}</p>
        </div>
        {variant === "spotlight" ? (
          <div className="grid lg:grid-cols-3 gap-6 items-center">
            <TierCard tier={ordered[0]} go={go} />
            <TierCard tier={ordered[1]} go={go} big />
            <TierCard tier={ordered[2]} go={go} />
          </div>
        ) : (
          <div className="grid md:grid-cols-3 gap-6 items-stretch">
            {ordered.map((tier) => <TierCard key={tier.id} tier={tier} go={go} />)}
          </div>
        )}
        <p className="reveal text-center text-white/40 text-sm mt-8">{t("Cancel anytime · 21+ · Memberships are non-transferable.", "Cancela cuando quieras · 21+ · Las membresías son intransferibles.")}</p>
      </div>
    </section>
  );
}

/* ---------- EXCLUSIVE CONTENT (members-only) ---------- */
function ExclusiveContent({ go }) {
  const t = useT(); const { lang } = useLang();
  const P = window.PP.PERFORMERS;
  const tierColor = { member: "#CBA35C", vip: "#FF6B5B", black: "#E9E4DA" };
  return (
    <section className="py-20 md:py-28 bg-ink border-t border-white/8">
      <div className="container">
        <div className="reveal flex flex-col md:flex-row md:items-end justify-between gap-5 mb-10">
          <div>
            <Eyebrow num="">{t("Members-only", "Solo miembros")}</Eyebrow>
            <Heading className="mt-3">{t(<>The <span className="serif-it font-normal text-coral">Inner Circle</span></>, <>El <span className="serif-it font-normal text-coral">Círculo Íntimo</span></>)}</Heading>
          </div>
          <p className="reveal text-white/55 max-w-sm md:text-right" data-d="1">{t("Exclusive performer profiles, behind-the-scenes galleries and early event drops — unlocked with your membership.", "Perfiles exclusivos de performers, galerías tras bambalinas y eventos anticipados — desbloqueados con tu membresía.")}</p>
        </div>
        <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
          {P.map((p, i) => {
            const locked = p.tier !== "member";
            return (
              <div key={p.name} className="reveal group relative rounded-2xl overflow-hidden aspect-[4/5] border border-white/10" data-d={(i % 3) + 1}>
                {p.img
                  ? <Photo src={p.img} alt={p.name} className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: locked ? "blur(14px) brightness(.5)" : "brightness(.78)" }} />
                  : <div className="ph-photo absolute inset-0" style={{ filter: locked ? "blur(14px) brightness(.5)" : "brightness(.7)", backgroundImage: `linear-gradient(135deg, ${tierColor[p.tier]}22, #141416)` }}></div>}
                <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-transparent to-transparent"></div>
                <div className="absolute top-3 right-3"><Chip color={tierColor[p.tier]}>{p.tier.toUpperCase()}</Chip></div>
                {locked && (
                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 text-center px-4">
                    <Icon name="lock" className="w-7 h-7" style={{ color: tierColor[p.tier] }} />
                    <span className="label text-white/70 text-[10px]">{t("Unlock with", "Desbloquea con")} {p.tier.toUpperCase()}</span>
                  </div>
                )}
                <div className="absolute inset-x-0 bottom-0 p-4">
                  <div className="text-xl font-black uppercase">{p.name}</div>
                  <div className="text-white/55 text-xs flex items-center justify-between">
                    <span>{L(p.tag, lang)}</span>
                    <span className="flex items-center gap-1"><Icon name="image" className="w-3 h-3" />{p.posts}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="reveal text-center mt-10">
          <PrimaryBtn icon="unlock" onClick={() => go("account")}>{t("Unlock the full library", "Desbloquea la biblioteca completa")}</PrimaryBtn>
        </div>
      </div>
    </section>
  );
}

/* ---------- FINAL CTA ---------- */
function MemFinalCTA({ go }) {
  const t = useT();
  return (
    <section className="relative py-24 md:py-32 overflow-hidden border-t border-white/8">
      <div className="absolute inset-0" style={{ background: "radial-gradient(70% 90% at 50% 110%, rgba(255,46,136,.2), transparent 60%)" }}></div>
      <div className="container relative z-10 text-center">
        <img src={window.__asset ? window.__asset("assets/logo-pink-trimmed.png") : "assets/logo-pink-trimmed.png"} alt="Pink Pony Club" className="reveal h-8 md:h-10 mx-auto mb-8 object-contain" />
        <h2 className="reveal text-4xl md:text-6xl font-black uppercase leading-[0.95] mb-5 max-w-3xl mx-auto" data-d="1">{t(<>Your night is <span className="serif-it font-normal text-coral">one tap</span> away</>, <>Tu noche está a <span className="serif-it font-normal text-coral">un toque</span></>)}</h2>
        <p className="reveal text-white/60 text-lg max-w-xl mx-auto mb-9" data-d="2">{t("Join the club, open the app, and let the whole night run itself.", "Únete al club, abre la app, y deja que toda la noche se maneje sola.")}</p>
        <div className="reveal flex flex-wrap items-center justify-center gap-4" data-d="3">
          <PrimaryBtn icon="crown" onClick={() => go("account")}>{t("Become a member", "Hazte miembro")}</PrimaryBtn>
          <GhostBtn icon="calendar-check" onClick={() => go("reserve")}>{t("Reserve a table", "Reservar mesa")}</GhostBtn>
        </div>
      </div>
    </section>
  );
}

/* ---------- PAGE ---------- */
function MembershipPage({ variant = "cards", go }) {
  useReveal(variant);
  return (
    <div>
      <MemHero go={go} />
      <StickyAppShowcase />
      <TransportBand go={go} />
      <TiersSection variant={variant} go={go} />
      <ExclusiveContent go={go} />
      <MemFinalCTA go={go} />
    </div>
  );
}

Object.assign(window, { MembershipPage, MemHero, StickyAppShowcase, TransportBand, TierCard, TiersSection, ExclusiveContent, MemFinalCTA });