/* ============================================================
   ACCOUNT — auth + member dashboard
   Mobile-first app feel · desktop dashboard · free vs member gating
   ============================================================ */

/* ---------- MEMBERS — portal opens soon (no demo access) ---------- */
function MembersComingSoon({ go }) {
  const t = useT();
  return (
    <div className="min-h-screen flex items-center justify-center px-6 pt-28 pb-20 relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-1/4 -left-20 w-96 h-96 bg-coral/10 rounded-full blur-[140px]"></div>
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-grape/10 rounded-full blur-[140px]"></div>
      </div>
      <div className="relative z-10 w-full max-w-md text-center">
        <img src={window.__asset ? window.__asset("assets/logo-pink-trimmed.png") : "assets/logo-pink-trimmed.png"} alt="Pink Pony Club" className="h-7 mx-auto mb-7 object-contain" />
        <div className="w-14 h-14 rounded-2xl bg-coral/15 border border-coral/50 flex items-center justify-center mx-auto mb-5"><Icon name="crown" className="w-6 h-6 text-coral" /></div>
        <h1 className="text-3xl md:text-4xl font-black uppercase mb-3">{t("Members portal", "Portal de miembros")}</h1>
        <p className="text-white/55 text-sm leading-relaxed mb-8">{t("We're putting the final touches on memberships — PonyMatch, free drops, guest-list invites and exclusive content. Join the waitlist and be first in.", "Estamos dando los últimos toques a las membresías — PonyMatch, drops gratis, invitaciones a guest list y contenido exclusivo. Únete a la lista de espera y sé el primero en entrar.")}</p>
        <div className="flex flex-col gap-3">
          <a href={window.PP.waLink(t("Hi Pink Pony — add me to the membership waitlist.", "Hola Pink Pony — agrégame a la lista de espera de membresías."))} target="_blank" rel="noopener" className="gbtn w-full py-3.5 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.16em] transition-all flex items-center justify-center gap-2"><Icon name="message-circle" className="w-4 h-4" />{t("Join the waitlist", "Únete a la lista")}</a>
          <button onClick={() => go("membership")} className="w-full py-3.5 rounded-full border border-white/15 text-white/80 text-[12px] font-bold uppercase tracking-[0.16em] hover:bg-white/5 transition-colors flex items-center justify-center gap-2"><Icon name="sparkles" className="w-4 h-4" />{t("See membership plans", "Ver planes de membresía")}</button>
        </div>
        <p className="text-white/30 text-xs mt-6">{t("21+ only. Reservations are open as always.", "Solo 21+. Las reservas siguen abiertas como siempre.")}</p>
      </div>
    </div>
  );
}

/* ---------- MEMBERSHIP CARD (animated) ---------- */
function MemberCard({ account, tier, go }) {
  const t = useT(); const { lang } = useLang();
  const isFree = account.tier === "free";
  const accent = isFree ? "#C9929A" : tier.accent;
  const grad = isFree
    ? "linear-gradient(135deg,#1c1c20,#101012)"
    : account.tier === "black"
      ? "linear-gradient(135deg,#2b2b2e,#0d0d0f)"
      : `linear-gradient(135deg,${accent}cc,#5b1f33 55%,#0d0d0f)`;
  return (
    <div className="relative rounded-3xl overflow-hidden p-6 md:p-7 border border-white/10" style={{ background: grad, boxShadow: `0 24px 60px -24px ${accent}66` }}>
      <div className="absolute -top-1/2 -left-1/4 w-[60%] h-[200%] rotate-12 pointer-events-none" style={{ background: "linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)", animation: "sweep 7s linear infinite" }}></div>
      <div className="relative z-10">
        <div className="flex items-start justify-between mb-8">
          <div>
            <div className="label text-white/60 text-[9px] mb-1.5">Pink Pony Club</div>
            <div className="flex items-center gap-2">
              <Icon name={isFree ? "user" : "crown"} className="w-4 h-4" style={{ color: isFree ? "#fff" : accent }} />
              <span className="text-2xl font-black uppercase tracking-wide">{isFree ? t("Free Guest", "Invitado") : tier.name}</span>
            </div>
          </div>
          <img src={window.__asset ? window.__asset("assets/logo-white.png") : "assets/logo-white.png"} alt="" className="h-7 object-contain opacity-90" />
        </div>
        <div className="font-mono text-sm tracking-[0.3em] text-white/85 mb-6">•••• •••• {isFree ? "0000" : "7 4 2 0"}</div>
        <div className="flex items-end justify-between">
          <div>
            <div className="text-lg font-bold leading-none">{account.name}</div>
            <div className="text-white/55 text-xs mt-1">{L(account.joined, lang)}</div>
          </div>
          {isFree
            ? <button onClick={() => go("membership")} className="px-4 py-2 rounded-full bg-white text-black text-[11px] font-bold uppercase tracking-wider hover:scale-105 transition-transform">{t("Upgrade", "Mejorar")}</button>
            : <div className="text-right"><div className="serif text-3xl leading-none" style={{ color: "#fff" }}>{account.points.toLocaleString()}</div><div className="label text-white/55 text-[9px] mt-0.5">{t("points", "puntos")}</div></div>}
        </div>
      </div>
    </div>
  );
}

/* ---------- OVERVIEW ---------- */
function Overview({ account, tier, go, setTab }) {
  const t = useT(); const { lang } = useLang();
  const isFree = account.tier === "free";
  const next = account.reservations.find((r) => r.status === "confirmed");
  const toNext = isFree ? 880 : 680;
  const pct = isFree ? 12 : 78;
  return (
    <div className="fade-view grid lg:grid-cols-2 gap-5">
      <div className="reveal"><MemberCard account={account} tier={tier} go={go} /></div>

      {/* loyalty ring */}
      <div className="reveal rounded-3xl border border-white/10 bg-card p-6 flex items-center gap-6" data-d="1">
        <div className="relative w-28 h-28 shrink-0">
          <svg viewBox="0 0 100 100" className="w-full h-full -rotate-90">
            <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(255,255,255,.08)" strokeWidth="8" />
            <circle cx="50" cy="50" r="42" fill="none" stroke="url(#gr)" strokeWidth="8" strokeLinecap="round" strokeDasharray={2 * Math.PI * 42} strokeDashoffset={2 * Math.PI * 42 * (1 - pct / 100)} style={{ transition: "stroke-dashoffset 1.1s ease" }} />
            <defs><linearGradient id="gr" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#FF6B5B" /><stop offset="1" stopColor="#CBA35C" /></linearGradient></defs>
          </svg>
          <div className="absolute inset-0 flex flex-col items-center justify-center"><div className="text-2xl font-black leading-none">{account.points.toLocaleString()}</div><div className="label text-white/45 text-[8px] mt-0.5">{t("points", "pts")}</div></div>
        </div>
        <div className="flex-1">
          <div className="label text-gold-soft text-[10px] mb-1">{t("Loyalty", "Lealtad")}</div>
          <div className="font-bold text-lg mb-1">{toNext} {t("pts to next reward", "pts al próximo premio")}</div>
          <p className="text-white/50 text-sm mb-3">{t("Free bottle of champagne unlocks at 5,500.", "Botella de champaña gratis a los 5,500.")}</p>
          <div className="flex items-center gap-2 text-xs text-coral"><Icon name="flame" className="w-4 h-4" />{account.streak} {t("night streak", "noches seguidas")}</div>
        </div>
      </div>

      {/* next reservation */}
      <div className="reveal rounded-3xl border border-white/10 bg-card p-6" data-d="2">
        <div className="label text-white/45 text-[10px] mb-3">{t("Your next night", "Tu próxima noche")}</div>
        {next ? (
          <div className="flex items-center gap-4">
            <div className="w-14 h-14 rounded-2xl bg-coral/15 border border-coral/40 flex items-center justify-center font-extrabold text-coral shrink-0">{next.id}</div>
            <div className="flex-1 min-w-0"><div className="font-bold uppercase tracking-wide truncate">{next.night}</div><div className="text-white/50 text-xs mt-0.5">{L(next.date, lang)} · {next.guests} {t("guests", "invitados")}</div></div>
            <button onClick={() => setTab("reservations")} className="text-white/55 hover:text-white"><Icon name="chevron-right" className="w-5 h-5" /></button>
          </div>
        ) : <p className="text-white/50 text-sm">{t("No upcoming reservations yet.", "Aún no tienes reservas.")}</p>}
        <button onClick={() => go("reserve")} className="w-full mt-4 py-3 rounded-full border border-dashed border-white/15 text-white/60 hover:text-white hover:border-white/30 transition-all flex items-center justify-center gap-2 text-sm font-semibold"><Icon name="plus" className="w-4 h-4" />{t("Reserve a table", "Reservar mesa")}</button>
      </div>

      {/* tonight / PonyMatch teaser */}
      <div className="reveal rounded-3xl overflow-hidden border border-white/10 relative group cursor-pointer" data-d="3" onClick={() => setTab("crowd")}>
        <img src={window.__asset ? window.__asset("assets/photos/crowd-group.jpg") : "assets/photos/crowd-group.jpg"} alt="" loading="lazy" className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" style={{ filter: "brightness(.4)" }} />
        <div className="absolute inset-0" style={{ background: "linear-gradient(120deg,rgba(255,46,136,.4),transparent 60%)" }}></div>
        <div className="relative z-10 p-6 h-full flex flex-col justify-end min-h-[180px]">
          <div className="flex items-center gap-2 mb-2"><Icon name="flame" className="w-4 h-4 text-coral" /><span className="label text-white/80 text-[10px]">PonyMatch</span>{isFree && <Icon name="lock" className="w-3 h-3 text-white/60" />}</div>
          <h3 className="text-2xl font-black uppercase leading-none mb-1">{t("Meet the crowd tonight", "Conoce la gente de hoy")}</h3>
          <p className="text-white/65 text-sm">{isFree ? t("Members-only — upgrade to swipe.", "Solo miembros — mejora para deslizar.") : t("3 people already liked you.", "3 personas ya te dieron like.")}</p>
        </div>
      </div>
    </div>
  );
}

/* ---------- DASHBOARD SHELL (public soon · used as AdminMaster preview) ---------- */
function Dashboard({ account, setAccount, go, preview }) {
  const t = useT(); const { lang } = useLang();
  const isFree = account.tier === "free";
  const tier = window.PP.TIERS.find((x) => x.id === account.tier) || { name: "FREE", accent: "#C9929A", tagline: { en: "Your first night in.", es: "Tu primera noche." }, perks: [], price: 0, period: { en: "", es: "" } };
  const [tab, setTab] = useState("overview");
  useReveal(tab);

  const NAV = [
    { id: "overview", label: t("Home", "Inicio"), icon: "layout-dashboard" },
    { id: "crowd", label: "PonyMatch", icon: "flame", lock: isFree },
    { id: "drops", label: t("Free Tickets", "Tickets Gratis"), icon: "ticket", lock: isFree },
    { id: "invite", label: t("Invite", "Invitar"), icon: "user-plus", lock: isFree },
    { id: "reservations", label: t("Reservations", "Reservas"), icon: "calendar-check" },
    { id: "exclusive", label: t("Exclusive", "Exclusivo"), icon: "circle-play", lock: isFree },
    { id: "membership", label: t("Membership", "Membresía"), icon: "crown" },
    { id: "wallet", label: t("Wallet", "Billetera"), icon: "wallet" },
  ];
  // mobile bottom bar shows 5 key items
  const BOTTOM = ["overview", "crowd", "drops", "reservations", "membership"];

  return (
    <div className={preview ? "pb-10" : "pt-24 md:pt-28 pb-28 lg:pb-20"}>
      <div className={preview ? "" : "container"}>
        {preview && (
          <div className="rounded-2xl border border-gold/25 bg-gold/5 p-4 mb-6 flex items-center gap-3"><Icon name="eye" className="w-5 h-5 text-gold-soft shrink-0" /><p className="text-white/65 text-sm">{t("AdminMaster preview — this is what members will see when the portal opens. Use the View switch to compare Free vs Member.", "Vista de AdminMaster — esto verán los miembros cuando abra el portal. Usa el switch Ver para comparar Free vs Miembro.")}</p></div>
        )}
        {/* header */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-7">
          <div className="flex items-center gap-4">
            <div className="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black shrink-0" style={{ background: tier.accent + "22", color: tier.accent, border: `1.5px solid ${tier.accent}` }}>{account.name[0]}</div>
            <div>
              <div className="label text-white/45 text-[10px] mb-1 flex items-center gap-2"><Icon name={isFree ? "user" : "crown"} className="w-3 h-3" style={{ color: tier.accent }} />{isFree ? t("Free Guest", "Invitado") : tier.name + " " + t("Member", "Miembro")}</div>
              <h1 className="text-2xl md:text-3xl font-black uppercase leading-none">{account.name}</h1>
            </div>
          </div>
          {preview && (
            <div className="flex items-center rounded-full border border-white/12 p-1 text-[10px] font-bold uppercase tracking-wider">
              <span className="px-2 text-white/35 hidden sm:inline">{t("View", "Ver")}</span>
              {[["free", t("Free", "Free")], ["vip", t("Member", "Miembro")]].map(([k, l]) => {
                const on = (k === "free") === isFree;
                return <button key={k} onClick={() => setAccount(k === "free" ? window.PP.ACCOUNT_FREE : window.PP.ACCOUNT)} className={"px-3 py-1.5 rounded-full transition-all " + (on ? "bg-coral text-white" : "text-white/55")}>{l}</button>;
              })}
            </div>
          )}
        </div>

        <div className="lg:grid lg:grid-cols-[210px_1fr] lg:gap-8">
          {/* desktop sidebar */}
          <aside className="hidden lg:block">
            <nav className="sticky top-28 space-y-1">
              {NAV.map((n) => (
                <button key={n.id} onClick={() => setTab(n.id)} className={"w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold transition-all " + (tab === n.id ? "bg-coral/15 text-white border border-coral/40" : "text-white/60 hover:text-white hover:bg-white/5 border border-transparent")}>
                  <Icon name={n.icon} className="w-4 h-4 shrink-0" style={tab === n.id ? { color: "var(--c-coral)" } : {}} />
                  <span className="flex-1 text-left">{n.label}</span>
                  {n.lock && <Icon name="lock" className="w-3.5 h-3.5 text-white/35" />}
                </button>
              ))}
            </nav>
          </aside>

          {/* content */}
          <div className="min-w-0">
            {tab === "overview" && <Overview account={account} tier={tier} go={go} setTab={setTab} />}

            {tab === "crowd" && (
              <LockGate locked={isFree} go={go} title={t("PonyMatch", "PonyMatch")} sub={t("Swipe through verified members heading out tonight and match with your vibe.", "Desliza entre miembros verificados que salen hoy y haz match con tu vibra.")} perks={[t("Match with the crowd at your event", "Match con la gente de tu evento"), t("Private chat after a mutual like", "Chat privado tras un like mutuo"), t("Verified 21+ members only", "Solo miembros verificados 21+")]}>
                <PonyMatch account={account} />
              </LockGate>
            )}

            {tab === "drops" && (
              <LockGate locked={isFree} go={go} title={t("Free Drops", "Drops Gratis")} sub={t("Claim free entries, bottles and skip-the-line passes — refreshed every week.", "Reclama entradas, botellas y pases sin fila — cada semana.")} perks={[t("Free GA & ladies entries", "Entradas GA y damas gratis"), t("Bottle & skybox drops", "Drops de botellas y skybox"), t("First access before they sell out", "Acceso antes de agotarse")]}>
                <DropsTab account={account} go={go} />
              </LockGate>
            )}

            {tab === "invite" && (
              <LockGate locked={isFree} go={go} title={t("Invite your crew", "Invita a tu gente")} sub={t("Get guest-list spots and earn points for every friend who joins.", "Consigue lugares en guest list y gana puntos por cada amigo.")} perks={[t("Monthly guest-list spots", "Lugares en guest list cada mes"), t("250 pts per friend who joins", "250 pts por cada amigo"), t("Skip-the-line for both of you", "Sin fila para ambos")]}>
                <InviteTab account={account} />
              </LockGate>
            )}

            {tab === "reservations" && (
              <div className="space-y-3 fade-view">
                {account.reservations.map((r, i) => (
                  <div key={i} className="flex items-center gap-4 p-4 rounded-2xl border border-white/10 bg-card">
                    <div className="w-12 h-12 rounded-xl bg-coral/15 border border-coral/40 flex items-center justify-center font-extrabold text-coral shrink-0">{r.id}</div>
                    <div className="flex-1 min-w-0">
                      <div className="font-bold uppercase tracking-wide text-sm truncate">{r.night}</div>
                      <div className="text-white/50 text-xs flex items-center gap-3 mt-0.5"><span>{L(r.date, lang)}</span><span className="flex items-center gap-1"><Icon name="users" className="w-3 h-3" />{r.guests}</span></div>
                    </div>
                    <Chip color={r.status === "confirmed" ? "#5FBFA8" : "#888"}>{r.status === "confirmed" ? t("Confirmed", "Confirmada") : t("Past", "Pasada")}</Chip>
                  </div>
                ))}
                <button onClick={() => go("reserve")} className="w-full py-4 rounded-2xl border border-dashed border-white/15 text-white/60 hover:text-white hover:border-white/30 transition-all flex items-center justify-center gap-2 text-sm font-semibold"><Icon name="plus" className="w-4 h-4" />{t("New reservation", "Nueva reserva")}</button>
              </div>
            )}

            {tab === "exclusive" && (
              <LockGate locked={isFree} go={go} title={t("Exclusive Content", "Contenido Exclusivo")} sub={t("Backstage clips, performer content and members-only events.", "Clips backstage, contenido de performers y eventos solo para miembros.")} perks={[t("Performer & backstage videos", "Videos de performers y backstage"), t("Members-only event invites", "Invitaciones a eventos privados"), t("New drops every week", "Nuevos drops cada semana")]}>
                <ExclusiveTab account={account} go={go} />
              </LockGate>
            )}

            {tab === "membership" && <MembershipTab account={account} tier={tier} go={go} />}

            {tab === "wallet" && (
              <div className="fade-view max-w-2xl space-y-3">
                <div className="rounded-2xl border border-coral/40 bg-coral/10 p-6 flex items-center justify-between mb-5">
                  <div><div className="label text-coral text-[10px] mb-1">{t("Bottle credit", "Crédito de botellas")}</div><div className="serif text-4xl text-white">${account.wallet}.00</div></div>
                  <button className="px-5 py-2.5 rounded-full bg-white text-black text-[11px] font-bold uppercase tracking-[0.14em]">{t("Add funds", "Recargar")}</button>
                </div>
                <div className="label text-white/45 text-[10px] mb-1">{t("Recent orders", "Pedidos recientes")}</div>
                {account.orders.length ? account.orders.map((o, i) => (
                  <div key={i} className="flex items-center justify-between p-4 rounded-xl border border-white/10 bg-card">
                    <div className="flex items-center gap-3"><Icon name="receipt" className="w-4 h-4 text-white/40" /><span className="text-sm">{o.item}</span></div>
                    <div className="text-right"><div className="font-bold">${o.amt}</div><div className="text-white/40 text-xs">{L(o.date, lang)}</div></div>
                  </div>
                )) : <p className="text-white/45 text-sm py-6 text-center">{t("No orders yet — your tab starts on your first night.", "Sin pedidos aún — tu cuenta empieza tu primera noche.")}</p>}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* mobile bottom nav (hidden in admin preview) */}
      {!preview && (
        <nav className="lg:hidden fixed bottom-0 inset-x-0 z-30 bg-ink/95 backdrop-blur-xl border-t border-white/10 flex" style={{ paddingBottom: "env(safe-area-inset-bottom)" }}>
          {BOTTOM.map((id) => {
            const n = NAV.find((x) => x.id === id);
            const on = tab === id;
            return (
              <button key={id} onClick={() => setTab(id)} className={"flex-1 flex flex-col items-center gap-1 py-2.5 transition-colors " + (on ? "text-coral" : "text-white/50")}>
                <span className="relative"><Icon name={n.icon} className="w-5 h-5" />{n.lock && <Icon name="lock" className="w-2.5 h-2.5 absolute -top-1 -right-1.5 text-white/45" />}</span>
                <span className="text-[9px] font-bold uppercase tracking-wide">{n.label}</span>
              </button>
            );
          })}
        </nav>
      )}
    </div>
  );
}

/* ---------- EXCLUSIVE CONTENT ---------- */
function ExclusiveTab({ account, go }) {
  const t = useT(); const { lang } = useLang();
  const order = { free: 0, member: 1, vip: 2, black: 3 };
  return (
    <div className="fade-view">
      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
        {window.PP.PERFORMERS.map((p, i) => {
          const tierColor = { member: "#CBA35C", vip: "#FF6B5B", black: "#E9E4DA" };
          const locked = (order[account.tier] ?? 0) < (order[p.tier] ?? 1);
          return (
            <div key={i} className="group relative rounded-2xl overflow-hidden aspect-[4/5] border border-white/10">
              {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(.8)" }} />
                : <div className="ph-photo absolute inset-0" style={{ filter: locked ? "blur(14px) brightness(.5)" : "brightness(.72)", backgroundImage: `linear-gradient(135deg, ${tierColor[p.tier]}22, #141416)` }}></div>}
              <div className="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
              {!locked && <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"><div className="w-12 h-12 rounded-full bg-white/20 backdrop-blur flex items-center justify-center"><Icon name="play" className="w-5 h-5 text-white" /></div></div>}
              {locked && <div className="absolute inset-0 flex flex-col items-center justify-center gap-2"><Icon name="lock" className="w-6 h-6" style={{ color: tierColor[p.tier] }} /><span className="label text-white/70 text-[9px]">{p.tier.toUpperCase()}</span></div>}
              <div className="absolute inset-x-0 bottom-0 p-4"><div className="font-black uppercase">{p.name}</div><div className="text-white/55 text-xs">{L(p.tag, lang)} · {p.posts}</div></div>
            </div>
          );
        })}
      </div>
      {account.tier !== "black" && <div className="text-center mt-7"><PrimaryBtn icon="unlock" onClick={() => go("membership")}>{t("Upgrade to unlock all", "Sube de nivel para desbloquear todo")}</PrimaryBtn></div>}
    </div>
  );
}

/* ---------- MEMBERSHIP TAB ---------- */
function MembershipTab({ account, tier, go }) {
  const t = useT(); const { lang } = useLang();
  const isFree = account.tier === "free";
  return (
    <div className="fade-view grid md:grid-cols-2 gap-5">
      <div className="rounded-2xl border p-7" style={{ borderColor: tier.accent + "55", background: tier.accent + "0d" }}>
        <div className="label text-[10px] mb-2" style={{ color: tier.accent }}>{t("Current plan", "Plan actual")}</div>
        <div className="text-4xl font-black uppercase mb-1" style={{ color: tier.accent }}>{isFree ? t("FREE", "GRATIS") : tier.name}</div>
        <p className="serif-it text-white/60 mb-5">{L(tier.tagline, lang)}</p>
        {isFree ? (
          <ul className="space-y-2.5 mb-6">{[t("Basic profile & reservations", "Perfil básico y reservas"), t("Browse events & menu", "Explora eventos y menú")].map((p, i) => <li key={i} className="flex items-start gap-2.5 text-sm text-white/80"><Icon name="check" className="w-4 h-4 mt-0.5 shrink-0" style={{ color: tier.accent }} />{p}</li>)}</ul>
        ) : (
          <ul className="space-y-2.5 mb-6">{tier.perks.map((p, i) => <li key={i} className="flex items-start gap-2.5 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>
        )}
        {!isFree && <div className="text-white/45 text-sm">{t("Renews", "Se renueva")} · Jun 1 · ${tier.price}{L(tier.period, lang)}</div>}
      </div>
      <div className="rounded-2xl border border-white/10 bg-card p-7 flex flex-col">
        <div className="label text-coral text-[10px] mb-2">{isFree ? t("Unlock everything", "Desbloquea todo") : t("Level up", "Sube de nivel")}</div>
        <div className="text-2xl font-black uppercase mb-4">{isFree ? t("Become a member", "Hazte miembro") : t("Go bigger", "Ve más allá")}</div>
        <ul className="space-y-2.5 mb-6">
          {[t("PonyMatch — meet the crowd", "PonyMatch — conoce la gente"), t("Claim free tickets & bottles", "Reclama tickets y botellas gratis"), t("Invite friends to guest list", "Invita amigos a guest list"), t("Exclusive performer content", "Contenido exclusivo de performers")].map((p, i) => (
            <li key={i} className="flex items-start gap-2.5 text-sm text-white/80"><Icon name="sparkles" className="w-4 h-4 mt-0.5 shrink-0 text-coral" />{p}</li>
          ))}
        </ul>
        <button onClick={() => go("membership")} className="mt-auto gbtn py-3.5 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.14em] transition-all flex items-center justify-center gap-2"><Icon name="crown" className="w-4 h-4" />{t("See plans — from $49/mo", "Ver planes — desde $49/mes")}</button>
      </div>
    </div>
  );
}

function AccountPage({ go }) {
  /* members portal not open yet — no demo access; AdminMaster previews it inside the admin portal */
  return <MembersComingSoon go={go} />;
}

Object.assign(window, { AccountPage, Dashboard, MembersComingSoon });