// ──────────────────────────────────────────────────────────────────
// Phase 1 screens — Auth, Home, Profile, Builder, Gym HQ Member.
// Compact components, all mobile (390×844 iPhone canvas).
// Per Takedown Platform inventory v3.1.
// ──────────────────────────────────────────────────────────────────

// ── AUTH-3 · Forgot Password ─────────────────────────────────────
const ForgotPasswordScreen = () => {
  const [email, setEmail] = React.useState("alex@dojo.gg");
  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)" }}>
      <TopBar left={<button style={{ background: "transparent", border: "none", color: "var(--text-primary)", padding: 4, cursor: "pointer" }}><I.ArrowLeft size={22} /></button>} />
      <div style={{ padding: "8px 20px 0" }}>
        <Overline style={{ color: "var(--accent)" }}>AUTH · RECOVER</Overline>
        <h1 className="t-h2" style={{ marginTop: 8 }}>Forgot password?</h1>
        <p className="t-body-lg" style={{ color: "var(--text-secondary)", marginTop: 8 }}>
          We'll send a reset link to your inbox. Check spam if it doesn't show up in 60 seconds.
        </p>
        <div style={{ marginTop: 32 }}>
          <TextInput label="Email" value={email} onChange={setEmail} />
        </div>
        <Button label="SEND RESET LINK" fullWidth size="large" tone="mono" rightIcon={<I.ArrowRight />} style={{ marginTop: 16 }} />
        <div style={{ marginTop: 24, textAlign: "center" }}>
          <button style={{ color: "var(--text-secondary)", background: "transparent", border: "none", cursor: "pointer", fontWeight: 600, fontSize: 13 }}>
            ← Back to sign in
          </button>
        </div>
      </div>
    </div>
  );
};

// ── AUTH-5 · Onboarding Interests ────────────────────────────────
const InterestsScreen = () => {
  const interests = [
    { k: "wrestling", n: "WRESTLING" },
    { k: "bjj", n: "BJJ" },
    { k: "mma", n: "MMA" },
    { k: "judo", n: "JUDO" },
    { k: "boxing", n: "BOXING" },
    { k: "muaythai", n: "MUAY THAI" },
    { k: "kickboxing", n: "KICKBOXING" },
    { k: "freestyle", n: "FREESTYLE" },
    { k: "greco", n: "GRECO" },
    { k: "folkstyle", n: "FOLKSTYLE" },
  ];
  const [picked, setPicked] = React.useState(new Set(["wrestling", "freestyle", "mma"]));
  const toggle = (k) => setPicked((s) => { const n = new Set(s); n.has(k) ? n.delete(k) : n.add(k); return n; });
  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
      <div style={{ position: "absolute", top: 64, left: 20, right: 20, zIndex: 10, display: "flex", gap: 6 }}>
        {[0, 1, 2, 3].map((i) => <div key={i} style={{ width: i === 3 ? 28 : 16, height: 3, background: i <= 3 ? "var(--text-primary)" : "var(--border-subtle)" }} />)}
      </div>
      <div style={{ padding: "100px 20px 24px" }}>
        <Overline style={{ color: "var(--accent)" }}>STEP 04 · INTERESTS</Overline>
        <h1 className="t-h2" style={{ marginTop: 8 }}>Pick your sports.</h1>
        <p className="t-body-lg" style={{ color: "var(--text-secondary)", marginTop: 8 }}>
          We'll personalize your feed, events, and gear suggestions. Tap to select. Change anytime.
        </p>
      </div>
      <div style={{ padding: "0 20px", flex: 1, display: "flex", flexWrap: "wrap", gap: 8, alignContent: "flex-start" }}>
        {interests.map((it) => (
          <Tag key={it.k} active={picked.has(it.k)} onClick={() => toggle(it.k)}>{it.n}</Tag>
        ))}
      </div>
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "12px 20px 32px", background: "var(--bg-primary)", borderTop: "1px solid var(--border-subtle)" }}>
        <Button label={`CONTINUE · ${picked.size} PICKED`} fullWidth size="large" tone="mono" rightIcon={<I.ArrowRight />} />
      </div>
    </div>
  );
};

// ── HOME-2 · Notifications ───────────────────────────────────────
const NotificationsScreen = () => {
  const items = [
    { mod: "scout", ts: "now", body: "Diego Marquez sent a scout note about NHSCA Duals.", n: "Diego Marquez", code: "INV-005" },
    { mod: "store", ts: "2h", body: "Your singlet #TD-SGL-014 entered cut & stitch.", code: "ORDER #4421" },
    { mod: "athlete", ts: "5h", body: "Coach Hayes posted a film breakdown of your single-leg.", n: "Coach Hayes" },
    { mod: "dojo", ts: "1d", body: "ALL I SEE IS GOLD Academy added 12 new mat sessions.", n: "ALL I SEE IS GOLD" },
    { mod: "builder", ts: "1d", body: "Your draft 'NCAA Loadout' was saved across devices.", code: "TD-SGL-014" },
    { mod: "store", ts: "2d", body: "Dark Krystal collection just landed. Pattern any build.", code: "NEW · DRK-KRYSTL" },
  ];
  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
      <TopBar title="Notifications" left={<I.ArrowLeft size={22} />} right={<button style={{ background: "transparent", border: "none", color: "var(--text-secondary)", padding: 4, cursor: "pointer", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em" }}>MARK READ</button>} />
      <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
        {items.map((row, i) => (
          <div key={i} style={{ display: "flex", gap: 12, padding: "14px 20px", borderBottom: "1px solid var(--border-subtle)", position: "relative" }}>
            <div style={{ position: "absolute", left: 0, top: 22, width: 3, height: 20, background: MODULE_TINTS[row.mod] }} />
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <Overline style={{ color: "var(--text-tertiary)" }}>{row.code || row.n}</Overline>
                <span className="t-caption-lg" style={{ color: "var(--text-tertiary)" }}>{row.ts}</span>
              </div>
              <p className="t-body" style={{ marginTop: 4 }}>{row.body}</p>
            </div>
            {i < 2 && <span style={{ width: 8, height: 8, borderRadius: 99, background: "var(--accent)", flexShrink: 0, marginTop: 8 }} />}
          </div>
        ))}
      </div>
    </div>
  );
};

// ── HOME-3 · Gym Detail ──────────────────────────────────────────
const GymDetailScreen = () => (
  <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: 220, position: "relative" }}>
        <PhotoPlaceholder kind="gym" 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: 16, left: 20, color: "#fff" }}>
          <Overline style={{ color: "rgba(255,255,255,0.7)" }}>VERIFIED · ROOM 14</Overline>
          <div className="t-h3" style={{ marginTop: 4 }}>ALL I SEE IS GOLD<br/>Academy</div>
        </div>
      </div>
      <div style={{ padding: 20 }}>
        <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
          <Button label="FOLLOW" size="medium" tone="mono" />
          <Button label="MESSAGE" variant="secondary" size="medium" tone="mono" leftIcon={<I.Share />} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 24 }}>
          {[
            { l: "MEMBERS", v: "84" },
            { l: "MEDALS", v: "212" },
            { l: "EVENTS", v: "16" },
          ].map((m) => (
            <div key={m.l} style={{ borderLeft: "2px solid var(--module-dojo)", 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(--accent)" }}>NEXT ON THE MAT</Overline>
        <div style={{ marginTop: 8 }}>
          {[
            { d: "TONIGHT", t: "Open mat 7pm", coach: "Coach Hayes" },
            { d: "FRI 05.15", t: "Folkstyle drilling 6pm", coach: "Coach Petrov" },
            { d: "SAT 05.16", t: "Scrambles & live go 10am", coach: "Coach Hayes" },
          ].map((row, i) => (
            <div key={i} style={{ display: "flex", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
              <Overline style={{ color: "var(--text-tertiary)", width: 90, flexShrink: 0 }}>{row.d}</Overline>
              <div style={{ flex: 1 }}>
                <div className="t-body-bold">{row.t}</div>
                <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 2 }}>{row.coach}</div>
              </div>
              <Tag>RSVP</Tag>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

// ── HOME-4 · Explore ─────────────────────────────────────────────
const ExploreScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Explore" left={<I.ArrowLeft size={22} />} right={<I.Search size={20} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 24px" }} className="no-scrollbar">
      <div style={{ display: "flex", gap: 6, marginBottom: 20, overflowX: "auto" }} className="no-scrollbar">
        {["TRENDING", "GYMS", "ATHLETES", "DROPS", "EVENTS"].map((t, i) => <Tag key={t} active={i === 0}>{t}</Tag>)}
      </div>
      <Overline style={{ color: "var(--module-athlete)" }}>RISING THIS WEEK</Overline>
      <div className="t-h4" style={{ marginTop: 6, marginBottom: 12 }}>Athletes to follow</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {[
          { n: "Jordan Maeda", w: "65 FS", rec: "12-1" },
          { n: "Maya Reyes", w: "57 FS", rec: "9-2" },
          { n: "Diego Park", w: "74 FS", rec: "15-3" },
          { n: "Sam Iyer", w: "61 FS", rec: "8-1" },
        ].map((a, i) => (
          <div key={i} style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", padding: 12 }}>
            <Avatar size={44} initials={a.n.split(" ").map(x => x[0]).join("")} />
            <div className="t-body-bold" style={{ marginTop: 8 }}>{a.n}</div>
            <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>{a.w} · {a.rec}</Overline>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ── HOME-5 · Search Results ──────────────────────────────────────
const SearchResultsScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <div style={{ paddingTop: 56, paddingLeft: 20, paddingRight: 20, paddingBottom: 12, borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <I.ArrowLeft size={22} />
        <div style={{ flex: 1, position: "relative" }}>
          <I.Search size={16} style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--text-secondary)" }} />
          <input defaultValue="freestyle" style={{ width: "100%", height: 40, border: "1px solid var(--border-default)", borderRadius: "var(--r-sm)", background: "transparent", color: "var(--text-primary)", padding: "0 12px 0 36px", fontFamily: "inherit", fontSize: 14 }} />
        </div>
      </div>
      <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
        {["ALL · 24", "ATHLETES", "GYMS", "EVENTS", "GEAR"].map((t, i) => <Tag key={t} active={i === 0}>{t}</Tag>)}
      </div>
    </div>
    <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
      {[
        { mod: "athlete", n: "Jordan Maeda", s: "65 FS · NCWA Top 10" },
        { mod: "dojo", n: "ALL I SEE IS GOLD Academy", s: "Wrestling room · 84 members" },
        { mod: "scout", n: "Freestyle Trials 2026", s: "Event · May 28 · Indianapolis" },
        { mod: "athlete", n: "Sam Iyer", s: "61 FS · Rising star" },
        { mod: "store", n: "Freestyle drill camp shirt", s: "Apparel · $29" },
      ].map((r, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", padding: "14px 20px", borderBottom: "1px solid var(--border-subtle)", gap: 12, position: "relative" }}>
          <div style={{ position: "absolute", left: 0, top: 22, width: 3, height: 20, background: MODULE_TINTS[r.mod] }} />
          <Avatar size={40} initials={r.n.split(" ").slice(0, 2).map(x => x[0]).join("")} />
          <div style={{ flex: 1 }}>
            <div className="t-body-bold">{r.n}</div>
            <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 2 }}>{r.s}</div>
          </div>
          <I.ChevronRight size={18} stroke={1.5} style={{ color: "var(--text-tertiary)" }} />
        </div>
      ))}
    </div>
  </div>
);

// ── HOME-6 · Create Post ─────────────────────────────────────────
const CreatePostScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar
      title="New post"
      left={<button style={{ background: "transparent", border: "none", color: "var(--text-secondary)", padding: 4, cursor: "pointer", fontWeight: 600 }}>Cancel</button>}
      right={<button style={{ background: "var(--text-primary)", color: "var(--bg-primary)", border: "none", padding: "6px 12px", borderRadius: "var(--r-sm)", cursor: "pointer", fontWeight: 700, fontSize: 11, letterSpacing: "0.1em" }}>POST</button>}
    />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "16px 20px" }}>
      <div style={{ display: "flex", gap: 10, marginBottom: 16 }}>
        <Avatar size={36} initials="AR" />
        <div>
          <div className="t-body-bold">Alex Romero</div>
          <Overline style={{ color: "var(--text-tertiary)", marginTop: 2 }}>POSTING AS WRESTLER · 65 FS</Overline>
        </div>
      </div>
      <textarea placeholder="What happened on the mat today?" defaultValue="Hit the cleanest single-leg of my life this morning. Coach Hayes broke it down — drilled the re-attack 40 times."
        style={{ width: "100%", height: 180, border: "none", background: "transparent", color: "var(--text-primary)", fontFamily: "inherit", fontSize: 16, lineHeight: 1.5, outline: "none", resize: "none" }} />
      <div style={{ marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--border-subtle)", display: "flex", gap: 12 }}>
        {[<I.Camera />, <I.Lightning />, <I.Heart />, <I.Calendar />].map((ic, i) => (
          <button key={i} style={{ background: "transparent", border: "1px solid var(--border-subtle)", color: "var(--text-secondary)", borderRadius: "var(--r-sm)", padding: 10, cursor: "pointer" }}>{ic}</button>
        ))}
      </div>
    </div>
  </div>
);

// ── HOME-7 · Parent Management Dashboard ─────────────────────────
const ParentDashboardScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Parent" left={<I.ArrowLeft size={22} />} right={<I.Settings size={20} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 24px" }} className="no-scrollbar">
      <Overline style={{ color: "var(--accent)" }}>YOUR ATHLETES · 2</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          { n: "Sam Romero", age: "U14 · 38KG", rec: "8-3", next: "Sat scrimmage 9am" },
          { n: "Mia Romero", age: "U10 · 28KG", rec: "5-1", next: "Practice Wed 5pm" },
        ].map((k, i) => (
          <div key={i} style={{ border: "1px solid var(--border-default)", borderRadius: "var(--r-sm)", padding: 16, marginBottom: 12 }}>
            <div style={{ display: "flex", gap: 12 }}>
              <Avatar size={48} initials={k.n.split(" ").map(x => x[0]).join("")} ring="var(--accent)" />
              <div style={{ flex: 1 }}>
                <div className="t-body-bold">{k.n}</div>
                <Overline style={{ color: "var(--text-tertiary)", marginTop: 2 }}>{k.age} · {k.rec}</Overline>
              </div>
              <button style={{ background: "transparent", border: "1px solid var(--border-subtle)", color: "var(--text-primary)", padding: "4px 8px", borderRadius: "var(--r-xs)", cursor: "pointer", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em" }}>VIEW</button>
            </div>
            <Hairline style={{ margin: "12px 0" }} />
            <div className="t-caption-lg" style={{ color: "var(--text-secondary)" }}>Next: {k.next}</div>
          </div>
        ))}
      </div>
      <Button label="ADD CHILD" fullWidth variant="secondary" tone="mono" leftIcon={<I.Plus />} style={{ marginTop: 16 }} />
    </div>
  </div>
);

// ── PRO-2 · Edit Profile ─────────────────────────────────────────
const EditProfileScreen = () => {
  const [name, setName] = React.useState("Alex Romero");
  const [handle, setHandle] = React.useState("romero");
  const [bio, setBio] = React.useState("65 FS · NCWA · gold-medal mindset on bronze legs.");
  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
      <TopBar title="Edit profile" left={<I.ArrowLeft size={22} />} right={<button style={{ background: "var(--text-primary)", color: "var(--bg-primary)", border: "none", padding: "6px 12px", borderRadius: "var(--r-sm)", cursor: "pointer", fontWeight: 700, fontSize: 11, letterSpacing: "0.1em" }}>SAVE</button>} />
      <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 32px" }} className="no-scrollbar">
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 24 }}>
          <Avatar size={88} initials="AR" ring="var(--accent)" />
          <button style={{ background: "transparent", border: "none", color: "var(--accent)", marginTop: 10, padding: 4, cursor: "pointer", fontWeight: 600, fontSize: 13 }}>Change photo</button>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <TextInput label="Display name" value={name} onChange={setName} />
          <TextInput label="Handle" value={handle} onChange={setHandle} leftIcon={<span style={{ fontWeight: 600 }}>@</span>} />
          <TextInput label="Bio" value={bio} onChange={setBio} />
          <TextInput label="Weight class" value="65 FS · 143 lb" onChange={() => {}} />
          <TextInput label="Home room" value="ALL I SEE IS GOLD Academy" onChange={() => {}} />
        </div>
      </div>
    </div>
  );
};

// ── PRO-4 · Order History ────────────────────────────────────────
const OrderHistoryScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Orders" left={<I.ArrowLeft size={22} />} right={<I.Filter size={20} />} />
    <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
      {[
        { code: "TD-O-4421", n: "Worlds Loadout singlet", st: "STITCHING · DAY 6", d: "05.10", mod: "store", cost: "$168.00" },
        { code: "TD-O-4308", n: "Pro Series fight shorts", st: "SHIPPED · 05.04", d: "04.28", mod: "athlete", cost: "$49.00" },
        { code: "TD-O-4099", n: "Open Mat team bundle (12)", st: "DELIVERED · 04.20", d: "03.12", mod: "athlete", cost: "$1,248.00" },
        { code: "TD-O-3877", n: "Dark Krystal rashguard", st: "DELIVERED · 02.22", d: "02.15", mod: "store", cost: "$45.00" },
      ].map((o, 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[o.mod] }} />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <Overline style={{ color: "var(--text-tertiary)" }}>{o.code} · {o.d}</Overline>
            <span className="t-body-bold">{o.cost}</span>
          </div>
          <div className="t-body-bold" style={{ marginTop: 4 }}>{o.n}</div>
          <Overline style={{ color: i === 0 ? "var(--accent)" : "var(--text-secondary)", marginTop: 4 }}>{o.st}</Overline>
        </div>
      ))}
    </div>
  </div>
);

// ── PRO-6 · Wallet & Payments ────────────────────────────────────
const WalletScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Wallet" left={<I.ArrowLeft size={22} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 32px" }} className="no-scrollbar">
      <div style={{ border: "1px solid var(--border-default)", borderRadius: "var(--r-sm)", padding: 16, marginBottom: 12 }}>
        <Overline style={{ color: "var(--text-tertiary)" }}>BALANCE · TAKEDOWN CREDIT</Overline>
        <div className="t-h2" style={{ marginTop: 6, color: "var(--accent)" }}>$248.50</div>
        <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 4 }}>Sponsor escrow + referral payouts.</div>
        <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
          <Button label="WITHDRAW" size="medium" tone="mono" />
          <Button label="HISTORY" variant="secondary" size="medium" tone="mono" />
        </div>
      </div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>PAYMENT METHODS</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          { brand: "VISA", num: "•••• 4242", def: true },
          { brand: "MASTERCARD", num: "•••• 8331" },
          { brand: "APPLE PAY", num: "Touch ID" },
        ].map((c) => (
          <div key={c.num} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <div>
              <div className="t-body-bold">{c.brand} {c.num}</div>
              {c.def && <Overline style={{ color: "var(--accent)", marginTop: 4 }}>DEFAULT</Overline>}
            </div>
            <I.ChevronRight size={18} stroke={1.5} style={{ color: "var(--text-tertiary)" }} />
          </div>
        ))}
      </div>
      <Button label="ADD CARD" fullWidth variant="secondary" tone="mono" leftIcon={<I.Plus />} style={{ marginTop: 16 }} />
    </div>
  </div>
);

// ── PRO-7 · Notification Preferences ─────────────────────────────
const NotifPrefsScreen = () => {
  const groups = [
    { name: "MAT & MATCHES", items: [
      { l: "Match results posted", on: true },
      { l: "Scout DMs", on: true },
      { l: "Coach announcements", on: true },
      { l: "Training video tags", on: false },
    ]},
    { name: "STORE & ORDERS", items: [
      { l: "Order updates", on: true },
      { l: "Restocks I follow", on: true },
      { l: "Sponsor drops", on: false },
      { l: "Athlete store payouts", on: true },
    ]},
    { name: "PEOPLE", items: [
      { l: "Follower requests", on: true },
      { l: "Parent linked accounts", on: true },
      { l: "Affiliate referrals", on: false },
    ]},
  ];
  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
      <TopBar title="Notifications" left={<I.ArrowLeft size={22} />} />
      <div style={{ flex: 1, overflow: "auto", padding: "8px 20px 32px" }} className="no-scrollbar">
        {groups.map((g, gi) => (
          <div key={gi} style={{ marginTop: gi === 0 ? 8 : 24 }}>
            <Overline style={{ color: "var(--accent)" }}>{g.name}</Overline>
            <div style={{ marginTop: 8 }}>
              {g.items.map((it) => <SettingsRow key={it.l} label={it.l} switchOn={it.on} />)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ── BLD-3 · Product Config ───────────────────────────────────────
const ProductConfigScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="TD-SGL-014 · Config" left={<I.ArrowLeft size={22} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 32px" }} className="no-scrollbar">
      <Overline style={{ color: "var(--text-secondary)" }}>FABRIC</Overline>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 8 }}>
        {[
          { n: "PRO SERIES", s: "240 GSM · Comp grade", sel: true },
          { n: "LIGHT", s: "180 GSM · Drilling" },
        ].map((c) => (
          <div key={c.n} style={{ border: c.sel ? "2px solid var(--text-primary)" : "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", padding: 14 }}>
            <Overline style={{ color: "var(--text-tertiary)" }}>{c.n}</Overline>
            <div className="t-caption-lg" style={{ marginTop: 4, color: "var(--text-secondary)" }}>{c.s}</div>
          </div>
        ))}
      </div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>SIZE · WRESTLING</Overline>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, marginTop: 8 }}>
        {["YS","YM","YL","XS","S","M","L","XL","2XL"].map((s, i) => (
          <Tag key={s} active={i === 5}>{s}</Tag>
        ))}
      </div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>FIT</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          ["CHEST", "104 cm"],
          ["WAIST", "82 cm"],
          ["INSEAM", "12 cm"],
          ["BACK LENGTH", "63 cm"],
        ].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>
    </div>
    <div style={{ padding: "12px 20px 32px", background: "var(--bg-primary)", borderTop: "1px solid var(--border-subtle)" }}>
      <Button label="ADD TO BUILD · $55" fullWidth size="large" tone="mono" rightIcon={<I.ArrowRight />} />
    </div>
  </div>
);

// ── GHM-1 · Member Dashboard ─────────────────────────────────────
const MemberDashboardScreen = () => (
  <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 · ALL I SEE IS GOLD</Overline>
      <div className="t-h3" style={{ marginTop: 6 }}>Welcome back,<br/>Alex.</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: "12", l: "MAT HOURS / MO" },
          { v: "4", l: "CHECK-INS / WK" },
          { v: "18-3", l: "RECORD" },
          { v: "5", l: "DRILL STREAK" },
        ].map((m) => (
          <div key={m.l} style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", padding: 14 }}>
            <div className="t-h3">{m.v}</div>
            <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>{m.l}</Overline>
          </div>
        ))}
      </div>
      <Overline style={{ color: "var(--accent)" }}>UPCOMING</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          { d: "TONIGHT", t: "Open mat 7pm" },
          { d: "FRI", t: "Folkstyle drilling 6pm" },
        ].map((row, i) => (
          <div key={i} style={{ display: "flex", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <Overline style={{ color: "var(--text-tertiary)", width: 90, flexShrink: 0 }}>{row.d}</Overline>
            <div style={{ flex: 1 }} className="t-body-bold">{row.t}</div>
            <Tag>RSVP</Tag>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ── GHM-2 · Check-in & Schedule ──────────────────────────────────
const CheckinScreen = () => {
  const week = ["MON 12", "TUE 13", "WED 14", "THU 15", "FRI 16", "SAT 17", "SUN 18"];
  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
      <TopBar title="Check-in" left={<I.ArrowLeft size={22} />} />
      <div style={{ display: "flex", padding: "12px 20px", borderBottom: "1px solid var(--border-subtle)", gap: 6, overflowX: "auto" }} className="no-scrollbar">
        {week.map((d, i) => (
          <button key={d} style={{ flex: 1, padding: "8px 4px", border: i === 2 ? "1.5px solid var(--text-primary)" : "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", background: i === 2 ? "var(--text-primary)" : "transparent", color: i === 2 ? "var(--bg-primary)" : "var(--text-primary)", cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center", gap: 2, minWidth: 44 }}>
            <Overline>{d.split(" ")[0]}</Overline>
            <span style={{ fontWeight: 700, fontSize: 16 }}>{d.split(" ")[1]}</span>
          </button>
        ))}
      </div>
      <div style={{ flex: 1, overflow: "auto", padding: "16px 20px" }} className="no-scrollbar">
        <Overline style={{ color: "var(--accent)" }}>TODAY · WED MAY 14</Overline>
        <div style={{ marginTop: 8 }}>
          {[
            { t: "06:00", n: "Strength · Coach Petrov", in: false },
            { t: "12:00", n: "Open mat", in: true },
            { t: "18:00", n: "Live go · advanced", in: false },
            { t: "19:30", n: "Film breakdown", in: false },
          ].map((s, i) => (
            <div key={i} style={{ display: "flex", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
              <Overline style={{ color: "var(--text-tertiary)", width: 70, flexShrink: 0 }}>{s.t}</Overline>
              <div style={{ flex: 1 }} className="t-body-bold">{s.n}</div>
              {s.in ? <Tag accent>CHECKED IN</Tag> : <Tag>RSVP</Tag>}
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: "12px 20px 32px", background: "var(--bg-primary)", borderTop: "1px solid var(--border-subtle)" }}>
        <Button label="SCAN GYM QR" fullWidth size="large" tone="accent" leftIcon={<I.Target />} />
      </div>
    </div>
  );
};

// ── GHM-3 · Progress Tracker ─────────────────────────────────────
const ProgressTrackerScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Progress" left={<I.ArrowLeft size={22} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 32px" }} className="no-scrollbar">
      <Overline style={{ color: "var(--accent)" }}>BELT / RANK</Overline>
      <div className="t-h3" style={{ marginTop: 6 }}>Varsity · Class A</div>
      <div style={{ height: 8, background: "var(--bg-tertiary)", borderRadius: 4, marginTop: 14, overflow: "hidden" }}>
        <div style={{ width: "78%", height: "100%", background: "var(--accent)" }} />
      </div>
      <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 6 }}>78% to State Qualifier</div>
      <Overline style={{ color: "var(--text-secondary)", marginTop: 28 }}>RECENT MILESTONES</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          { d: "05.10", t: "First takedown on returning state champ" },
          { d: "04.26", t: "5-match win streak in scrambles" },
          { d: "04.12", t: "Hit 90 mat hours / quarter" },
          { d: "03.30", t: "Cleared cardio benchmark · 6 min flow" },
        ].map((m, i) => (
          <div key={i} style={{ display: "flex", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <Overline style={{ color: "var(--text-tertiary)", width: 60, flexShrink: 0 }}>{m.d}</Overline>
            <div style={{ flex: 1 }} className="t-body">{m.t}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

Object.assign(window, {
  ForgotPasswordScreen,
  InterestsScreen,
  NotificationsScreen,
  GymDetailScreen,
  ExploreScreen,
  SearchResultsScreen,
  CreatePostScreen,
  ParentDashboardScreen,
  EditProfileScreen,
  OrderHistoryScreen,
  WalletScreen,
  NotifPrefsScreen,
  ProductConfigScreen,
  MemberDashboardScreen,
  CheckinScreen,
  ProgressTrackerScreen,
});