/* ============================================================
   MEMBERSHIP · APP SHOWCASE — luxury phone mockups + sticky scroll
   PhoneFrame, per-feature app screens, StickyAppShowcase, TransportFeature
   ============================================================ */

/* ---------- device frame ---------- */
function PhoneFrame({ children, small }) {
  const w = small ? 256 : 300;
  return (
    <div className="relative mx-auto floaty-slow" style={{ width: w }}>
      <div className="relative rounded-[2.7rem] border border-white/15 bg-[#070708] p-2.5"
        style={{ boxShadow: "0 50px 120px -30px rgba(255,107,91,.45), 0 0 0 1px rgba(255,255,255,.05) inset" }}>
        {/* notch */}
        <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-24 h-6 bg-[#070708] rounded-b-2xl z-20"></div>
        {/* side buttons */}
        <div className="absolute -left-[3px] top-24 w-[3px] h-10 rounded-l bg-white/10"></div>
        <div className="absolute -left-[3px] top-36 w-[3px] h-14 rounded-l bg-white/10"></div>
        <div className="absolute -right-[3px] top-28 w-[3px] h-16 rounded-r bg-white/10"></div>
        <div className="relative rounded-[2.15rem] overflow-hidden bg-ink" style={{ aspectRatio: "9 / 19.3" }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function ScreenShell({ children, dark }) {
  return (
    <div className="absolute inset-0 flex flex-col text-white" style={{ background: dark || "#0B0B0C" }}>
      <div className="flex items-center justify-between px-6 pt-3 pb-1 shrink-0">
        <span className="text-[10px] font-semibold tracking-wide">1:24</span>
        <div className="flex items-center gap-1.5">
          <Icon name="signal" className="w-3 h-3 text-white/80" />
          <Icon name="wifi" className="w-3 h-3 text-white/80" />
          <Icon name="battery-full" className="w-4 h-4 text-white/80" />
        </div>
      </div>
      <div className="flex-1 min-h-0 relative">{children}</div>
    </div>
  );
}
function AppHeader({ title, sub, icon }) {
  return (
    <div className="px-5 pt-2 pb-3">
      <div className="flex items-center gap-2 mb-1">
        {icon && <Icon name={icon} className="w-3.5 h-3.5 text-coral" />}
        <span className="label text-coral text-[8px]">{sub}</span>
      </div>
      <div className="text-[19px] font-black uppercase leading-none tracking-tight">{title}</div>
    </div>
  );
}
function PhoneCTA({ children, light }) {
  return (
    <div className={"mx-4 mb-4 rounded-2xl py-3 text-center text-[11px] font-bold uppercase tracking-[0.14em] " + (light ? "bg-white text-black" : "bg-coral text-white")}
      style={!light ? { boxShadow: "0 10px 30px -8px rgba(255,107,91,.6)" } : {}}>{children}</div>
  );
}

/* ============================================================
   SCREENS
   ============================================================ */

/* —— Reserva directa: floor plan picker —— */
function ScreenReserve() {
  const t = useT();
  const tables = [
    { id: "V1", x: 22, y: 26, sel: true }, { id: "V2", x: 50, y: 20 }, { id: "V3", x: 78, y: 26 },
    { id: "22", x: 30, y: 52 }, { id: "30", x: 58, y: 50 }, { id: "41", x: 82, y: 56 },
    { id: "25", x: 24, y: 76 }, { id: "33", x: 52, y: 78 }, { id: "07", x: 80, y: 80 },
  ];
  return (
    <ScreenShell>
      <AppHeader sub={t("Direct reservation", "Reserva directa")} icon="calendar-check" title={t("Pick your table", "Elige tu mesa")} />
      <div className="px-4">
        <div className="relative rounded-2xl border border-white/10 overflow-hidden" style={{ height: 188, background: "repeating-linear-gradient(0deg,#101013,#101013 1px,transparent 1px,transparent 22px),repeating-linear-gradient(90deg,#101013,#101013 1px,transparent 1px,transparent 22px),#0a0a0c" }}>
          <div className="absolute left-1/2 -translate-x-1/2 top-0 px-3 py-0.5 rounded-b-lg bg-coral/25 border-x border-b border-coral/40 text-coral text-[7px] font-bold uppercase tracking-[0.2em]">{t("Stage", "Tarima")}</div>
          {tables.map((tb) => (
            <div key={tb.id} className="absolute -translate-x-1/2 -translate-y-1/2 flex items-center justify-center text-[9px] font-black"
              style={{ left: tb.x + "%", top: tb.y + "%", width: tb.sel ? 30 : 24, height: tb.sel ? 30 : 24, borderRadius: tb.id[0] === "V" ? 8 : 999,
                border: "2px solid " + (tb.sel ? "#FF6B5B" : "#5FBFA8"), background: tb.sel ? "#FF6B5B33" : "transparent", color: tb.sel ? "#FF6B5B" : "#5FBFA8",
                boxShadow: tb.sel ? "0 0 16px #FF6B5B88" : "none" }}>{tb.id}</div>
          ))}
        </div>
        <div className="flex items-center justify-between mt-3 mb-3 rounded-xl bg-white/[.04] border border-white/10 px-3 py-2.5">
          <div><div className="text-[12px] font-bold">VIP 1 · {t("Stage-side", "Junto a tarima")}</div><div className="text-white/45 text-[10px]">{t("Sat Jun 7 · Seats 8 · Min $1,500", "Sáb 7 Jun · 8 asientos · Mín $1,500")}</div></div>
          <Icon name="check-circle" className="w-5 h-5 text-coral" />
        </div>
      </div>
      <PhoneCTA>{t("Reserve — instant confirm", "Reservar — confirma al instante")}</PhoneCTA>
    </ScreenShell>
  );
}

/* —— Transporte privado: live chauffeur map —— */
function ScreenTransport() {
  const t = useT();
  return (
    <ScreenShell>
      <div className="absolute inset-0">
        {/* faux map */}
        <div className="absolute inset-0" style={{ background: "radial-gradient(120% 80% at 30% 20%, #16131a, #0a0a0c 70%)" }}></div>
        <svg className="absolute inset-0 w-full h-full opacity-50" preserveAspectRatio="none" viewBox="0 0 100 200">
          {[18, 40, 62, 84].map((x) => <line key={"v" + x} x1={x} y1="0" x2={x} y2="200" stroke="#ffffff10" strokeWidth="0.6" />)}
          {[30, 70, 110, 150].map((y) => <line key={"h" + y} x1="0" y1={y} x2="100" y2={y} stroke="#ffffff10" strokeWidth="0.6" />)}
          <path d="M14,170 L14,120 L52,120 L52,64 L86,64" fill="none" stroke="#FF6B5B" strokeWidth="2.4" strokeLinecap="round" strokeDasharray="0.1 5" style={{ filter: "drop-shadow(0 0 4px #FF6B5B)" }} />
          <circle cx="86" cy="64" r="4" fill="#FF6B5B" />
        </svg>
        {/* car pin */}
        <div className="absolute" style={{ left: "14%", top: "85%", transform: "translate(-50%,-50%)" }}>
          <div className="w-8 h-8 rounded-full bg-coral flex items-center justify-center" style={{ boxShadow: "0 0 22px #FF6B5Bcc" }}><Icon name="car-front" className="w-4.5 h-4.5 text-white" style={{ width: 18, height: 18 }} /></div>
        </div>
        <div className="absolute" style={{ left: "86%", top: "32%", transform: "translate(-50%,-50%)" }}>
          <Icon name="map-pin" className="w-6 h-6 text-white" />
        </div>
        {/* status header */}
        <div className="absolute top-2 inset-x-3">
          <div className="rounded-2xl bg-black/55 backdrop-blur-md border border-white/12 px-4 py-2.5 flex items-center gap-3">
            <div className="w-9 h-9 rounded-full bg-gradient-to-br from-coral to-grape flex items-center justify-center text-[11px] font-black shrink-0">PP</div>
            <div className="flex-1 min-w-0"><div className="text-[12px] font-bold leading-tight">{t("Your chauffeur · 6 min", "Tu chofer · 6 min")}</div><div className="text-white/55 text-[10px]">{t("Black Escalade · Marcus", "Escalade Negra · Marcus")}</div></div>
            <span className="w-2 h-2 rounded-full bg-green-400 pulse-dot"></span>
          </div>
        </div>
        {/* bottom card */}
        <div className="absolute bottom-0 inset-x-0 rounded-t-3xl bg-[#0d0d10] border-t border-white/10 p-4">
          <div className="flex items-center gap-2 mb-2.5"><Icon name="sparkles" className="w-3.5 h-3.5 text-gold-soft" /><span className="label text-gold-soft text-[8px]">{t("Included with direct booking", "Incluido en reserva directa")}</span></div>
          <div className="flex items-start gap-2.5 mb-1.5"><Icon name="map-pin" className="w-4 h-4 text-coral mt-0.5 shrink-0" /><div><div className="text-[11px] font-bold">{t("Pickup", "Recogida")}</div><div className="text-white/50 text-[10px]">1450 Brickell Ave, Miami</div></div></div>
          <div className="flex items-start gap-2.5"><Icon name="flag" className="w-4 h-4 text-white/60 mt-0.5 shrink-0" /><div><div className="text-[11px] font-bold">Pink Pony Club · Doral</div><div className="text-white/50 text-[10px]">7971 NW 33rd St</div></div></div>
        </div>
      </div>
    </ScreenShell>
  );
}

/* —— PonyMatch: swipe card —— */
function ScreenMatch() {
  const t = useT();
  return (
    <ScreenShell>
      <AppHeader sub="PonyMatch" icon="flame" title={t("Meet tonight", "Conoce esta noche")} />
      <div className="px-4 relative" style={{ height: 250 }}>
        <div className="absolute inset-x-6 top-2 bottom-2 rounded-3xl bg-white/5 border border-white/10 rotate-[5deg]"></div>
        <div className="absolute inset-x-5 top-1 bottom-3 rounded-3xl bg-white/[.07] border border-white/10 -rotate-[3deg]"></div>
        <div className="absolute inset-x-4 top-0 bottom-4 rounded-3xl overflow-hidden border border-white/15">
          <Photo src="assets/photos/crowd-pink.jpg" alt="" className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.8)" }} />
          <div className="absolute inset-0" style={{ background: "linear-gradient(to top, rgba(0,0,0,.85), transparent 55%)" }}></div>
          <div className="absolute top-3 right-3"><Chip color="#5FBFA8">{t("Verified", "Verificado")}</Chip></div>
          <div className="absolute bottom-3 inset-x-3"><div className="text-[17px] font-black uppercase leading-none">Sofía, 26</div><div className="text-white/70 text-[10px] mt-1 flex items-center gap-1.5"><Icon name="map-pin" className="w-3 h-3" />{t("Here at 11 PM · VIP 1", "Aquí a las 11 PM · VIP 1")}</div></div>
        </div>
      </div>
      <div className="flex items-center justify-center gap-5 mt-2">
        <div className="w-11 h-11 rounded-full border border-white/20 flex items-center justify-center"><Icon name="x" className="w-5 h-5 text-white/70" /></div>
        <div className="w-13 h-13 rounded-full bg-coral flex items-center justify-center" style={{ width: 52, height: 52, boxShadow: "0 0 26px #FF6B5B99" }}><Icon name="heart" className="w-6 h-6 text-white" /></div>
        <div className="w-11 h-11 rounded-full border border-white/20 flex items-center justify-center"><Icon name="star" className="w-5 h-5 text-gold-soft" /></div>
      </div>
    </ScreenShell>
  );
}

/* —— Free tickets / drops —— */
function ScreenDrops() {
  const t = useT();
  const drops = [
    { ic: "ticket", c: "#5FBFA8", title: t("Guestlist · before 11PM", "Guestlist · antes 11PM"), tag: t("FREE", "GRATIS"), n: "x2" },
    { ic: "wine", c: "#CBA35C", title: t("Welcome bottle credit", "Crédito de botella"), tag: "$100", n: "" },
    { ic: "zap", c: "#FF6B5B", title: t("Skip-the-line pass", "Pase sin fila"), tag: t("FREE", "GRATIS"), n: "x4" },
    { ic: "crown", c: "#9333EA", title: t("Skybox upgrade draw", "Sorteo upgrade Skybox"), tag: t("ENTER", "ENTRAR"), n: "" },
  ];
  return (
    <ScreenShell>
      <AppHeader sub={t("This week's drops", "Drops de la semana")} icon="gift" title={t("Free tickets", "Tickets gratis")} />
      <div className="px-4 space-y-2.5">
        {drops.map((d, i) => (
          <div key={i} className="flex items-center gap-3 rounded-2xl bg-white/[.04] border border-white/10 px-3 py-2.5">
            <div className="w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style={{ background: d.c + "1f", border: "1px solid " + d.c + "55" }}><Icon name={d.ic} className="w-4 h-4" style={{ color: d.c }} /></div>
            <div className="flex-1 min-w-0"><div className="text-[11px] font-bold truncate">{d.title}</div><div className="text-white/45 text-[9px]">{t("Resets Monday", "Reinicia el lunes")}</div></div>
            <div className="px-2.5 py-1 rounded-full text-[9px] font-black tracking-wider shrink-0" style={{ color: d.c, border: "1px solid " + d.c + "66" }}>{d.tag}{d.n && " " + d.n}</div>
          </div>
        ))}
      </div>
      <PhoneCTA light>{t("Claim all", "Reclamar todo")}</PhoneCTA>
    </ScreenShell>
  );
}

/* —— Wallet / bottle credit / loyalty —— */
function ScreenWallet() {
  const t = useT();
  return (
    <ScreenShell>
      <AppHeader sub={t("Your wallet", "Tu billetera")} icon="wallet" title={t("Tab & rewards", "Cuenta y premios")} />
      <div className="px-4">
        {/* mini member card */}
        <div className="relative rounded-2xl overflow-hidden p-4 border border-white/10 mb-3" style={{ background: "linear-gradient(135deg,#FF6B5Bcc,#5b1f33 55%,#0d0d0f)" }}>
          <div className="flex items-center justify-between mb-6"><div className="flex items-center gap-1.5"><Icon name="crown" className="w-3.5 h-3.5 text-white" /><span className="text-[13px] font-black uppercase tracking-wide">VIP</span></div><img src="assets/logo-white.png" alt="" className="h-4 object-contain opacity-90" /></div>
          <div className="font-mono text-[10px] tracking-[0.3em] text-white/85 mb-3">•••• 7 4 2 0</div>
          <div className="flex items-end justify-between"><div className="text-[12px] font-bold">Alex Rivera</div><div className="text-right"><div className="serif text-xl leading-none">6,840</div><div className="label text-white/60 text-[7px]">{t("points", "puntos")}</div></div></div>
        </div>
        <div className="grid grid-cols-2 gap-2.5">
          <div className="rounded-2xl bg-white/[.04] border border-white/10 p-3"><Icon name="wine" className="w-4 h-4 text-gold-soft mb-1.5" /><div className="serif text-xl">$100</div><div className="text-white/45 text-[9px]">{t("Bottle credit", "Crédito botella")}</div></div>
          <div className="rounded-2xl bg-white/[.04] border border-white/10 p-3"><Icon name="flame" className="w-4 h-4 text-coral mb-1.5" /><div className="serif text-xl">12</div><div className="text-white/45 text-[9px]">{t("Night streak", "Noches seguidas")}</div></div>
        </div>
      </div>
      <PhoneCTA>{t("Open tab tonight", "Abrir cuenta hoy")}</PhoneCTA>
    </ScreenShell>
  );
}

/* —— Concierge chat —— */
function ScreenConcierge() {
  const t = useT();
  return (
    <ScreenShell>
      <AppHeader sub={t("24/7 concierge", "Concierge 24/7")} icon="message-circle" title={t("Anything, anytime", "Lo que sea")} />
      <div className="px-4 space-y-2.5">
        <div className="max-w-[78%] ml-auto rounded-2xl rounded-br-sm bg-coral px-3 py-2 text-[11px] leading-snug">{t("Table for 6 Saturday + a bottle of Don Julio 1942 on ice 🥃", "Mesa para 6 el sábado + una botella de Don Julio 1942 en hielo")}</div>
        <div className="flex items-end gap-2">
          <div className="w-6 h-6 rounded-full bg-gradient-to-br from-coral to-grape flex items-center justify-center text-[8px] font-black shrink-0">PP</div>
          <div className="max-w-[78%] rounded-2xl rounded-bl-sm bg-white/[.06] border border-white/10 px-3 py-2 text-[11px] leading-snug text-white/85">{t("Done — VIP 3, 11 PM, your usual host Camila. 1942 chilling. Car at 10:15?", "Listo — VIP 3, 11 PM, tu host Camila. 1942 enfriándose. ¿Auto a las 10:15?")}</div>
        </div>
        <div className="max-w-[78%] ml-auto rounded-2xl rounded-br-sm bg-coral px-3 py-2 text-[11px] leading-snug">{t("Perfect. Send the car 🙏", "Perfecto. Manda el auto")}</div>
        <div className="flex items-center gap-1.5 pl-8"><span className="w-1.5 h-1.5 rounded-full bg-white/40 pulse-dot"></span><span className="w-1.5 h-1.5 rounded-full bg-white/40 pulse-dot" style={{ animationDelay: ".2s" }}></span><span className="w-1.5 h-1.5 rounded-full bg-white/40 pulse-dot" style={{ animationDelay: ".4s" }}></span></div>
      </div>
      <div className="mx-4 mt-3 rounded-full bg-white/[.05] border border-white/10 px-4 py-2.5 flex items-center justify-between"><span className="text-white/40 text-[10px]">{t("Message your concierge…", "Escribe a tu concierge…")}</span><Icon name="send" className="w-4 h-4 text-coral" /></div>
    </ScreenShell>
  );
}

const APP_SCREENS = { reserve: ScreenReserve, transport: ScreenTransport, match: ScreenMatch, drops: ScreenDrops, wallet: ScreenWallet, concierge: ScreenConcierge };
function ScreenSwitch({ name }) { const C = APP_SCREENS[name] || ScreenReserve; return <C />; }

Object.assign(window, { PhoneFrame, ScreenShell, AppHeader, ScreenSwitch, APP_SCREENS,
  ScreenReserve, ScreenTransport, ScreenMatch, ScreenDrops, ScreenWallet, ScreenConcierge });