// VEXEL — Home, Tournaments, Tournament detail, Live
const { useState: _u, useEffect: _e, useMemo: _m } = React;

// ─── Tournament card ─────────────────────────────────────────────────────────
function TournamentCard({ t, go, variant = "default", currency = "AED" }) {
  const g = gameById(t.game);
  const price = currency === "AED" ? fmtAED(t.prize) : fmtUSD(t.prize);
  return (
    <div className="card lift sweep" onClick={() => go("tournament", { id: t.id })} style={{ cursor: "pointer", position: "relative" }}>
      <div style={{ position: "relative", aspectRatio: "16/10", overflow: "hidden", background: "var(--surface-2)" }}>
        <img src={t.banner} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.7 }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(135deg, ${g.color}80 0%, transparent 50%), linear-gradient(180deg, transparent 50%, var(--ink) 100%)` }} />
        <div style={{ position: "absolute", top: 12, left: 12, display: "flex", gap: 6 }}>
          {t.status === "live" && <LiveBadge />}
          {t.status === "upcoming" && <span className="pill pill-up">Upcoming</span>}
          {t.status === "past" && <span className="pill pill-past">Past</span>}
        </div>
        <div style={{ position: "absolute", top: 12, right: 12 }}><GameGlyph game={g} size={28} /></div>
        <div style={{ position: "absolute", bottom: 12, left: 12, right: 12 }}>
          <div className="t-mono" style={{ fontSize: 10, color: "var(--text-dim)", letterSpacing: "0.12em" }}>{g.name.toUpperCase()} · {t.format.toUpperCase()}</div>
          <div className="t-display" style={{ fontSize: 22, color: "var(--white)", marginTop: 4, textWrap: "balance" }}>{t.name}</div>
        </div>
      </div>
      <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
        <div className="spread">
          <div>
            <div className="t-eyebrow">Prize Pool</div>
            <div className="t-mono" style={{ fontSize: 20, fontWeight: 700, color: "var(--cyan)" }}>{price}</div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="t-eyebrow">Dates</div>
            <div className="t-mono" style={{ fontSize: 13 }}>{t.date}</div>
          </div>
        </div>
        <div className="spread" style={{ paddingTop: 10, borderTop: "1px solid var(--line)" }}>
          <span className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>{t.teams} TEAMS · {t.region}</span>
          {t.status === "live" ? (
            <span className="btn btn-primary btn-sm">Watch</span>
          ) : t.status === "upcoming" ? (
            <span className="btn btn-ghost btn-sm">Register</span>
          ) : (
            <span className="btn btn-dark btn-sm">Results</span>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── HOME ────────────────────────────────────────────────────────────────────
function HomePage({ go, currency }) {
  const featured = TOURNAMENTS.find(t => t.featured) || TOURNAMENTS[0];
  const liveT = TOURNAMENTS.filter(t => t.status === "live");
  const thisWeek = TOURNAMENTS.slice(0, 8);
  const topTeam = TEAMS[1]; // Falcons
  const topPlayer = PLAYERS[0];

  return (
    <main>
      {/* ─── HERO ──────────────────────────── */}
      <section style={{ position: "relative", minHeight: "calc(100vh - 100px)", display: "flex", alignItems: "center", overflow: "hidden", background: "var(--ink)" }}>
        {/* bg layers */}
        <div className="bg-grid" style={{ position: "absolute", inset: 0, opacity: 0.6 }} />
        <img src={PHOTOS.crowd1} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.25, mixBlendMode: "screen" }} />
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 70% 50%, rgba(0,229,255,0.15) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(255,45,135,0.15) 0%, transparent 50%)" }} />
        <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />

        {/* Side numbers */}
        <div style={{ position: "absolute", top: 80, left: 24, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.15em" }}>
          <div>VXL // DUBAI · GULF · 2026</div>
          <div style={{ marginTop: 4 }}>LIVE · {liveT.length} EVENTS</div>
        </div>
        <div style={{ position: "absolute", top: 80, right: 24, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.15em", textAlign: "right" }}>
          <div>SEASON 03 · OPEN BRACKET</div>
          <div style={{ marginTop: 4, color: "var(--cyan)" }}>SIGN-UPS OPEN</div>
        </div>

        <div className="shell" style={{ position: "relative", paddingTop: 80, paddingBottom: 80, width: "100%" }}>
          <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Vexel · Season 03 · Spring–Summer 2026</div>
          <h1 className="t-display" style={{ fontSize: "clamp(64px, 11vw, 168px)", marginTop: 12, textWrap: "balance" }}>
            Where the <span className="italic-accent" style={{ fontStyle: "italic" }}>Gulf</span> plays.
          </h1>
          <p style={{ maxWidth: 640, marginTop: 24, fontSize: 18, color: "var(--text-dim)" }}>
            The competitive home for the region's strongest rosters. Tournaments, rankings, broadcasts, and a player pipeline built out of Dubai — not flown in for it.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
            <button className="btn btn-primary btn-lg" onClick={() => go("live")}>
              <span className="dot-live" style={{ background: "var(--ink)" }} /> Watch live
            </button>
            <button className="btn btn-ghost btn-lg" onClick={() => go("tournaments")}>Browse tournaments →</button>
          </div>

          {/* Stat strip */}
          <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
            {[
              ["12,400", "Active players"],
              [currency === "AED" ? "AED 4.2M" : "$1.14M", "Prize pool '26"],
              ["38", "Tournaments running"],
              ["7", "Partner publishers"],
            ].map(([n, l], i) => (
              <div key={l} style={{ padding: "24px 16px", borderLeft: i ? "1px solid var(--line)" : "none" }}>
                <div className="t-display" style={{ fontSize: 40, color: "var(--cyan)" }}>{n}</div>
                <div className="t-eyebrow" style={{ marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── 3-TILE FEATURED ───────────────── */}
      <section className="shell" style={{ marginTop: 80 }}>
        <div className="sec-head">
          <h2>The Spotlight<span style={{ color: "var(--cyan)" }}>.</span></h2>
          <div className="t-eyebrow">Updated 11 minutes ago</div>
        </div>
        <div className="grid-3">
          {/* Next tournament */}
          <div onClick={() => go("tournament", { id: featured.id })} className="card lift" style={{ cursor: "pointer", position: "relative", overflow: "hidden", aspectRatio: "1/1.05" }}>
            <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(180deg, transparent 0%, rgba(10,10,15,0.9) 70%, var(--ink) 100%)" }} />
            <div style={{ position: "relative", padding: 20, height: "100%", display: "flex", flexDirection: "column" }}>
              <div className="row" style={{ justifyContent: "space-between" }}>
                <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Next on the calendar</div>
                {featured.status === "live" && <LiveBadge />}
              </div>
              <div style={{ flex: 1 }} />
              <GameGlyph game={featured.game} size={40} />
              <div className="t-display" style={{ fontSize: 36, marginTop: 12, lineHeight: 0.9, textWrap: "balance" }}>{featured.name}</div>
              <div style={{ marginTop: 12 }}>
                <div className="t-eyebrow">Prize Pool</div>
                <div className="t-mono" style={{ fontSize: 28, color: "var(--cyan)", fontWeight: 700 }}>{currency === "AED" ? fmtAED(featured.prize) : fmtUSD(featured.prize)}</div>
              </div>
              <Countdown targetDays={3} />
            </div>
          </div>

          {/* Top team */}
          <div onClick={() => go("team", { id: topTeam.id })} className="card lift" style={{ cursor: "pointer", position: "relative", overflow: "hidden", aspectRatio: "1/1.05" }}>
            <img src={topTeam.banner} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.4 }} />
            <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, transparent 0%, ${topTeam.color}30 50%, var(--ink) 100%)` }} />
            <div style={{ position: "relative", padding: 20, height: "100%", display: "flex", flexDirection: "column" }}>
              <div className="t-eyebrow" style={{ color: topTeam.color }}>Top team · this week</div>
              <div style={{ flex: 1 }} />
              <TeamLogo team={topTeam} size={56} />
              <div className="t-display" style={{ fontSize: 36, marginTop: 12, lineHeight: 0.9 }}>{topTeam.name}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8, color: "var(--text-dim)", fontSize: 13 }}>
                <Flag code={topTeam.region} /> {topTeam.region} · {topTeam.members} active players
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                <div><div className="t-eyebrow">Win rate</div><div className="t-mono" style={{ fontSize: 18, color: "var(--lime)" }}>{topTeam.winRate}%</div></div>
                <div><div className="t-eyebrow">Streak</div><div className="t-mono" style={{ fontSize: 18 }}>W7</div></div>
                <div><div className="t-eyebrow">Rank</div><div className="t-mono" style={{ fontSize: 18, color: "var(--gold)" }}>#1</div></div>
              </div>
            </div>
          </div>

          {/* Player of the week */}
          <div onClick={() => go("player", { id: topPlayer.id })} className="card lift" style={{ cursor: "pointer", position: "relative", overflow: "hidden", aspectRatio: "1/1.05" }}>
            <img src={topPlayer.photo} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.6 }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 0%, rgba(10,10,15,0.85) 70%, var(--ink) 100%)" }} />
            <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />
            <div style={{ position: "relative", padding: 20, height: "100%", display: "flex", flexDirection: "column" }}>
              <div className="t-eyebrow" style={{ color: "var(--magenta)" }}>Player of the week</div>
              <div style={{ flex: 1 }} />
              <div className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>#{topPlayer.rank} · {gameById(topPlayer.game).name.toUpperCase()}</div>
              <div className="t-display" style={{ fontSize: 56, marginTop: 4, lineHeight: 0.85, color: "var(--white)" }}>{topPlayer.handle}</div>
              <div style={{ marginTop: 4, color: "var(--text-dim)" }}>{topPlayer.realName} · <span style={{ color: teamById(topPlayer.team).color }}>{teamById(topPlayer.team).tag}</span></div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                <div><div className="t-eyebrow">K/D</div><div className="t-mono" style={{ fontSize: 18, color: "var(--cyan)" }}>{topPlayer.kd}</div></div>
                <div><div className="t-eyebrow">Win %</div><div className="t-mono" style={{ fontSize: 18, color: "var(--lime)" }}>{topPlayer.winRate}%</div></div>
                <div><div className="t-eyebrow">Rating</div><div className="t-mono" style={{ fontSize: 18 }}>{topPlayer.points}</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─── THIS WEEK GRID ─────────────────── */}
      <section className="shell" style={{ marginTop: 80 }}>
        <div className="sec-head">
          <div>
            <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Live + Upcoming</div>
            <h2>Tournaments running this week</h2>
          </div>
          <button className="btn btn-dark btn-sm" onClick={() => go("tournaments")}>View all 38 →</button>
        </div>
        <div className="grid-4">
          {thisWeek.map(t => <TournamentCard key={t.id} t={t} go={go} currency={currency} />)}
        </div>
      </section>

      {/* ─── TEAM SPOTLIGHT ─────────────────── */}
      <section style={{ marginTop: 120, position: "relative", overflow: "hidden", background: "var(--ink-2)" }}>
        <img src={TEAMS[0].banner} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.35 }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(90deg, var(--ink) 0%, rgba(10,10,15,0.5) 50%, transparent 100%)` }} />
        <div className="shell" style={{ position: "relative", padding: "120px 32px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="t-eyebrow" style={{ color: "var(--magenta)" }}>Team spotlight · May</div>
            <TeamLogo team={TEAMS[0]} size={72} />
            <h2 className="t-display" style={{ fontSize: 88, marginTop: 16, lineHeight: 0.9 }}>Apex<br/><span style={{ color: TEAMS[0].color, fontStyle: "italic" }}>Esports</span></h2>
            <p style={{ fontSize: 18, color: "var(--text-dim)", marginTop: 16, maxWidth: 460 }}>
              "{TEAMS[0].motto}" — Six titles in eight months, the deepest bench in the GCC, and a Valorant roster currently sitting at world #14 on the official VCT ladder.
            </p>
            <div style={{ display: "flex", gap: 32, marginTop: 32 }}>
              {[["6", "Titles '26"], ["AED 1.4M", "Earnings YTD"], ["78%", "Win rate"], ["#14", "VCT World"]].map(([v, l]) => (
                <div key={l}>
                  <div className="t-display" style={{ fontSize: 32, color: "var(--cyan)" }}>{v}</div>
                  <div className="t-eyebrow" style={{ marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
            <button onClick={() => go("team", { id: TEAMS[0].id })} className="btn btn-primary btn-lg" style={{ marginTop: 32 }}>Full team profile →</button>
          </div>
          <div />
        </div>
      </section>

      {/* ─── NEWS PREVIEW ───────────────────── */}
      <section className="shell" style={{ marginTop: 120 }}>
        <div className="sec-head">
          <div>
            <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>The Drop · Journal</div>
            <h2>News & long-form</h2>
          </div>
          <button className="btn btn-dark btn-sm" onClick={() => go("news")}>All stories →</button>
        </div>
        <div className="grid-3">
          {NEWS.slice(0, 6).map(n => (
            <article key={n.id} onClick={() => go("article", { id: n.id })} className="card lift" style={{ cursor: "pointer" }}>
              <div style={{ aspectRatio: "16/10", overflow: "hidden", background: "var(--surface-2)" }}>
                <img src={n.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform 0.4s" }} />
              </div>
              <div style={{ padding: 18 }}>
                <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>{n.category} · {n.read}</div>
                <h3 style={{ marginTop: 8, fontSize: 18, fontWeight: 700, textWrap: "balance", lineHeight: 1.2 }}>{n.title}</h3>
                <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 12 }}>{n.author.toUpperCase()} · {n.date}</div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ─── DUBAI PROMO STRIP ──────────────── */}
      <section style={{ marginTop: 120, position: "relative", overflow: "hidden", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <img src={PHOTOS.dubai1} alt="" style={{ width: "100%", height: 420, objectFit: "cover", opacity: 0.6 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 0%, rgba(10,10,15,0.7) 100%)" }} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end" }}>
          <div className="shell" style={{ paddingBottom: 56 }}>
            <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Built in Dubai</div>
            <h2 className="t-display" style={{ fontSize: 72, marginTop: 8, maxWidth: 900 }}>The Gulf gaming scene is about to <span className="italic-accent">explode</span>.</h2>
            <p style={{ color: "var(--text-dim)", marginTop: 12, fontSize: 18, maxWidth: 640 }}>Vexel is the operating system for what comes next — a region-first platform, owned and operated out of the UAE.</p>
            <button onClick={() => go("about")} className="btn btn-ghost btn-lg" style={{ marginTop: 24 }}>Our story →</button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── TOURNAMENTS LIST ────────────────────────────────────────────────────────
function TournamentsPage({ go, currency }) {
  const [game, setGame] = _u("all");
  const [status, setStatus] = _u("all");
  const [format, setFormat] = _u("all");
  const [region, setRegion] = _u("all");
  const [view, setView] = _u("grid");
  const [sort, setSort] = _u("prize");
  const [page, setPage] = _u(1);

  let list = TOURNAMENTS.filter(t => (game === "all" || t.game === game) && (status === "all" || t.status === status) && (format === "all" || t.format.toLowerCase().includes(format.toLowerCase())) && (region === "all" || t.region === region));
  if (sort === "prize") list = [...list].sort((a, b) => b.prize - a.prize);
  if (sort === "soon") list = [...list].sort((a, b) => (a.status === "live" ? -1 : 1));

  const featured = TOURNAMENTS.find(t => t.featured);

  return (
    <main>
      {/* Featured banner */}
      <section style={{ position: "relative", overflow: "hidden", background: "var(--ink-2)", borderBottom: "1px solid var(--line)" }}>
        <img src={featured.banner} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.45 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--ink) 30%, rgba(10,10,15,0.4) 80%, transparent)" }} />
        <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />
        <div className="shell" style={{ position: "relative", padding: "72px 32px", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "center" }}>
          <div>
            <div className="row" style={{ marginBottom: 12 }}><LiveBadge>LIVE NOW · DAY 6</LiveBadge></div>
            <div className="row" style={{ gap: 12 }}><GameGlyph game={featured.game} size={36} /><span className="t-mono" style={{ color: "var(--text-dim)", letterSpacing: "0.15em", fontSize: 12 }}>{gameById(featured.game).name.toUpperCase()} · BEST-OF-FIVE BRACKET</span></div>
            <h1 className="t-display" style={{ fontSize: 96, marginTop: 12, lineHeight: 0.9 }}>{featured.name}</h1>
            <div style={{ display: "flex", gap: 48, marginTop: 24 }}>
              <div><div className="t-eyebrow">Prize Pool</div><div className="t-mono" style={{ fontSize: 32, color: "var(--cyan)", fontWeight: 700 }}>{currency === "AED" ? fmtAED(featured.prize) : fmtUSD(featured.prize)}</div></div>
              <div><div className="t-eyebrow">Teams</div><div className="t-mono" style={{ fontSize: 32 }}>{featured.teams}</div></div>
              <div><div className="t-eyebrow">Viewers</div><div className="t-mono" style={{ fontSize: 32, color: "var(--orange)" }}><NumberTicker value={featured.viewers || 48200} /></div></div>
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
              <button onClick={() => go("tournament", { id: featured.id })} className="btn btn-primary btn-lg">View tournament →</button>
              <button className="btn btn-ghost btn-lg">Watch stream</button>
            </div>
          </div>
        </div>
      </section>

      <div className="shell" style={{ marginTop: 40, display: "grid", gridTemplateColumns: "240px 1fr", gap: 32 }}>
        {/* Sidebar filters */}
        <aside style={{ position: "sticky", top: 120, height: "fit-content" }}>
          <div className="t-eyebrow" style={{ marginBottom: 14 }}>Filters</div>

          <FilterGroup label="Status" options={[["all", "All"], ["live", "Live"], ["upcoming", "Upcoming"], ["past", "Past"]]} value={status} onChange={setStatus} />
          <FilterGroup label="Game" options={[["all", "All games"], ...GAMES.map(g => [g.id, g.name])]} value={game} onChange={setGame} />
          <FilterGroup label="Format" options={[["all", "All"], ["1v1", "1v1"], ["Team", "Team"], ["League", "League"]]} value={format} onChange={setFormat} />
          <FilterGroup label="Region" options={[["all", "All regions"], ["UAE", "UAE"], ["GCC", "GCC"], ["MENA", "MENA"], ["INT", "International"]]} value={region} onChange={setRegion} />

          <div style={{ marginTop: 24, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
            <div className="t-eyebrow" style={{ marginBottom: 10 }}>Prize pool</div>
            <input type="range" min="0" max="1500000" defaultValue="100000" style={{ width: "100%", accentColor: "var(--cyan)" }} />
            <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", display: "flex", justifyContent: "space-between", marginTop: 6 }}>
              <span>AED 0</span><span>AED 1.5M</span>
            </div>
          </div>
        </aside>

        {/* Results */}
        <div>
          <div className="spread" style={{ marginBottom: 20 }}>
            <div className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)", letterSpacing: "0.1em" }}>SHOWING {list.length} OF {TOURNAMENTS.length} TOURNAMENTS</div>
            <div className="row">
              <span className="t-eyebrow">Sort</span>
              <select className="input" style={{ width: "auto", padding: "8px 12px", fontSize: 12 }} value={sort} onChange={e => setSort(e.target.value)}>
                <option value="prize">Prize pool (high → low)</option>
                <option value="soon">Live first</option>
                <option value="date">Start date</option>
              </select>
              <div style={{ display: "flex", border: "1px solid var(--line)", borderRadius: 4, overflow: "hidden" }}>
                {[["grid", "▦"], ["list", "≡"]].map(([k, ic]) => (
                  <button key={k} onClick={() => setView(k)} style={{ padding: "6px 10px", fontSize: 14, background: view === k ? "var(--cyan)" : "transparent", color: view === k ? "var(--ink)" : "var(--text-dim)" }}>{ic}</button>
                ))}
              </div>
            </div>
          </div>

          {view === "grid" ? (
            <div className="grid-3">
              {list.map(t => <TournamentCard key={t.id} t={t} go={go} currency={currency} />)}
            </div>
          ) : (
            <div className="card-flat">
              {list.map((t, i) => (
                <div key={t.id} onClick={() => go("tournament", { id: t.id })} className="sweep" style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr 1fr 1fr auto", padding: "16px 20px", borderBottom: i < list.length - 1 ? "1px solid var(--line)" : "none", gap: 16, alignItems: "center", cursor: "pointer", position: "relative" }}>
                  <GameGlyph game={t.game} size={40} />
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 15 }}>{t.name}</div>
                    <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 2 }}>{gameById(t.game).name.toUpperCase()} · {t.format}</div>
                  </div>
                  <div className="t-mono" style={{ fontSize: 14, color: "var(--cyan)", fontWeight: 700 }}>{currency === "AED" ? fmtAED(t.prize) : fmtUSD(t.prize)}</div>
                  <div className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>{t.date}</div>
                  <div className="t-mono" style={{ fontSize: 12 }}>{t.teams} teams · {t.region}</div>
                  <div>
                    {t.status === "live" && <LiveBadge />}
                    {t.status === "upcoming" && <span className="pill pill-up">Upcoming</span>}
                    {t.status === "past" && <span className="pill pill-past">Past</span>}
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Pagination */}
          <div style={{ marginTop: 32, display: "flex", justifyContent: "center", gap: 4 }}>
            {[1, 2, 3, "…", 8].map((p, i) => (
              <button key={i} onClick={() => typeof p === "number" && setPage(p)} className="btn btn-dark btn-sm" style={{ minWidth: 36, justifyContent: "center", ...(p === page ? { background: "var(--cyan)", color: "var(--ink)", borderColor: "var(--cyan)" } : {}) }}>{p}</button>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
}

function FilterGroup({ label, options, value, onChange }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div className="t-eyebrow" style={{ marginBottom: 8 }}>{label}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {options.map(([k, l]) => (
          <button key={k} onClick={() => onChange(k)} style={{ textAlign: "left", padding: "6px 8px", fontSize: 13, color: value === k ? "var(--cyan)" : "var(--text-dim)", background: value === k ? "rgba(0,229,255,0.08)" : "transparent", borderLeft: value === k ? "2px solid var(--cyan)" : "2px solid transparent", transition: "all 0.1s" }}>{l}</button>
        ))}
      </div>
    </div>
  );
}

// ─── TOURNAMENT DETAIL ───────────────────────────────────────────────────────
function TournamentDetailPage({ params, go, currency }) {
  const t = TOURNAMENTS.find(x => x.id === params.id) || TOURNAMENTS[0];
  const g = gameById(t.game);
  const [tab, setTab] = _u("overview");

  return (
    <main>
      {/* Cinematic hero */}
      <section style={{ position: "relative", minHeight: 540, 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.6) 60%, var(--ink) 100%), linear-gradient(135deg, ${g.color}30 0%, transparent 50%)` }} />
        <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />
        <div className="shell" style={{ position: "relative", padding: "80px 32px 40px" }}>
          <div className="row" style={{ marginBottom: 12 }}>
            {t.status === "live" && <LiveBadge>LIVE · DAY 6 OF 11</LiveBadge>}
            {t.status === "upcoming" && <span className="pill pill-up">UPCOMING</span>}
            {t.status === "past" && <span className="pill pill-past">CONCLUDED · WINNER: {t.winner}</span>}
            <span className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.12em" }}>{t.date.toUpperCase()} · {g.name.toUpperCase()}</span>
          </div>
          <div className="row" style={{ gap: 16 }}>
            <GameGlyph game={g} size={56} />
            <h1 className="t-display" style={{ fontSize: "clamp(48px, 8vw, 120px)", lineHeight: 0.9 }}>{t.name}</h1>
          </div>
          <div style={{ display: "flex", gap: 56, marginTop: 32, flexWrap: "wrap" }}>
            <div><div className="t-eyebrow">Prize Pool</div><div className="t-mono" style={{ fontSize: 36, color: "var(--cyan)", fontWeight: 700 }}>{currency === "AED" ? fmtAED(t.prize) : fmtUSD(t.prize)}</div></div>
            <div><div className="t-eyebrow">Teams</div><div className="t-mono" style={{ fontSize: 36 }}>{t.teams}</div></div>
            <div><div className="t-eyebrow">Format</div><div className="t-mono" style={{ fontSize: 22, paddingTop: 6 }}>{t.format} · Bo5</div></div>
            <div><div className="t-eyebrow">Region</div><div className="t-mono" style={{ fontSize: 22, paddingTop: 6 }}>{t.region}</div></div>
            {t.status === "live" && <div><div className="t-eyebrow">Viewers</div><div className="t-mono" style={{ fontSize: 36, color: "var(--orange)" }}><NumberTicker value={t.viewers || 30000} /></div></div>}
          </div>
          <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
            {t.status === "live" && <button className="btn btn-primary btn-lg" onClick={() => setTab("stream")}><span className="dot-live" style={{ background: "var(--ink)" }} /> Watch the broadcast</button>}
            {t.status === "upcoming" && <button className="btn btn-primary btn-lg">Register your team →</button>}
            <button className="btn btn-ghost btn-lg" onClick={() => setTab("bracket")}>Open bracket</button>
          </div>
        </div>
      </section>

      {/* Tabs */}
      <div style={{ position: "sticky", top: 100, zIndex: 20, background: "var(--ink)", borderBottom: "1px solid var(--line)" }}>
        <div className="shell">
          <div className="tabs">
            {["overview", "bracket", "schedule", "teams", "stats", "stream"].map(k => (
              <button key={k} className={"tab" + (tab === k ? " active" : "")} onClick={() => setTab(k)}>{k}</button>
            ))}
          </div>
        </div>
      </div>

      <div className="shell" style={{ marginTop: 40, marginBottom: 80 }}>
        {tab === "overview" && <TournamentOverview t={t} go={go} setTab={setTab} />}
        {tab === "bracket" && <BracketView />}
        {tab === "schedule" && <ScheduleView />}
        {tab === "teams" && <TeamsGrid go={go} />}
        {tab === "stats" && <StatsLeaderboard />}
        {tab === "stream" && <StreamView t={t} />}
      </div>

      {/* Sponsors strip */}
      <section style={{ borderTop: "1px solid var(--line)", padding: "40px var(--gutter)", background: "var(--ink-2)" }}>
        <div className="shell">
          <div className="t-eyebrow" style={{ marginBottom: 20 }}>Tournament Sponsors</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 20, alignItems: "center" }}>
            {["Emirates", "DP World", "Logitech G", "Red Bull", "HyperX", "ASUS ROG", "Pepsi", "Lenovo"].map(s => (
              <div key={s} style={{ padding: "16px 12px", border: "1px solid var(--line)", borderRadius: 4, textAlign: "center", fontFamily: "var(--font-display-tight)", fontSize: 13, color: "var(--text-dim)", letterSpacing: "-0.01em", transition: "all 0.15s" }} onMouseEnter={e => { e.currentTarget.style.color = "var(--cyan)"; e.currentTarget.style.borderColor = "var(--cyan)"; }} onMouseLeave={e => { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.borderColor = "var(--line)"; }}>{s.toUpperCase()}</div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function TournamentOverview({ t, go, setTab }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 32 }}>
      <div>
        <h2 className="t-display" style={{ fontSize: 32, marginBottom: 16 }}>About the event</h2>
        <p style={{ color: "var(--text-dim)", fontSize: 16, marginBottom: 12 }}>
          {t.name} is a {t.format.toLowerCase()} {gameById(t.game).name} event hosting {t.teams} teams across an eleven-day double-elimination bracket. The grand final will be played live in front of a sold-out crowd at the Coca-Cola Arena in Dubai, broadcast in English, Arabic and Turkish.
        </p>
        <p style={{ color: "var(--text-dim)", fontSize: 16, marginBottom: 32 }}>
          The winner secures the trophy, a guaranteed seat in Vexel's Summer Invitational, and the lion's share of an AED {(t.prize/1000).toFixed(0)}k prize pool. Sign-ups closed twelve hours after they opened.
        </p>

        {/* Live match widget */}
        {t.status === "live" && (
          <div className="scoreboard" style={{ borderRadius: 8, marginBottom: 32, overflow: "hidden" }}>
            <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", background: "var(--ink)" }}>
              <div className="row"><LiveBadge>LIVE · MAP 2 · ASCENT</LiveBadge><span className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)" }}>SEMI-FINAL · BO5</span></div>
              <span className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)" }}>13:24 ELAPSED · ROUND 19</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 20, padding: 24, alignItems: "center" }}>
              <div className="row" style={{ gap: 16 }}>
                <TeamLogo team={TEAMS[0]} size={56} />
                <div>
                  <div className="t-display" style={{ fontSize: 28 }}>{TEAMS[0].name}</div>
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{TEAMS[0].tag} · WORLD #14 · MAPS 1-0</div>
                </div>
              </div>
              <div style={{ textAlign: "center" }}>
                <div className="t-mono" style={{ fontSize: 56, fontWeight: 700, color: "var(--white)", letterSpacing: "-0.04em" }}>
                  <span style={{ color: "var(--lime)" }}>13</span>
                  <span style={{ color: "var(--text-mute)", margin: "0 12px" }}>:</span>
                  <span>11</span>
                </div>
                <div className="t-mono" style={{ fontSize: 10, color: "var(--text-mute)", letterSpacing: "0.12em" }}>SCORE · MAP 2</div>
              </div>
              <div className="row" style={{ gap: 16, flexDirection: "row-reverse", textAlign: "right" }}>
                <TeamLogo team={TEAMS[1]} size={56} />
                <div>
                  <div className="t-display" style={{ fontSize: 28 }}>{TEAMS[1].name}</div>
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{TEAMS[1].tag} · WORLD #08 · MAPS 0-1</div>
                </div>
              </div>
            </div>
            <div style={{ padding: 16, background: "var(--ink)", borderTop: "1px solid var(--line)" }}>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 4 }}>
                {["Apex", "ZeroCool", "alZayed", "Mehari", "Astra"].map((p, i) => (
                  <div key={p} style={{ padding: "8px 10px", background: "var(--surface)", borderRadius: 2, fontSize: 11 }}>
                    <div style={{ fontFamily: "var(--font-mono)", color: "var(--text-dim)" }}>{p}</div>
                    <div className="t-mono" style={{ marginTop: 2 }}><span style={{ color: "var(--lime)" }}>{14 - i}</span> / <span style={{ color: "var(--red)" }}>{6 + i}</span> / <span style={{ color: "var(--cyan)" }}>{4 + i}</span></div>
                  </div>
                ))}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 4, marginTop: 4 }}>
                {["FalconX", "k1rito", "DUNE", "Sphinx", "Mirage"].map((p, i) => (
                  <div key={p} style={{ padding: "8px 10px", background: "var(--surface)", borderRadius: 2, fontSize: 11 }}>
                    <div style={{ fontFamily: "var(--font-mono)", color: "var(--text-dim)" }}>{p}</div>
                    <div className="t-mono" style={{ marginTop: 2 }}><span style={{ color: "var(--lime)" }}>{12 - i}</span> / <span style={{ color: "var(--red)" }}>{8 + i}</span> / <span style={{ color: "var(--cyan)" }}>{3 + i}</span></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Mini schedule preview */}
        <h3 className="t-display" style={{ fontSize: 24, marginBottom: 12 }}>Coming up</h3>
        <div className="card-flat" style={{ marginBottom: 24 }}>
          {SCHEDULE[0].matches.map((m, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 16, padding: "16px 20px", alignItems: "center", borderBottom: i < 1 ? "1px solid var(--line)" : "none" }}>
              <div className="t-mono" style={{ fontSize: 18, color: "var(--cyan)", fontWeight: 700 }}>{m.time}</div>
              <div>
                <div style={{ fontWeight: 700 }}>{m.a} <span style={{ color: "var(--text-mute)" }}>vs</span> {m.b}</div>
                <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{m.round.toUpperCase()}</div>
              </div>
              {m.live ? <LiveBadge /> : <button className="btn btn-dark btn-sm">Set reminder</button>}
            </div>
          ))}
        </div>
        <button className="btn btn-dark" onClick={() => setTab("schedule")}>Full schedule →</button>
      </div>

      {/* Side */}
      <aside>
        <div className="card-flat" style={{ padding: 20, marginBottom: 20 }}>
          <div className="t-eyebrow" style={{ marginBottom: 12 }}>Tournament starts in</div>
          <Countdown targetDays={2} />
        </div>
        <div className="card-flat" style={{ padding: 20, marginBottom: 20 }}>
          <div className="t-eyebrow" style={{ marginBottom: 12 }}>Prize distribution</div>
          {[["1st", "60%", t.prize * 0.6], ["2nd", "22%", t.prize * 0.22], ["3rd–4th", "12%", t.prize * 0.12], ["5th–8th", "6%", t.prize * 0.06]].map(([p, pct, v]) => (
            <div key={p} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px solid var(--line)" }}>
              <span className="t-mono" style={{ fontSize: 12 }}>{p}</span>
              <span className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>{pct}</span>
              <span className="t-mono" style={{ fontSize: 12, color: "var(--cyan)" }}>AED {Math.round(v).toLocaleString()}</span>
            </div>
          ))}
        </div>
        <div className="card-flat" style={{ padding: 20 }}>
          <div className="t-eyebrow" style={{ marginBottom: 12 }}>Broadcast</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {[["Twitch · vexel_clutch (EN)", "var(--magenta)"], ["YouTube · Vexel Esports (EN)", "var(--red)"], ["Vexel Native · vexel.com/live", "var(--cyan)"], ["Twitch · vexel_arabic (AR)", "var(--orange)"]].map(([n, c]) => (
              <a key={n} className="row" style={{ padding: "8px 0", fontSize: 13, cursor: "pointer" }}><span style={{ width: 6, height: 6, borderRadius: "50%", background: c }} /> {n}</a>
            ))}
          </div>
        </div>
      </aside>
    </div>
  );
}

function BracketView() {
  return (
    <div>
      <div className="row" style={{ marginBottom: 24 }}>
        <h2 className="t-display" style={{ fontSize: 32 }}>Upper bracket</h2>
        <span className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginLeft: "auto" }}>16-TEAM · DOUBLE ELIMINATION · UPDATED LIVE</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, overflowX: "auto", padding: "8px 0" }}>
        {BRACKET.map((round, ri) => (
          <div key={ri} style={{ display: "flex", flexDirection: "column", gap: 12, justifyContent: "space-around" }}>
            <div className="t-eyebrow" style={{ paddingLeft: 4 }}>{round.round}</div>
            {round.matches.map((m, mi) => {
              const isLive = m.live;
              const isUpcoming = m.upcoming;
              const winnerA = m.sa !== null && m.sa > m.sb;
              const winnerB = m.sb !== null && m.sb > m.sa;
              return (
                <div key={mi} className="card-flat" style={{ padding: 0, overflow: "hidden", borderColor: isLive ? "var(--orange)" : "var(--line)" }}>
                  {isLive && <div style={{ background: "var(--orange)", color: "var(--ink)", padding: "3px 10px", fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.15em" }}>LIVE NOW · MAP {(m.sets && m.sets.length) || 1}</div>}
                  <Slot name={m.a} score={isLive ? m.sets[0] : m.sa} winner={winnerA} live={isLive} />
                  <div style={{ height: 1, background: "var(--line)" }} />
                  <Slot name={m.b} score={isLive ? m.sets[1] : m.sb} winner={winnerB} live={isLive} />
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}
function Slot({ name, score, winner, live }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 14px", background: winner ? "rgba(0,229,255,0.05)" : "transparent" }}>
      <span style={{ fontSize: 13, color: winner ? "var(--cyan)" : "var(--text)", fontWeight: winner ? 700 : 500 }}>{name}</span>
      <span className="t-mono" style={{ fontSize: 16, fontWeight: 700, color: live ? "var(--orange)" : winner ? "var(--lime)" : "var(--text-mute)" }}>{score ?? "—"}</span>
    </div>
  );
}

function ScheduleView() {
  return (
    <div>
      <h2 className="t-display" style={{ fontSize: 32, marginBottom: 24 }}>Schedule</h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
        {SCHEDULE.map((day, i) => (
          <div key={i}>
            <div className="t-eyebrow" style={{ marginBottom: 12, color: "var(--cyan)" }}>{day.day}</div>
            <div className="card-flat">
              {day.matches.map((m, mi) => (
                <div key={mi} style={{ display: "grid", gridTemplateColumns: "100px 1fr 2fr auto", gap: 20, padding: "20px 24px", borderBottom: mi < day.matches.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
                  <div className="t-mono" style={{ fontSize: 24, color: "var(--cyan)", fontWeight: 700 }}>{m.time}</div>
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.1em" }}>{m.round.toUpperCase()}</div>
                  <div style={{ fontSize: 18, fontWeight: 600 }}>{m.a} <span style={{ color: "var(--text-mute)", margin: "0 8px" }}>vs</span> {m.b}</div>
                  {m.live ? <LiveBadge /> : <button className="btn btn-dark btn-sm">Reminder</button>}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TeamsGrid({ go }) {
  return (
    <div>
      <h2 className="t-display" style={{ fontSize: 32, marginBottom: 24 }}>Participating teams · 16</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 12 }}>
        {TEAMS.map(t => (
          <div key={t.id} onClick={() => go("team", { id: t.id })} className="card lift" style={{ padding: 16, textAlign: "center", cursor: "pointer", aspectRatio: "1" }}>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 8 }}><TeamLogo team={t} size={48} /></div>
            <div style={{ fontWeight: 700, fontSize: 12 }}>{t.name}</div>
            <div className="t-mono" style={{ fontSize: 10, color: "var(--text-mute)", marginTop: 2 }}><Flag code={t.region} size={12} /> {t.region}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function StatsLeaderboard() {
  return (
    <div>
      <h2 className="t-display" style={{ fontSize: 32, marginBottom: 24 }}>Top performers</h2>
      <div className="card-flat">
        <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr 100px 100px 100px 100px", padding: "12px 20px", borderBottom: "1px solid var(--line)", fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.1em", fontFamily: "var(--font-mono)" }}>
          <span>#</span><span>PLAYER</span><span>TEAM</span><span>K/D</span><span>ACS</span><span>HS%</span><span>RATING</span>
        </div>
        {PLAYERS.slice(0, 12).map(p => (
          <div key={p.id} style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr 100px 100px 100px 100px", padding: "14px 20px", borderBottom: "1px solid var(--line)", alignItems: "center" }}>
            <span className="t-mono" style={{ color: "var(--text-mute)" }}>{String(p.rank).padStart(2, "0")}</span>
            <span style={{ fontWeight: 700 }}>{p.handle}</span>
            <span style={{ color: teamById(p.team).color, fontSize: 13 }}>{teamById(p.team).tag}</span>
            <span className="t-mono" style={{ color: "var(--cyan)" }}>{p.kd}</span>
            <span className="t-mono">{260 - p.rank * 4}</span>
            <span className="t-mono" style={{ color: "var(--lime)" }}>{(34 - p.rank * 0.3).toFixed(1)}%</span>
            <span className="t-mono" style={{ color: "var(--magenta)" }}>{(1.4 - p.rank * 0.018).toFixed(2)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function StreamView({ t }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 24 }}>
      <div>
        <div style={{ position: "relative", aspectRatio: "16/9", background: "var(--ink-2)", border: "1px solid var(--line)", overflow: "hidden" }}>
          <img src={t.banner} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.85 }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(10,10,15,0.3) 0%, transparent 30%, rgba(10,10,15,0.85) 100%)" }} />
          {/* Player overlay */}
          <div style={{ position: "absolute", top: 16, left: 16, display: "flex", gap: 8 }}>
            <LiveBadge>LIVE · 48,200</LiveBadge>
            <span className="pill pill-up">VEXEL · EN</span>
          </div>
          <div style={{ position: "absolute", top: 16, right: 16 }}>
            <span className="pill pill-past">SETTINGS · 1080p60</span>
          </div>
          {/* Scoreboard overlay */}
          <div style={{ position: "absolute", bottom: 80, left: "50%", transform: "translateX(-50%)", display: "flex", alignItems: "center", gap: 24, background: "rgba(10,10,15,0.92)", border: "1px solid var(--line)", borderRadius: 4, padding: "8px 20px" }}>
            <div className="row"><TeamLogo team={TEAMS[0]} size={28} /><span style={{ fontWeight: 700, fontSize: 13 }}>APEX</span></div>
            <div className="t-mono" style={{ fontSize: 24, fontWeight: 700 }}><span style={{ color: "var(--lime)" }}>13</span> : 11</div>
            <div className="row"><span style={{ fontWeight: 700, fontSize: 13 }}>FLCN</span><TeamLogo team={TEAMS[1]} size={28} /></div>
          </div>
          {/* Bottom controls */}
          <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: 16, display: "flex", alignItems: "center", gap: 12 }}>
            <button style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--cyan)", color: "var(--ink)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14 }}>▶</button>
            <div className="t-mono" style={{ fontSize: 12, color: "var(--white)" }}>1:24:08 / LIVE</div>
            <div style={{ flex: 1, height: 4, background: "var(--surface-3)", borderRadius: 2, overflow: "hidden" }}>
              <div style={{ width: "82%", height: "100%", background: "var(--orange)" }} />
            </div>
            <span className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>HD</span>
            <span className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>CC</span>
            <span className="t-mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>⛶</span>
          </div>
        </div>
        <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between" }}>
          <div>
            <div style={{ fontWeight: 700, fontSize: 16 }}>{t.name} · Semi-final Apex vs Falcons</div>
            <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 4 }}>VEXEL OFFICIAL · ENGLISH · 48,200 WATCHING</div>
          </div>
          <div className="row">
            <button className="btn btn-ghost btn-sm">♥ Follow</button>
            <button className="btn btn-dark btn-sm">⤴ Share</button>
          </div>
        </div>
      </div>
      <ChatPanel compact />
    </div>
  );
}

// Reusable chat panel
function ChatPanel({ compact }) {
  const msgs = [
    ["sandstorm", "var(--cyan)", "let's go apex!!"],
    ["k1rito_fan", "var(--magenta)", "kirito clutch incoming"],
    ["DubaiGamer", "var(--lime)", "this is so good"],
    ["pulse_", "var(--orange)", "the wallbang though"],
    ["AyaSL_official", "var(--magenta)", "from the team — gg wp"],
    ["faroe", "var(--gold)", "13-11 incoming"],
    ["DUNE", "var(--cyan)", "watching from doha"],
    ["Astra", "var(--lime)", "VEX FOR THE WIN"],
    ["Cobra", "var(--magenta)", "they fumbled b site so bad"],
    ["BurnerX", "var(--cyan)", "the new vyse rework is wild"],
    ["alZayed", "var(--gold)", "1 round from match point"],
    ["pixel", "var(--orange)", "huge w for apex"],
    ["Storm99", "var(--lime)", "GG GG GG"],
  ];
  return (
    <aside style={{ display: "flex", flexDirection: "column", height: compact ? 540 : "100%", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 4 }}>
      <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="t-eyebrow" style={{ color: "var(--white)" }}>Stream chat</div>
        <span className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>4.2k viewers</span>
      </div>
      <div style={{ flex: 1, overflow: "auto", padding: "8px 12px", display: "flex", flexDirection: "column", gap: 6, fontSize: 13 }}>
        {msgs.map((m, i) => (
          <div key={i}>
            <span style={{ color: m[1], fontWeight: 700 }}>{m[0]}</span>
            <span style={{ color: "var(--text-mute)", margin: "0 6px" }}>:</span>
            <span style={{ color: "var(--text)" }}>{m[2]}</span>
          </div>
        ))}
      </div>
      <div style={{ padding: 10, borderTop: "1px solid var(--line)" }}>
        <input className="input" placeholder="Send a message" style={{ padding: "8px 12px", fontSize: 13 }} />
      </div>
    </aside>
  );
}

// ─── LIVE ────────────────────────────────────────────────────────────────────
function LivePage({ go }) {
  const live = TOURNAMENTS.filter(t => t.status === "live");
  const [active, setActive] = _u(0);
  const [gameFilter, setGameFilter] = _u("all");
  const filtered = gameFilter === "all" ? live : live.filter(t => t.game === gameFilter);
  const main = filtered[active] || filtered[0] || live[0];

  return (
    <main style={{ paddingTop: 24 }}>
      <div className="shell">
        <div className="row" style={{ marginBottom: 16 }}>
          <LiveBadge>LIVE NOW · {live.length} TOURNAMENTS · 248K WATCHING</LiveBadge>
          <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.15em", marginLeft: "auto" }}>UPDATED EVERY 12 SECONDS · NEXT REFRESH 00:08</div>
        </div>
        <h1 className="t-display" style={{ fontSize: 64, marginBottom: 8 }}>Live broadcasts</h1>
        <p style={{ color: "var(--text-dim)", fontSize: 16, marginBottom: 24 }}>Every Vexel match, live in one place. Pick a stream, drop into chat.</p>

        {/* Game chips */}
        <div style={{ display: "flex", gap: 8, marginBottom: 24, overflowX: "auto" }}>
          <button onClick={() => setGameFilter("all")} className={"pill " + (gameFilter === "all" ? "pill-up" : "pill-past")} style={{ padding: "6px 14px" }}>All games</button>
          {GAMES.map(g => (
            <button key={g.id} onClick={() => setGameFilter(g.id)} className={"pill " + (gameFilter === g.id ? "pill-up" : "pill-past")} style={{ padding: "6px 14px", whiteSpace: "nowrap" }}>{g.name}</button>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 24 }}>
          <div>
            {/* 4-up grid */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              {filtered.slice(0, 4).map((t, i) => (
                <div key={t.id} onClick={() => setActive(i)} style={{ position: "relative", cursor: "pointer", aspectRatio: "16/9", overflow: "hidden", border: i === active ? "2px solid var(--cyan)" : "1px solid var(--line)", borderRadius: 4 }}>
                  <img src={t.banner} 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.95) 100%)" }} />
                  <div style={{ position: "absolute", top: 10, left: 10, display: "flex", gap: 6 }}>
                    <LiveBadge>LIVE</LiveBadge>
                    <span className="pill pill-past" style={{ fontSize: 10 }}><NumberTicker value={t.viewers || 10000} /></span>
                  </div>
                  <div style={{ position: "absolute", bottom: 10, left: 10, right: 10 }}>
                    <div className="t-mono" style={{ fontSize: 10, color: "var(--text-dim)" }}>{gameById(t.game).name.toUpperCase()}</div>
                    <div style={{ fontWeight: 700, fontSize: 14, marginTop: 2, textWrap: "balance", lineHeight: 1.2 }}>{t.name}</div>
                    {/* Mini scoreboard */}
                    <div style={{ marginTop: 8, display: "flex", justifyContent: "space-between", padding: "4px 8px", background: "rgba(10,10,15,0.7)", borderRadius: 2, fontSize: 11 }}>
                      <span><span style={{ color: "var(--cyan)" }}>{TEAMS[i*2 % TEAMS.length].tag}</span> <span className="t-mono">{13 - i}</span></span>
                      <span className="t-mono" style={{ color: "var(--orange)" }}>● {String(20 + i)}:{String(14 + i*3).padStart(2,"0")}</span>
                      <span><span className="t-mono">{11 - i}</span> <span style={{ color: "var(--magenta)" }}>{TEAMS[(i*2+1) % TEAMS.length].tag}</span></span>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Featured stream */}
            <div style={{ marginTop: 24 }}>
              <div style={{ position: "relative", aspectRatio: "16/9", background: "var(--ink-2)", border: "1px solid var(--cyan)", borderRadius: 4, overflow: "hidden", boxShadow: "var(--glow-cyan)" }}>
                <img src={main.banner} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.85 }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(10,10,15,0.4) 0%, transparent 20%, rgba(10,10,15,0.85) 100%)" }} />
                <div style={{ position: "absolute", top: 16, left: 16 }}><LiveBadge>LIVE · 48,200 WATCHING</LiveBadge></div>
                <div style={{ position: "absolute", bottom: 50, left: "50%", transform: "translateX(-50%)", display: "flex", alignItems: "center", gap: 20, background: "rgba(10,10,15,0.95)", border: "1px solid var(--line)", padding: "8px 20px", borderRadius: 4 }}>
                  <div className="row"><TeamLogo team={TEAMS[0]} size={28} /><span style={{ fontWeight: 700 }}>APEX</span></div>
                  <div className="t-mono" style={{ fontSize: 26, fontWeight: 700 }}><span style={{ color: "var(--lime)" }}>13</span> : 11</div>
                  <div className="row"><span style={{ fontWeight: 700 }}>FLCN</span><TeamLogo team={TEAMS[1]} size={28} /></div>
                </div>
                <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: 12, display: "flex", alignItems: "center", gap: 12 }}>
                  <button style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--cyan)", color: "var(--ink)", fontWeight: 800 }}>▶</button>
                  <span className="t-mono" style={{ fontSize: 12, color: "var(--white)" }}>1:24:08 / LIVE</span>
                  <div style={{ flex: 1, height: 3, background: "var(--surface-3)", borderRadius: 2 }}><div style={{ width: "88%", height: "100%", background: "var(--orange)" }} /></div>
                  <span className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)" }}>HD · 1080p60</span>
                </div>
              </div>
              <div style={{ padding: "16px 0" }}>
                <div className="row" style={{ gap: 12 }}>
                  <GameGlyph game={main.game} size={32} />
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 18 }}>{main.name}</div>
                    <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{gameById(main.game).name.toUpperCase()} · SEMI-FINAL · BO5</div>
                  </div>
                  <button onClick={() => go("tournament", { id: main.id })} className="btn btn-ghost btn-sm" style={{ marginLeft: "auto" }}>Full match page →</button>
                </div>
              </div>
            </div>
          </div>

          <ChatPanel />
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { HomePage, TournamentsPage, TournamentDetailPage, LivePage });