// VEXEL — Teams, Team detail, Players, Player detail

// ─── TEAMS LIST ──────────────────────────────────────────────────────────────
function TeamsPage({ go }) {
  const [game, setGame] = useState("all");
  const [region, setRegion] = useState("all");
  const filtered = TEAMS.filter(t => (game === "all" || t.games.includes(game)) && (region === "all" || t.region === region));
  const featured = TEAMS[0];

  return (
    <main>
      <section className="shell" style={{ paddingTop: 48 }}>
        <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>The Roster · {TEAMS.length} active teams</div>
        <h1 className="t-display" style={{ fontSize: 88, marginTop: 8 }}>Teams.</h1>
        <p style={{ color: "var(--text-dim)", fontSize: 18, maxWidth: 600, marginTop: 8 }}>Every organisation playing on the Vexel platform. Sixteen across the GCC, ten countries, ten games.</p>
      </section>

      {/* Featured team — Apex */}
      <section className="shell" style={{ marginTop: 48 }}>
        <div className="t-eyebrow" style={{ color: "var(--magenta)", marginBottom: 12 }}>Team of the month</div>
        <div onClick={() => go("team", { id: featured.id })} style={{ cursor: "pointer", position: "relative", overflow: "hidden", border: "1px solid var(--line)", borderRadius: 8, minHeight: 320 }}>
          <img src={featured.banner} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.55 }} />
          <div style={{ position: "absolute", inset: 0, background: `linear-gradient(90deg, var(--ink) 20%, ${featured.color}30 60%, transparent 100%)` }} />
          <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />
          <div style={{ position: "relative", padding: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
            <div>
              <TeamLogo team={featured} size={88} />
              <h2 className="t-display" style={{ fontSize: 72, marginTop: 16, lineHeight: 0.9 }}>{featured.name}</h2>
              <div className="row" style={{ marginTop: 8, color: "var(--text-dim)" }}><Flag code={featured.region} size={18} /> {featured.region} · Founded 2023 · {featured.members} active players</div>
              <p style={{ marginTop: 16, fontSize: 18, color: "var(--text)", maxWidth: 500, fontStyle: "italic", color: "var(--cyan)" }}>"{featured.motto}"</p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
              {[["Win rate", featured.winRate + "%", "var(--lime)"], ["Active games", featured.games.length, "var(--cyan)"], ["Titles '26", "6", "var(--gold)"], ["World rank", "#14", "var(--magenta)"]].map(([l, v, c]) => (
                <div key={l} className="card-flat" style={{ padding: 20 }}>
                  <div className="t-eyebrow">{l}</div>
                  <div className="t-display" style={{ fontSize: 40, color: c, marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Filters */}
      <section className="shell" style={{ marginTop: 56 }}>
        <div className="row" style={{ gap: 24, marginBottom: 24, flexWrap: "wrap" }}>
          <div className="row" style={{ gap: 8 }}>
            <span className="t-eyebrow">Game</span>
            <select className="input" style={{ width: "auto", padding: "8px 12px" }} value={game} onChange={e => setGame(e.target.value)}>
              <option value="all">All games</option>
              {GAMES.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
            </select>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <span className="t-eyebrow">Region</span>
            <select className="input" style={{ width: "auto", padding: "8px 12px" }} value={region} onChange={e => setRegion(e.target.value)}>
              <option value="all">All regions</option>
              {[...new Set(TEAMS.map(t => t.region))].map(r => <option key={r}>{r}</option>)}
            </select>
          </div>
          <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginLeft: "auto" }}>{filtered.length} TEAMS</div>
        </div>

        <div className="grid-4">
          {filtered.map(t => (
            <div key={t.id} onClick={() => go("team", { id: t.id })} className="card lift" style={{ cursor: "pointer", overflow: "hidden" }}>
              <div style={{ position: "relative", aspectRatio: "16/10", overflow: "hidden", background: t.color }}>
                <img src={t.banner} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.45 }} />
                <div style={{ position: "absolute", inset: 0, background: `linear-gradient(135deg, ${t.color}40, transparent 50%, rgba(10,10,15,0.9))` }} />
                <div style={{ position: "absolute", bottom: 12, left: 12 }}><TeamLogo team={t} size={44} /></div>
                <div style={{ position: "absolute", top: 12, right: 12, display: "flex", gap: 4 }}>
                  {t.games.slice(0, 3).map(gid => <GameGlyph key={gid} game={gid} size={22} />)}
                </div>
              </div>
              <div style={{ padding: 16 }}>
                <div style={{ fontWeight: 700, fontSize: 16 }}>{t.name}</div>
                <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 2 }}><Flag code={t.region} size={12} /> {t.region} · {t.tag}</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--line)" }}>
                  <div><div className="t-eyebrow" style={{ fontSize: 9 }}>WIN%</div><div className="t-mono" style={{ fontSize: 14, color: "var(--lime)" }}>{t.winRate}</div></div>
                  <div><div className="t-eyebrow" style={{ fontSize: 9 }}>ROSTER</div><div className="t-mono" style={{ fontSize: 14 }}>{t.members}</div></div>
                  <div><div className="t-eyebrow" style={{ fontSize: 9 }}>GAMES</div><div className="t-mono" style={{ fontSize: 14, color: "var(--cyan)" }}>{t.games.length}</div></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

// ─── TEAM DETAIL ─────────────────────────────────────────────────────────────
function TeamDetailPage({ params, go }) {
  const t = TEAMS.find(x => x.id === params.id) || TEAMS[0];
  const roster = PLAYERS.filter(p => p.team === t.id).slice(0, 5);
  // Make sure we always have 5 — fall back to slicing PLAYERS
  const r5 = roster.length >= 5 ? roster.slice(0, 5) : PLAYERS.slice(0, 5).map(p => ({ ...p, team: t.id, region: t.region }));

  return (
    <main>
      {/* Cinematic hero */}
      <section style={{ position: "relative", minHeight: 460, overflow: "hidden" }}>
        <img src={t.banner} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.5 }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, transparent 0%, rgba(10,10,15,0.8) 70%, var(--ink) 100%), linear-gradient(90deg, ${t.color}40 0%, transparent 50%)` }} />
        <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />
        <div className="shell" style={{ position: "relative", padding: "72px 32px" }}>
          <div className="row" style={{ gap: 12, marginBottom: 12 }}>
            <Flag code={t.region} size={20} />
            <span className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)", letterSpacing: "0.15em" }}>{t.region} · FOUNDED 2023 · WORLD #14</span>
          </div>
          <div className="row" style={{ gap: 24 }}>
            <TeamLogo team={t} size={120} />
            <div>
              <h1 className="t-display" style={{ fontSize: "clamp(56px, 9vw, 128px)", lineHeight: 0.9 }}>{t.name}</h1>
              <p style={{ marginTop: 12, fontSize: 20, color: t.color, fontStyle: "italic" }}>"{t.motto}"</p>
            </div>
          </div>
          <div style={{ display: "flex", gap: 56, marginTop: 32, flexWrap: "wrap" }}>
            {[["Win rate", t.winRate + "%", "var(--lime)"], ["Roster", t.members, "var(--cyan)"], ["Titles '26", "6", "var(--gold)"], ["Earnings YTD", "AED 1.4M", "var(--magenta)"], ["Active games", t.games.length, "var(--white)"]].map(([l, v, c]) => (
              <div key={l}>
                <div className="t-eyebrow">{l}</div>
                <div className="t-mono" style={{ fontSize: 36, fontWeight: 700, color: c }}>{v}</div>
              </div>
            ))}
          </div>
          <div className="row" style={{ gap: 12, marginTop: 32 }}>
            <button className="btn btn-primary btn-lg">Follow team</button>
            <button className="btn btn-ghost btn-lg">Shop {t.tag} merch →</button>
          </div>
        </div>
      </section>

      {/* Roster */}
      <section className="shell" style={{ marginTop: 56 }}>
        <div className="sec-head">
          <div>
            <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>The starting five · Valorant roster</div>
            <h2>Roster</h2>
          </div>
          <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)" }}>UPDATED MAY 14, 2026</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16 }}>
          {r5.map(p => (
            <div key={p.id} onClick={() => go("player", { id: p.id })} className="card lift" style={{ cursor: "pointer", overflow: "hidden", position: "relative" }}>
              <div style={{ position: "relative", aspectRatio: "3/4", background: "var(--surface-2)" }}>
                <img src={p.photo} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, transparent 30%, ${t.color}40 70%, var(--ink) 100%)` }} />
                <div style={{ position: "absolute", top: 12, right: 12, padding: "4px 8px", background: "rgba(10,10,15,0.7)", borderRadius: 2 }}>
                  <span className="t-mono" style={{ fontSize: 10, color: "var(--cyan)" }}>{p.role.toUpperCase()}</span>
                </div>
                <div style={{ position: "absolute", bottom: 12, left: 12, right: 12 }}>
                  <div className="t-mono" style={{ fontSize: 10, color: "var(--text-dim)" }}>#{p.rank} · {p.region}</div>
                  <div className="t-display" style={{ fontSize: 28, marginTop: 4, lineHeight: 0.9, color: "var(--white)" }}>{p.handle}</div>
                  <div style={{ fontSize: 12, color: "var(--text-dim)", marginTop: 2 }}>{p.realName}</div>
                </div>
              </div>
              <div style={{ padding: 12, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4 }}>
                <div><div className="t-eyebrow" style={{ fontSize: 9 }}>K/D</div><div className="t-mono" style={{ fontSize: 13, color: "var(--cyan)" }}>{p.kd}</div></div>
                <div><div className="t-eyebrow" style={{ fontSize: 9 }}>WIN%</div><div className="t-mono" style={{ fontSize: 13, color: "var(--lime)" }}>{p.winRate}%</div></div>
                <div><div className="t-eyebrow" style={{ fontSize: 9 }}>RATING</div><div className="t-mono" style={{ fontSize: 13 }}>{p.points}</div></div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Trophy + matches grid */}
      <section className="shell" style={{ marginTop: 80, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32 }}>
        {/* Trophy case */}
        <div>
          <h2 className="t-display" style={{ fontSize: 28, marginBottom: 16 }}>Trophy case · 2026</h2>
          <div className="card-flat">
            {[
              ["Vexel Spring Open", "1st", "AED 270,000", "VAL", "Apr 18"],
              ["GCC Pro League S3", "1st", "AED 180,000", "VAL", "Mar 22"],
              ["Riyadh Major Qualifier", "1st", "AED 120,000", "CS2", "Mar 04"],
              ["Vexel FIFA Cup", "2nd", "AED 32,000", "FC25", "Feb 14"],
              ["Falcon League S2", "1st", "AED 95,000", "DOTA", "Feb 02"],
              ["Vexel Winter Open", "3rd–4th", "AED 28,000", "VAL", "Jan 18"],
            ].map(([n, p, e, g, d], i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr 80px 1fr 100px", padding: "14px 18px", borderBottom: "1px solid var(--line)", alignItems: "center", gap: 12 }}>
                <span className="t-display" style={{ fontSize: 24, color: p === "1st" ? "var(--gold)" : p === "2nd" ? "var(--cyan)" : "var(--text-dim)" }}>{p}</span>
                <div>
                  <div style={{ fontWeight: 600 }}>{n}</div>
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{g}</div>
                </div>
                <span className="t-mono" style={{ fontSize: 13, color: "var(--cyan)" }}>{e}</span>
                <span />
                <span className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", textAlign: "right" }}>{d}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Upcoming + results */}
        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          <div>
            <h3 className="t-display" style={{ fontSize: 22, marginBottom: 12 }}>Upcoming matches</h3>
            <div className="card-flat">
              {[["May 21 · 16:00", "Falcons GG", "VAL", "Semi-final · Bo5"], ["May 23 · 20:00", "TBD", "VAL", "Grand Final · Bo7"], ["Jun 02 · 18:00", "Cairo Sphinx", "DOTA", "Group A · Bo3"]].map((m, i) => (
                <div key={i} style={{ padding: "14px 18px", borderBottom: i < 2 ? "1px solid var(--line)" : "none" }}>
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--cyan)" }}>{m[0]}</div>
                  <div style={{ fontWeight: 600, marginTop: 4 }}>vs {m[1]}</div>
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{m[2]} · {m[3]}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <h3 className="t-display" style={{ fontSize: 22, marginBottom: 12 }}>Recent results</h3>
            <div className="card-flat">
              {[
                ["MAY 18", "vs Mirage Collective", "2-1", true],
                ["MAY 16", "vs Dune Wolves", "2-0", true],
                ["MAY 12", "vs Beirut Bullets", "1-2", false],
                ["MAY 09", "vs Riyadh Royals", "2-0", true],
                ["MAY 05", "vs Cairo Sphinx", "2-1", true],
              ].map(([d, m, s, w], i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "70px 1fr 60px 50px", gap: 12, padding: "12px 18px", borderBottom: i < 4 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
                  <span className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>{d}</span>
                  <span style={{ fontSize: 13 }}>{m}</span>
                  <span className="t-mono" style={{ fontWeight: 700, color: w ? "var(--lime)" : "var(--red)" }}>{s}</span>
                  <span className={"pill " + (w ? "pill-win" : "pill-past")} style={{ fontSize: 10, padding: "2px 8px", justifyContent: "center" }}>{w ? "W" : "L"}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Stats panel */}
      <section className="shell" style={{ marginTop: 80 }}>
        <h2 className="t-display" style={{ fontSize: 32, marginBottom: 16 }}>Team stats · last 50 matches</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16 }}>
          {[
            ["Matches", "50"], ["Wins", "39"], ["Losses", "11"], ["Map win %", "72.4"], ["Avg. round diff", "+4.2"], ["Pistol round %", "63"]
          ].map(([l, v]) => (
            <div key={l} className="card-flat" style={{ padding: 20 }}>
              <div className="t-eyebrow">{l}</div>
              <div className="t-display" style={{ fontSize: 36, color: "var(--cyan)", marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

// ─── PLAYERS / RANKINGS ──────────────────────────────────────────────────────
function PlayersPage({ go }) {
  const [scope, setScope] = useState("global");
  const [game, setGame] = useState("all");
  const [role, setRole] = useState("all");
  const [hover, setHover] = useState(null);

  let list = PLAYERS.filter(p => (game === "all" || p.game === game) && (role === "all" || p.role === role));
  if (scope === "gcc") list = list.filter(p => ["UAE", "KSA", "QAT", "KWT", "OMN", "BHR"].includes(p.region));
  if (scope === "uae") list = list.filter(p => p.region === "UAE");

  return (
    <main>
      <section className="shell" style={{ paddingTop: 48 }}>
        <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Live · Season 03</div>
        <h1 className="t-display" style={{ fontSize: 88, marginTop: 8 }}>Rankings.</h1>
        <p style={{ color: "var(--text-dim)", fontSize: 18, marginTop: 8, maxWidth: 600 }}>The top 100 players on the Vexel platform. Updated every 24 hours. Tiebreakers: rating, head-to-head, K/D.</p>
      </section>

      {/* Tabs + filters */}
      <section className="shell" style={{ marginTop: 32 }}>
        <div className="row" style={{ borderBottom: "1px solid var(--line)", marginBottom: 24 }}>
          {[["global", "GLOBAL"], ["gcc", "GCC ONLY"], ["uae", "UAE ONLY"]].map(([k, l]) => (
            <button key={k} className={"tab" + (scope === k ? " active" : "")} onClick={() => setScope(k)}>{l}</button>
          ))}
          <div style={{ marginLeft: "auto", display: "flex", gap: 12, padding: "0 0 12px" }}>
            <select className="input" style={{ width: "auto", padding: "8px 12px" }} value={game} onChange={e => setGame(e.target.value)}>
              <option value="all">All games</option>
              {GAMES.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
            </select>
            <select className="input" style={{ width: "auto", padding: "8px 12px" }} value={role} onChange={e => setRole(e.target.value)}>
              <option value="all">All roles</option>
              {[...new Set(Object.values(ROLES || {}).flat())].filter(Boolean).map(r => <option key={r}>{r}</option>)}
            </select>
          </div>
        </div>

        <div className="card-flat" style={{ overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 120px 1fr 70px 90px 80px 100px 90px", padding: "12px 20px", borderBottom: "1px solid var(--line)", fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-mute)", letterSpacing: "0.1em" }}>
            <span>RANK</span><span>PLAYER</span><span>REGION</span><span>TEAM</span><span>GAME</span><span>ROLE</span><span>K/D</span><span>RATING</span><span>WIN %</span>
          </div>
          {list.slice(0, 32).map((p, i) => {
            const team = teamById(p.team);
            const isTop3 = p.rank <= 3;
            return (
              <div key={p.id} onClick={() => go("player", { id: p.id })} onMouseEnter={() => setHover(p.id)} onMouseLeave={() => setHover(null)}
                style={{ display: "grid", gridTemplateColumns: "60px 1fr 120px 1fr 70px 90px 80px 100px 90px", padding: "14px 20px", borderBottom: "1px solid var(--line)", alignItems: "center", cursor: "pointer", background: hover === p.id ? "var(--surface-2)" : "transparent", transition: "background 0.1s", position: "relative" }}>
                <div className="row" style={{ gap: 6 }}>
                  {isTop3 ? (
                    <span className="t-display" style={{ fontSize: 20, color: p.rank === 1 ? "var(--gold)" : p.rank === 2 ? "var(--cyan)" : "var(--magenta)" }}>{p.rank}</span>
                  ) : (
                    <span className="t-mono" style={{ color: "var(--text-mute)" }}>{String(p.rank).padStart(2, "0")}</span>
                  )}
                  <span style={{ fontSize: 11, color: i % 3 === 0 ? "var(--lime)" : i % 5 === 0 ? "var(--red)" : "var(--text-mute)" }}>
                    {i % 3 === 0 ? "▲" : i % 5 === 0 ? "▼" : "—"}
                  </span>
                </div>
                <div className="row" style={{ gap: 10 }}>
                  <div style={{ width: 32, height: 32, borderRadius: "50%", background: `linear-gradient(135deg, ${team.color}, var(--ink))`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700 }}>{p.handle[0]}</div>
                  <div>
                    <div style={{ fontWeight: 700 }}>{p.handle}</div>
                    {hover === p.id && <div className="t-mono" style={{ fontSize: 10, color: "var(--text-mute)" }}>{p.realName}</div>}
                  </div>
                </div>
                <div className="row" style={{ gap: 6 }}><Flag code={p.region} size={14} /><span className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>{p.region}</span></div>
                <div className="row" style={{ gap: 8 }}><TeamLogo team={team} size={20} /><span style={{ fontSize: 13, color: team.color }}>{team.tag}</span></div>
                <div><GameGlyph game={p.game} size={20} /></div>
                <span className="t-mono" style={{ fontSize: 12 }}>{p.role}</span>
                <span className="t-mono" style={{ fontSize: 13, color: "var(--cyan)" }}>{p.kd}</span>
                <span className="t-mono" style={{ fontSize: 13, color: "var(--magenta)", fontWeight: 700 }}>{p.points}</span>
                <span className="t-mono" style={{ fontSize: 13, color: "var(--lime)" }}>{p.winRate}%</span>
              </div>
            );
          })}
        </div>
      </section>
    </main>
  );
}

// ─── PLAYER DETAIL ───────────────────────────────────────────────────────────
function PlayerDetailPage({ params, go }) {
  const p = PLAYERS.find(x => x.id === params.id) || PLAYERS[0];
  const team = teamById(p.team);
  const game = gameById(p.game);

  return (
    <main>
      {/* Hero */}
      <section style={{ position: "relative", minHeight: 540, overflow: "hidden", background: "var(--ink-2)" }}>
        <img src={p.photo} alt="" style={{ position: "absolute", right: 0, top: 0, width: "60%", height: "100%", objectFit: "cover", opacity: 0.7 }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(90deg, var(--ink) 30%, rgba(10,10,15,0.4) 70%, transparent 100%), linear-gradient(180deg, transparent 0%, var(--ink) 100%)` }} />
        <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />
        <div className="shell" style={{ position: "relative", padding: "72px 32px" }}>
          <div className="row" style={{ marginBottom: 12 }}>
            <Flag code={p.region} size={20} />
            <span className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)", letterSpacing: "0.15em" }}>{p.region} · WORLD RANK #{String(p.rank).padStart(3, "0")}</span>
          </div>
          <div className="row" style={{ gap: 12 }}>
            <GameGlyph game={game} size={40} />
            <TeamLogo team={team} size={40} />
            <span className="t-mono" style={{ color: team.color, letterSpacing: "0.1em" }}>{team.name.toUpperCase()} · {p.role.toUpperCase()}</span>
          </div>
          <h1 className="t-display" style={{ fontSize: "clamp(72px, 12vw, 200px)", lineHeight: 0.85, marginTop: 16, color: "var(--white)" }}>{p.handle}</h1>
          <p style={{ fontSize: 20, color: "var(--text-dim)", marginTop: 12 }}>{p.realName} · {game.name}</p>
          <div className="row" style={{ gap: 12, marginTop: 32 }}>
            <button className="btn btn-primary">Follow</button>
            <button className="btn btn-ghost">Match history →</button>
            <button className="btn btn-dark">Share profile</button>
          </div>
        </div>
      </section>

      {/* Career stats */}
      <section className="shell" style={{ marginTop: -40, position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 0, border: "1px solid var(--line)", borderRadius: 8, overflow: "hidden", background: "var(--surface)" }}>
          {[
            ["Career matches", "1,248", null],
            ["Win rate", p.winRate + "%", "var(--lime)"],
            ["K/D", p.kd, "var(--cyan)"],
            ["Peak rank", "#" + Math.max(1, p.rank - 3), "var(--gold)"],
            ["Prize money", "AED " + p.earnings.toLocaleString(), "var(--magenta)"],
            ["Rating", p.points, "var(--white)"],
          ].map(([l, v, c], i) => (
            <div key={l} style={{ padding: 24, borderLeft: i ? "1px solid var(--line)" : "none" }}>
              <div className="t-eyebrow">{l}</div>
              <div className="t-display" style={{ fontSize: 40, marginTop: 6, color: c || "var(--white)" }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Recent matches + highlights */}
      <section className="shell" style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32 }}>
        <div>
          <h2 className="t-display" style={{ fontSize: 28, marginBottom: 16 }}>Recent matches</h2>
          <div className="card-flat">
            <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr 100px 90px 60px", padding: "12px 20px", borderBottom: "1px solid var(--line)", fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-mute)", letterSpacing: "0.1em" }}>
              <span>DATE</span><span>EVENT</span><span>vs</span><span>K/D/A</span><span>RATING</span><span>RESULT</span>
            </div>
            {[
              ["MAY 18", "Vexel Spring Open · QF", "Mirage Collective", "24/14/8", "1.62", true],
              ["MAY 16", "Vexel Spring Open · R16", "Dune Wolves", "29/8/4", "2.18", true],
              ["MAY 14", "Vexel Spring Open · Group", "Beirut Bullets", "18/16/11", "1.04", false],
              ["MAY 09", "GCC Pro League S3 · Final", "Riyadh Royals", "31/11/6", "1.94", true],
              ["MAY 05", "GCC Pro League S3 · SF", "Cairo Sphinx", "22/15/9", "1.32", true],
              ["MAY 02", "GCC Pro League S3 · QF", "Bedouin Black", "26/12/5", "1.71", true],
              ["APR 28", "Vexel Open · Final", "Doha Demons", "19/17/12", "1.06", false],
              ["APR 25", "Vexel Open · SF", "Falcons GG", "33/14/8", "2.04", true],
            ].map((m, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr 100px 90px 60px", padding: "14px 20px", borderBottom: i < 7 ? "1px solid var(--line)" : "none", alignItems: "center", fontSize: 13 }}>
                <span className="t-mono" style={{ color: "var(--text-mute)", fontSize: 11 }}>{m[0]}</span>
                <span>{m[1]}</span>
                <span style={{ color: "var(--text-dim)" }}>{m[2]}</span>
                <span className="t-mono" style={{ color: "var(--cyan)" }}>{m[3]}</span>
                <span className="t-mono" style={{ color: m[4] >= "1.5" ? "var(--lime)" : m[4] >= "1.2" ? "var(--cyan)" : "var(--text)", fontWeight: 700 }}>{m[4]}</span>
                <span className={"pill " + (m[5] ? "pill-win" : "pill-past")} style={{ fontSize: 10, padding: "2px 8px", justifyContent: "center" }}>{m[5] ? "W" : "L"}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <h2 className="t-display" style={{ fontSize: 28, marginBottom: 16 }}>Highlight reel</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {[
              ["5K Ace · Ascent", "2:14", PHOTOS.gamer1],
              ["1v3 Clutch · Bind", "0:48", PHOTOS.gamer2],
              ["The Wallbang · Haven", "1:02", PHOTOS.gamer3],
              ["Triple Headshot · Pearl", "0:32", PHOTOS.gamer4],
              ["Operator Show · Split", "1:48", PHOTOS.gamer5],
              ["The Final Round", "3:11", PHOTOS.setup1],
            ].map(([title, dur, img]) => (
              <div key={title} className="card lift" style={{ cursor: "pointer", overflow: "hidden", position: "relative", aspectRatio: "16/10" }}>
                <img src={img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.7 }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 30%, rgba(10,10,15,0.9) 100%)" }} />
                <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <div style={{ width: 44, height: 44, borderRadius: "50%", background: "rgba(0,229,255,0.3)", border: "1px solid var(--cyan)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14, color: "var(--cyan)" }}>▶</div>
                </div>
                <div style={{ position: "absolute", bottom: 10, left: 10, right: 10, fontSize: 12, fontWeight: 600, color: "var(--white)" }}>{title}</div>
                <div style={{ position: "absolute", top: 8, right: 8, padding: "2px 6px", background: "rgba(10,10,15,0.85)", borderRadius: 2, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--white)" }}>{dur}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stream + about */}
      <section className="shell" style={{ marginTop: 64, display: "grid", gridTemplateColumns: "2fr 1fr", gap: 32 }}>
        <div>
          <h2 className="t-display" style={{ fontSize: 28, marginBottom: 16 }}>Live on Twitch</h2>
          <div style={{ position: "relative", aspectRatio: "16/9", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 4, overflow: "hidden" }}>
            <img src={PHOTOS.setup2} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.7 }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(10,10,15,0.9) 100%)" }} />
            <div style={{ position: "absolute", top: 16, left: 16 }}><LiveBadge>LIVE · 2.4K WATCHING</LiveBadge></div>
            <div style={{ position: "absolute", bottom: 16, left: 16 }}>
              <div style={{ fontWeight: 700, fontSize: 18 }}>Late-night Valorant ranked grind</div>
              <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 4 }}>VALORANT · TWITCH.TV/{p.handle.toUpperCase()}</div>
            </div>
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <div style={{ width: 56, height: 56, borderRadius: "50%", background: "rgba(255,45,135,0.4)", border: "1px solid var(--magenta)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18, color: "var(--magenta)" }}>▶</div>
            </div>
          </div>
        </div>
        <div>
          <h2 className="t-display" style={{ fontSize: 28, marginBottom: 16 }}>About</h2>
          <div className="card-flat" style={{ padding: 24 }}>
            <p style={{ color: "var(--text-dim)", fontSize: 14 }}>
              {p.realName} ({p.handle}) is a {p.role} for {team.name} and one of the {p.region}'s top-rated {game.name} players. Known for ice-cold clutches, brutal AWP picks under pressure, and the kind of out-of-meta picks that decide tournaments.
            </p>
            <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {[["Age", "21"], ["Joined", "Apr 2024"], ["Sensitivity", "0.42"], ["DPI", "800"]].map(([l, v]) => (
                <div key={l} style={{ padding: "10px 12px", background: "var(--surface-2)", borderRadius: 2 }}>
                  <div className="t-eyebrow" style={{ fontSize: 9 }}>{l}</div>
                  <div className="t-mono" style={{ fontSize: 14, marginTop: 2 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
              <div className="t-eyebrow" style={{ marginBottom: 8 }}>Socials</div>
              <div className="row" style={{ gap: 8 }}>
                {["𝕏 Twitter", "Twitch", "YouTube", "Discord"].map(s => (
                  <span key={s} className="pill pill-past" style={{ fontSize: 11 }}>{s}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { TeamsPage, TeamDetailPage, PlayersPage, PlayerDetailPage });