// ──────────────────────────────────────────────────────────────────
// Phase 2 screens — Events, Messaging, Social, Rankings, Gym HQ Owner.
// 16 screens per Takedown Platform inventory.
// ──────────────────────────────────────────────────────────────────

// ── EVT-1 · Events Browse ────────────────────────────────────────
const EventsBrowseScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Events" left={<I.ArrowLeft size={22} />} right={<I.Filter size={20} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "12px 20px 24px" }} className="no-scrollbar">
      <div style={{ display: "flex", gap: 6, marginBottom: 16, overflowX: "auto" }} className="no-scrollbar">
        {["UPCOMING", "REGISTERED", "RESULTS", "NATIONAL", "REGIONAL"].map((t, i) => <Tag key={t} active={i === 0}>{t}</Tag>)}
      </div>
      {[
        { d: "MAY 28", t: "Freestyle Trials 2026", loc: "Indianapolis · IN", div: "65 FS · Open", mod: "athlete" },
        { d: "JUN 04", t: "Folkstyle Showcase", loc: "Iowa City · IA", div: "U18 · Class A", mod: "dojo" },
        { d: "JUN 12", t: "NHSCA Duals", loc: "Virginia Beach · VA", div: "All weights", mod: "scout" },
        { d: "JUL 02", t: "RAF Atlanta Open", loc: "Atlanta · GA", div: "Pro / Am", mod: "store" },
      ].map((e, i) => (
        <div key={i} style={{ display: "flex", gap: 14, padding: "16px 0", borderBottom: "1px solid var(--border-subtle)", position: "relative" }}>
          <div style={{ position: "absolute", left: -14, top: 24, width: 3, height: 28, background: MODULE_TINTS[e.mod] }} />
          <div style={{ width: 56, flexShrink: 0 }}>
            <Overline style={{ color: "var(--accent)" }}>{e.d.split(" ")[0]}</Overline>
            <div className="t-h3" style={{ marginTop: 2, lineHeight: 1 }}>{e.d.split(" ")[1]}</div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="t-body-bold">{e.t}</div>
            <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>{e.loc}</Overline>
            <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 2 }}>{e.div}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ── EVT-2 · Event Detail ─────────────────────────────────────────
const EventDetailScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
      <div style={{ height: 200, position: "relative" }}>
        <PhotoPlaceholder kind="arena" style={{ position: "absolute", inset: 0 }} />
        <CornerMark corner="TL" /><CornerMark corner="BR" />
        <button style={{ position: "absolute", top: 56, left: 16, background: "rgba(0,0,0,0.4)", border: "none", color: "#fff", padding: 8, borderRadius: 99, cursor: "pointer" }}><I.ArrowLeft size={20} /></button>
        <div style={{ position: "absolute", bottom: 14, left: 20, color: "#fff" }}>
          <Overline style={{ color: "rgba(255,255,255,0.7)" }}>MAY 28 · INDIANAPOLIS</Overline>
          <div className="t-h3" style={{ marginTop: 4 }}>Freestyle Trials 2026</div>
        </div>
      </div>
      <div style={{ padding: 20 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
          {[
            { l: "DIVISION", v: "65 FS" },
            { l: "REGISTERED", v: "248" },
            { l: "PURSE", v: "$25K" },
          ].map((m) => (
            <div key={m.l} style={{ borderLeft: "2px solid var(--module-scout)", paddingLeft: 8 }}>
              <div className="t-h5">{m.v}</div>
              <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>{m.l}</Overline>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 24, padding: 14, border: "1px solid var(--border-default)", borderRadius: "var(--r-sm)" }}>
          <Overline>REGISTRATION</Overline>
          <div className="t-h5" style={{ marginTop: 4 }}>Closes May 21</div>
          <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 4 }}>Weigh-ins May 27 · 4–7pm at Indiana Convention Center</div>
        </div>
        <Overline style={{ color: "var(--accent)", marginTop: 24 }}>SCHEDULE</Overline>
        <div style={{ marginTop: 8 }}>
          {[
            { d: "FRI 5/27", t: "Check-in & weigh-in" },
            { d: "SAT 5/28", t: "Pool rounds · 8am" },
            { d: "SAT 5/28", t: "Finals · 5pm · Mat 1" },
          ].map((s, i) => (
            <div key={i} style={{ display: "flex", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)" }}>
              <Overline style={{ color: "var(--text-tertiary)", width: 90, flexShrink: 0 }}>{s.d}</Overline>
              <div style={{ flex: 1 }} className="t-body">{s.t}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
    <div style={{ padding: "12px 20px 32px", background: "var(--bg-primary)", borderTop: "1px solid var(--border-subtle)" }}>
      <Button label="REGISTER · $45" fullWidth size="large" tone="accent" rightIcon={<I.ArrowRight />} />
    </div>
  </div>
);

// ── MSG-1 · Messages Inbox with Chat ─────────────────────────────
const MessagesScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Messages" left={<I.ArrowLeft size={22} />} right={<I.Plus size={22} />} />
    <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
      {[
        { n: "Diego Marquez", h: "@diegomtz · scout", last: "Got a minute about Trials prep?", ts: "now", unread: 2, mod: "scout" },
        { n: "Coach Hayes", h: "ALL I SEE IS GOLD", last: "Film review tomorrow 6am.", ts: "2h", unread: 1, mod: "dojo" },
        { n: "Jordan Maeda", h: "@maedajm", last: "Drilling Thursday?", ts: "5h", mod: "athlete" },
        { n: "Takedown Support", h: "Order #4421", last: "Shipped today via UPS Ground.", ts: "1d", mod: "store" },
        { n: "Maya Reyes", h: "@mayareyes", last: "Loved your single-leg breakdown.", ts: "2d", mod: "athlete" },
      ].map((c, i) => (
        <div key={i} style={{ display: "flex", gap: 12, padding: "14px 20px", borderBottom: "1px solid var(--border-subtle)", position: "relative", alignItems: "center" }}>
          <div style={{ position: "absolute", left: 0, top: 28, width: 3, height: 20, background: MODULE_TINTS[c.mod] }} />
          <Avatar size={44} initials={c.n.split(" ").map(x => x[0]).join("")} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span className="t-body-bold" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.n}</span>
              <span className="t-caption-lg" style={{ color: "var(--text-tertiary)" }}>{c.ts}</span>
            </div>
            <div className="t-caption-lg" style={{ color: "var(--text-tertiary)", marginTop: 2 }}>{c.h}</div>
            <div className="t-body" style={{ color: c.unread ? "var(--text-primary)" : "var(--text-secondary)", marginTop: 4, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: c.unread ? 600 : 400 }}>{c.last}</div>
          </div>
          {c.unread && <Badge count={c.unread} />}
        </div>
      ))}
    </div>
  </div>
);

// ── SOC-1 · Social Feed ──────────────────────────────────────────
const SocialFeedScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Social" left={<I.ArrowLeft size={22} />} right={<I.Plus size={22} />} />
    <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
      {[
        { n: "Jordan Maeda", h: "65 FS", ts: "1h", body: "Hit my first re-shot in live go. Coach says I'm 80% there on the timing.", likes: 47, mod: "athlete", photoKind: "athlete" },
        { n: "ALL I SEE IS GOLD", h: "Atlanta room", ts: "3h", body: "Open mat night live. 24 wrestlers on the room floor. Bring red and blue singlets.", likes: 18, mod: "dojo", photoKind: "gym" },
        { n: "Maya Reyes", h: "57 FS · State Champ", ts: "6h", body: "Drilled the high crotch 200 times this week. The reps are the reps are the reps.", likes: 92, mod: "athlete" },
        { n: "Diego Marquez", h: "NHSCA scout", ts: "1d", body: "Spotted 14 kids worth a second look this weekend in St. Louis. List incoming.", likes: 31, mod: "scout" },
      ].map((p, i) => (
        <div key={i} style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-subtle)", position: "relative" }}>
          <div style={{ position: "absolute", left: 0, top: 22, width: 3, height: 16, background: MODULE_TINTS[p.mod] }} />
          <div style={{ display: "flex", gap: 12 }}>
            <Avatar size={36} initials={p.n.split(" ").map(x => x[0]).join("")} />
            <div style={{ flex: 1 }}>
              <div className="t-body-bold">{p.n}</div>
              <div className="t-caption-lg" style={{ color: "var(--text-tertiary)" }}>{p.h} · {p.ts}</div>
              <p className="t-body" style={{ marginTop: 8 }}>{p.body}</p>
              {p.photoKind && (
                <div style={{ position: "relative", marginTop: 12, height: 160, borderRadius: "var(--r-sm)", overflow: "hidden" }}>
                  <PhotoPlaceholder kind={p.photoKind} style={{ position: "absolute", inset: 0 }} />
                  <CornerMark corner="TL" /><CornerMark corner="BR" />
                </div>
              )}
              <div style={{ display: "flex", gap: 14, marginTop: 12, color: "var(--text-secondary)" }}>
                <span style={{ display: "flex", alignItems: "center", gap: 4 }}><I.Heart size={16} /><span className="t-caption-lg">{p.likes}</span></span>
                <span style={{ display: "flex", alignItems: "center", gap: 4 }}><I.Share size={16} /></span>
                <span style={{ display: "flex", alignItems: "center", gap: 4 }}><I.Bookmark size={16} /></span>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ── RNK-1 · Leaderboard ──────────────────────────────────────────
const LeaderboardScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Leaderboard" left={<I.ArrowLeft size={22} />} right={<I.Filter size={20} />} />
    <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
      <div style={{ padding: "12px 20px", display: "flex", gap: 6, borderBottom: "1px solid var(--border-subtle)", overflowX: "auto" }} className="no-scrollbar">
        {["65 FS", "U18", "PRO", "WOMEN", "ALL"].map((t, i) => <Tag key={t} active={i === 0}>{t}</Tag>)}
      </div>
      {[
        { r: 1, n: "Jordan Maeda", g: "ALL I SEE IS GOLD", pts: 1820, delta: "+12" },
        { r: 2, n: "Alex Romero", g: "ALL I SEE IS GOLD", pts: 1768, delta: "+8", self: true },
        { r: 3, n: "Maya Reyes", g: "Sunrise Wrestling", pts: 1701, delta: "+4" },
        { r: 4, n: "Sam Iyer", g: "Iron City", pts: 1620, delta: "−2" },
        { r: 5, n: "Diego Park", g: "Iron City", pts: 1584, delta: "+1" },
        { r: 6, n: "Kai Tanaka", g: "City BJJ", pts: 1542, delta: "+6" },
      ].map((row) => (
        <div key={row.r} style={{ display: "flex", alignItems: "center", padding: "12px 20px", borderBottom: "1px solid var(--border-subtle)", gap: 12, background: row.self ? "var(--bg-secondary)" : "transparent" }}>
          <div style={{ width: 28, textAlign: "center" }}>
            <div className="t-h5" style={{ color: row.r <= 3 ? "var(--accent)" : "var(--text-primary)" }}>{row.r}</div>
          </div>
          <Avatar size={36} initials={row.n.split(" ").map(x => x[0]).join("")} />
          <div style={{ flex: 1 }}>
            <div className="t-body-bold">{row.n}{row.self && <Tag accent style={{ marginLeft: 8 }}>YOU</Tag>}</div>
            <Overline style={{ color: "var(--text-tertiary)", marginTop: 2 }}>{row.g}</Overline>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="t-body-bold">{row.pts}</div>
            <div className="t-caption-lg" style={{ color: row.delta.startsWith("−") ? "var(--error)" : "var(--success)" }}>{row.delta}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ── RNK-2 · Head-to-Head Comparison ──────────────────────────────
const HeadToHeadScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Head-to-head" left={<I.ArrowLeft size={22} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 24px" }} className="no-scrollbar">
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", columnGap: 12, alignItems: "center", marginBottom: 8 }}>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Avatar size={72} initials="AR" ring="var(--accent)" />
        </div>
        <div className="t-h2" style={{ color: "var(--accent)", textAlign: "center", lineHeight: "72px" }}>VS</div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Avatar size={72} initials="JM" />
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", columnGap: 12, marginBottom: 24 }}>
        <div style={{ textAlign: "center" }}>
          <div className="t-body-bold">Alex Romero</div>
          <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>65 FS · 18-3</Overline>
        </div>
        <div style={{ width: 36 }} />
        <div style={{ textAlign: "center" }}>
          <div className="t-body-bold">Jordan Maeda</div>
          <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>65 FS · 19-1</Overline>
        </div>
      </div>
      <Overline style={{ color: "var(--accent)" }}>RECORD HEAD-TO-HEAD</Overline>
      <div className="t-h3" style={{ marginTop: 6 }}>2 - 3</div>
      <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 4 }}>5 matches over 18 months</div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>STAT BREAKDOWN</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          ["TAKEDOWNS / MATCH", "2.8", "3.1"],
          ["ESCAPES", "1.4", "0.9"],
          ["RIDING TIME", "0:42", "1:12"],
          ["FALL ATTEMPTS", "1.0", "0.6"],
          ["TECH-FALL RATE", "21%", "16%"],
        ].map((row) => (
          <div key={row[0]} style={{ display: "grid", gridTemplateColumns: "1fr 60px 60px", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)", alignItems: "center" }}>
            <Overline style={{ color: "var(--text-tertiary)" }}>{row[0]}</Overline>
            <span className="t-body-bold" style={{ textAlign: "center" }}>{row[1]}</span>
            <span className="t-body-bold" style={{ textAlign: "center" }}>{row[2]}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ── RNK-3 · Video Upload & Library ───────────────────────────────
const VideoLibraryScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Film room" left={<I.ArrowLeft size={22} />} right={<I.Plus size={22} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "12px 20px 24px" }} className="no-scrollbar">
      <Button label="UPLOAD MATCH FILM" fullWidth size="medium" tone="mono" leftIcon={<I.Lightning />} style={{ marginBottom: 16 }} />
      <div style={{ display: "flex", gap: 6, marginBottom: 16, overflowX: "auto" }} className="no-scrollbar">
        {["ALL", "MATCHES", "DRILLS", "BREAKDOWNS"].map((t, i) => <Tag key={t} active={i === 0}>{t}</Tag>)}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {[
          { t: "Maeda · finals", d: "05.10 · 4:38" },
          { t: "Single-leg drill set", d: "05.08 · 12:04" },
          { t: "Park scrimmage", d: "05.04 · 6:12" },
          { t: "Coach film review", d: "04.28 · 18:30" },
        ].map((v, i) => (
          <div key={i} style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", overflow: "hidden" }}>
            <div style={{ position: "relative", aspectRatio: "16/10" }}>
              <PhotoPlaceholder kind="mat" style={{ position: "absolute", inset: 0 }} />
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ width: 36, height: 36, borderRadius: 99, background: "rgba(13,8,8,0.7)", border: "1px solid rgba(255,255,255,0.3)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <div style={{ width: 0, height: 0, borderTop: "6px solid transparent", borderBottom: "6px solid transparent", borderLeft: "9px solid #fff", marginLeft: 2 }} />
                </div>
              </div>
            </div>
            <div style={{ padding: 10 }}>
              <div className="t-body-bold" style={{ fontSize: 12 }}>{v.t}</div>
              <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>{v.d}</Overline>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ── RNK-4 · Ring of Fire ─────────────────────────────────────────
const RingOfFireScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Ring of Fire" left={<I.ArrowLeft size={22} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 24px" }} className="no-scrollbar">
      <Overline style={{ color: "var(--accent)" }}>OPEN CHALLENGE</Overline>
      <div className="t-h3" style={{ marginTop: 6 }}>Step into the ring.</div>
      <p className="t-body-lg" style={{ color: "var(--text-secondary)", marginTop: 8 }}>Ranked athletes anonymous-challenge each other. Five-match streak earns a sponsor.</p>
      <div style={{ position: "relative", marginTop: 20, padding: 20, border: "2px solid var(--accent)", borderRadius: "var(--r-sm)" }}>
        <Overline style={{ color: "var(--accent)" }}>YOUR STREAK</Overline>
        <div className="t-h1" style={{ marginTop: 8, fontSize: 64, lineHeight: 0.9 }}>3<span style={{ color: "var(--text-tertiary)", fontSize: 32 }}>/5</span></div>
        <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 8 }}>Two more to qualify for the Pro Series purse.</div>
      </div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>NEXT CHALLENGER</Overline>
      <div style={{ display: "flex", gap: 12, padding: 14, border: "1px solid var(--border-default)", borderRadius: "var(--r-sm)", marginTop: 8 }}>
        <Avatar size={48} initials="??" />
        <div style={{ flex: 1 }}>
          <div className="t-body-bold">Anonymous · 65 FS</div>
          <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>RECORD HIDDEN · 14 STREAK ATTEMPTS</Overline>
        </div>
      </div>
      <Button label="ACCEPT CHALLENGE" fullWidth size="large" tone="accent" rightIcon={<I.ArrowRight />} style={{ marginTop: 16 }} />
    </div>
  </div>
);

// ── GHO-1 · Gym HQ Dashboard ─────────────────────────────────────
const GymOwnerDashboardScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <div style={{ paddingTop: 56, paddingLeft: 20, paddingRight: 20, paddingBottom: 16, borderBottom: "1px solid var(--border-subtle)" }}>
      <Overline style={{ color: "var(--module-dojo)" }}>GYM HQ · OWNER</Overline>
      <div className="t-h3" style={{ marginTop: 6 }}>ALL I SEE IS GOLD<br/>Academy</div>
    </div>
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 24px" }} className="no-scrollbar">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 20 }}>
        {[
          { v: "84", l: "MEMBERS", d: "+6 this week" },
          { v: "$18.2K", l: "MRR", d: "+$840 mo/mo" },
          { v: "12", l: "ACTIVE TODAY", d: "Wed 5/14" },
          { v: "92%", l: "ATTENDANCE", d: "30-day rolling" },
        ].map((m) => (
          <div key={m.l} style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", padding: 14 }}>
            <div className="t-h4">{m.v}</div>
            <Overline style={{ color: "var(--text-tertiary)", marginTop: 6 }}>{m.l}</Overline>
            <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 6 }}>{m.d}</div>
          </div>
        ))}
      </div>
      <Overline style={{ color: "var(--accent)" }}>NEXT ON THE MAT</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          { t: "Open mat 7pm", n: "24 RSVPs · Coach Hayes" },
          { t: "Drilling 6am", n: "8 RSVPs · Coach Petrov" },
        ].map((row, i) => (
          <div key={i} style={{ padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <div className="t-body-bold">{row.t}</div>
            <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>{row.n}</Overline>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ── GHO-2 · Roster ───────────────────────────────────────────────
const RosterScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Roster" left={<I.ArrowLeft size={22} />} right={<I.Plus size={22} />} />
    <div style={{ padding: "12px 20px", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ position: "relative" }}>
        <I.Search size={16} style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--text-secondary)" }} />
        <input placeholder="Search 84 members" style={{ width: "100%", height: 36, border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", background: "transparent", color: "var(--text-primary)", padding: "0 12px 0 36px", fontFamily: "inherit", fontSize: 13 }} />
      </div>
    </div>
    <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
      {[
        { n: "Alex Romero", w: "65 FS", st: "ACTIVE", rec: "18-3", pay: "PAID" },
        { n: "Jordan Maeda", w: "65 FS", st: "ACTIVE", rec: "19-1", pay: "PAID" },
        { n: "Maya Reyes", w: "57 FS", st: "ACTIVE", rec: "9-2", pay: "PAID" },
        { n: "Sam Iyer", w: "61 FS", st: "TRIAL", rec: "8-1", pay: "DUE" },
        { n: "Diego Park", w: "74 FS", st: "ACTIVE", rec: "15-3", pay: "PAID" },
        { n: "Kai Tanaka", w: "74 FS", st: "INACTIVE", rec: "7-5", pay: "OVERDUE" },
      ].map((m, i) => (
        <div key={i} style={{ display: "flex", gap: 12, padding: "12px 20px", borderBottom: "1px solid var(--border-subtle)", alignItems: "center" }}>
          <Avatar size={36} initials={m.n.split(" ").map(x => x[0]).join("")} />
          <div style={{ flex: 1 }}>
            <div className="t-body-bold">{m.n}</div>
            <Overline style={{ color: "var(--text-tertiary)", marginTop: 2 }}>{m.w} · {m.rec}</Overline>
          </div>
          <Tag accent={m.pay === "OVERDUE" || m.pay === "DUE"}>{m.pay}</Tag>
        </div>
      ))}
    </div>
  </div>
);

// ── GHO-3 · Announcements ────────────────────────────────────────
const AnnouncementsScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Announcements" left={<I.ArrowLeft size={22} />} right={<I.Plus size={22} />} />
    <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
      {[
        { ts: "TODAY 9AM", t: "Mat closed Sunday for floor work", body: "We're refinishing the corner mat. Use the back room if you stop by.", views: 64 },
        { ts: "MON 5/12", t: "New rashguard drop in the gym store", body: "ALL I SEE IS GOLD home colors. 20% off through Friday for active members.", views: 71 },
        { ts: "SUN 5/11", t: "Folkstyle weekend recap", body: "5 medals at the regional showcase. Special shoutout to Maya, Jordan, and Sam.", views: 82 },
      ].map((a, i) => (
        <div key={i} style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-subtle)" }}>
          <Overline style={{ color: "var(--accent)" }}>{a.ts}</Overline>
          <div className="t-h5" style={{ marginTop: 4 }}>{a.t}</div>
          <p className="t-body" style={{ marginTop: 6, color: "var(--text-secondary)" }}>{a.body}</p>
          <Overline style={{ color: "var(--text-tertiary)", marginTop: 10 }}>{a.views} VIEWS</Overline>
        </div>
      ))}
    </div>
  </div>
);

// ── GHO-4 · Financials ───────────────────────────────────────────
const FinancialsScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Financials" left={<I.ArrowLeft size={22} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 24px" }} className="no-scrollbar">
      <Overline style={{ color: "var(--accent)" }}>THIS MONTH · MAY</Overline>
      <div className="t-h2" style={{ marginTop: 6 }}>$18,420</div>
      <div className="t-caption-lg" style={{ color: "var(--success)", marginTop: 4 }}>+$840 vs April</div>
      <div style={{ marginTop: 20, height: 80, position: "relative", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", padding: "8px 0" }}>
        <svg width="100%" height="100%" viewBox="0 0 300 80" preserveAspectRatio="none">
          <polyline fill="none" stroke="var(--accent)" strokeWidth="1.5" points="0,60 30,52 60,48 90,40 120,42 150,32 180,28 210,24 240,18 270,22 300,12" />
        </svg>
      </div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>BREAKDOWN</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          ["MEMBERSHIPS", "$14,200"],
          ["DROP-INS", "$1,820"],
          ["PRIVATE LESSONS", "$1,400"],
          ["GYM STORE", "$1,000"],
        ].map(([l, v]) => (
          <div key={l} style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <Overline style={{ color: "var(--text-tertiary)" }}>{l}</Overline>
            <span className="t-body-bold">{v}</span>
          </div>
        ))}
      </div>
      <Button label="EXPORT REPORT" fullWidth variant="secondary" tone="mono" style={{ marginTop: 20 }} />
    </div>
  </div>
);

// ── GHO-5 · Class Schedule ───────────────────────────────────────
const ClassScheduleScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Schedule" left={<I.ArrowLeft size={22} />} right={<I.Plus size={22} />} />
    <div style={{ padding: "12px 20px", display: "flex", gap: 6, borderBottom: "1px solid var(--border-subtle)", overflowX: "auto" }} className="no-scrollbar">
      {["MON","TUE","WED","THU","FRI","SAT","SUN"].map((d, i) => (
        <Tag key={d} active={i === 2}>{d}</Tag>
      ))}
    </div>
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 24px" }} className="no-scrollbar">
      <Overline style={{ color: "var(--accent)" }}>WED · MAY 14</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          { t: "06:00", n: "Strength", c: "Coach Petrov", rsvp: 8, cap: 20 },
          { t: "12:00", n: "Open mat", c: "Coach Hayes", rsvp: 14, cap: 30 },
          { t: "16:00", n: "Youth class", c: "Coach Petrov", rsvp: 22, cap: 24 },
          { t: "18:00", n: "Live go · advanced", c: "Coach Hayes", rsvp: 18, cap: 20 },
          { t: "19:30", n: "Film breakdown", c: "Coach Hayes", rsvp: 11, cap: 25 },
        ].map((s, i) => (
          <div key={i} style={{ display: "flex", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)", alignItems: "center" }}>
            <Overline style={{ color: "var(--text-tertiary)", width: 60, flexShrink: 0 }}>{s.t}</Overline>
            <div style={{ flex: 1 }}>
              <div className="t-body-bold">{s.n}</div>
              <Overline style={{ color: "var(--text-tertiary)", marginTop: 2 }}>{s.c}</Overline>
            </div>
            <div style={{ textAlign: "right" }}>
              <div className="t-body-bold" style={{ color: s.rsvp >= s.cap * 0.9 ? "var(--accent)" : "var(--text-primary)" }}>{s.rsvp}/{s.cap}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ── GHO-6 · Roles & Permissions ──────────────────────────────────
const RolesScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Roles & permissions" left={<I.ArrowLeft size={22} />} />
    <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
      {[
        { r: "OWNER", n: "Tim Gold", access: "Full access · 1 member" },
        { r: "HEAD COACH", n: "Coach Hayes", access: "Roster, schedule, film · 1 member" },
        { r: "ASSISTANT COACH", n: "Coach Petrov", access: "Schedule, attendance · 2 members" },
        { r: "FRONT DESK", n: "Maria Lopez", access: "Check-in, payments · 1 member" },
        { r: "MEMBER", n: "Default", access: "Schedule, check-in, social · 84 members" },
      ].map((row, i) => (
        <div key={i} style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-subtle)" }}>
          <Overline style={{ color: "var(--accent)" }}>{row.r}</Overline>
          <div className="t-h5" style={{ marginTop: 4 }}>{row.n}</div>
          <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 6 }}>{row.access}</div>
        </div>
      ))}
    </div>
    <div style={{ padding: "12px 20px 32px", background: "var(--bg-primary)", borderTop: "1px solid var(--border-subtle)" }}>
      <Button label="ADD ROLE" fullWidth variant="secondary" tone="mono" leftIcon={<I.Plus />} />
    </div>
  </div>
);

// ── GHO-7 · Billing & Subscription ───────────────────────────────
const BillingScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Billing" left={<I.ArrowLeft size={22} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 32px" }} className="no-scrollbar">
      <div style={{ border: "2px solid var(--accent)", borderRadius: "var(--r-sm)", padding: 16 }}>
        <Overline style={{ color: "var(--accent)" }}>GYM HQ · PRO</Overline>
        <div className="t-h2" style={{ marginTop: 6 }}>$199<span className="t-body-lg" style={{ color: "var(--text-secondary)" }}> / mo</span></div>
        <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 4 }}>Billed monthly · renews Jun 1</div>
        <Hairline style={{ margin: "12px 0" }} />
        {[
          "Unlimited members",
          "Roster, schedule, attendance",
          "Gym store + financials",
          "Roles & permissions",
          "Film room (200GB)",
        ].map((f) => (
          <div key={f} style={{ display: "flex", alignItems: "center", gap: 8, padding: "4px 0" }}>
            <I.Check size={14} style={{ color: "var(--accent)" }} />
            <span className="t-body">{f}</span>
          </div>
        ))}
      </div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>PAYMENT</Overline>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
        <div className="t-body-bold">VISA •••• 4242</div>
        <I.ChevronRight size={18} stroke={1.5} style={{ color: "var(--text-tertiary)" }} />
      </div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>HISTORY</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          ["MAY 1", "$199.00", "PAID"],
          ["APR 1", "$199.00", "PAID"],
          ["MAR 1", "$199.00", "PAID"],
        ].map((row) => (
          <div key={row[0]} style={{ display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 8, padding: "12px 0", borderBottom: "1px solid var(--border-subtle)", alignItems: "center" }}>
            <Overline style={{ color: "var(--text-tertiary)" }}>{row[0]}</Overline>
            <span className="t-body-bold">{row[1]}</span>
            <Overline style={{ color: "var(--success)" }}>{row[2]}</Overline>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ── GHO-8 · Student Detail ───────────────────────────────────────
const StudentDetailScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Student" left={<I.ArrowLeft size={22} />} right={<I.Settings size={20} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 32px" }} className="no-scrollbar">
      <div style={{ display: "flex", gap: 14 }}>
        <Avatar size={64} initials="AR" ring="var(--accent)" />
        <div>
          <div className="t-h4">Alex Romero</div>
          <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>65 FS · ACTIVE · ROOM 14</Overline>
          <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 4 }}>Member since Sep 2024</div>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginTop: 20 }}>
        {[
          { l: "MAT HRS / MO", v: "12" },
          { l: "RECORD", v: "18-3" },
          { l: "ATTEND", v: "92%" },
        ].map((m) => (
          <div key={m.l} style={{ borderLeft: "2px solid var(--accent)", paddingLeft: 8 }}>
            <div className="t-h4">{m.v}</div>
            <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>{m.l}</Overline>
          </div>
        ))}
      </div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>BILLING</Overline>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
        <div className="t-body-bold">$129 / mo · Pro membership</div>
        <Tag>PAID</Tag>
      </div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 20 }}>RECENT CHECK-INS</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          ["WED 5/14", "Open mat 12pm"],
          ["TUE 5/13", "Live go 6pm"],
          ["MON 5/12", "Strength 6am"],
        ].map((row) => (
          <div key={row[0]} style={{ display: "flex", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <Overline style={{ color: "var(--text-tertiary)", width: 90, flexShrink: 0 }}>{row[0]}</Overline>
            <span className="t-body">{row[1]}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

Object.assign(window, {
  EventsBrowseScreen,
  EventDetailScreen,
  MessagesScreen,
  SocialFeedScreen,
  LeaderboardScreen,
  HeadToHeadScreen,
  VideoLibraryScreen,
  RingOfFireScreen,
  GymOwnerDashboardScreen,
  RosterScreen,
  AnnouncementsScreen,
  FinancialsScreen,
  ClassScheduleScreen,
  RolesScreen,
  BillingScreen,
  StudentDetailScreen,
});