// Sporda — Session 1 additions: Match Summary, H2H, Odds + Basketball & Tennis variants.
// Reuses MatchHeader from screens-1.jsx.

// ===========================================================================
// 002 — MATCH · SUMMARY
// Default landing tab. Inspiration: Sofascore/Onefootball summary card.
// ===========================================================================
const ScreenMatchSummary = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <MatchHeader subtab="summary"/>

        {/* Quick events strip — the highlight reel, condensed */}
        <div style={{ padding: '16px 20px 4px' }}>
          <div className="card">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Key moments</span>
              <button style={{ color: 'var(--text-secondary)', fontSize: 12, fontWeight: 600 }}>See all →</button>
            </div>
            {[
              { m: "12'", side: 'h', kind: 'goal', text: 'J. Okonkwo · Atlas FC' },
              { m: "45+2'", side: 'h', kind: 'goal', text: 'M. Bellini · Atlas FC' },
              { m: "58'", side: 'a', kind: 'sub', text: 'D. Solberg ↑ A. Hovland' },
              { m: "63'", side: 'a', kind: 'goal', text: 'D. Solberg · Norse Utd' },
            ].map((e, i) => {
              const icon = e.kind === 'goal' ? <I.goal/> : <I.sub size={12}/>;
              const color = e.kind === 'goal' ? 'var(--positive)' : 'var(--text-secondary)';
              return (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '40px 1fr 16px',
                  gap: 12, alignItems: 'center', padding: '8px 0',
                  borderTop: i ? '1px solid var(--border-hairline)' : 0,
                }}>
                  <span className="mono" style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-secondary)' }}>{e.m}</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600 }}>
                    <span style={{ color, display: 'flex' }}>{icon}</span>
                    {e.text}
                  </div>
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: e.side === 'h' ? 'var(--accent)' : 'var(--text-muted)' }}/>
                </div>
              );
            })}
          </div>
        </div>

        {/* xG bar — single horizontal split */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Expected goals (xG)</span>
              <button style={{ color: 'var(--text-secondary)', fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>
                <I.share size={12}/> Share
              </button>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
              <span className="mono" style={{ fontSize: 22, fontWeight: 800 }}>1.84</span>
              <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>ATL · NOR</span>
              <span className="mono" style={{ fontSize: 22, fontWeight: 800 }}>0.92</span>
            </div>
            <div style={{ display: 'flex', height: 6, gap: 4 }}>
              <div style={{ flex: 1.84, background: 'var(--accent)', borderRadius: 3 }}/>
              <div style={{ flex: 0.92, background: 'var(--text-secondary)', opacity: 0.4, borderRadius: 3 }}/>
            </div>
          </div>
        </div>

        {/* Stats peek */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Stats</span>
              <button style={{ color: 'var(--text-secondary)', fontSize: 12, fontWeight: 600 }}>All stats →</button>
            </div>
            <StatBar lbl="Possession" l="58%" r="42%" totalL={58} totalR={42}/>
            <StatBar lbl="Shots on target" l="6" r="3" totalL={6} totalR={3}/>
            <StatBar lbl="Corners" l="7" r="4" totalL={7} totalR={4}/>
          </div>
        </div>

        {/* Source footnote */}
        <div style={{ padding: '12px 20px 24px', fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>
          Stats via Opta · updated 2s ago
        </div>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 006 — MATCH · H2H (Head to Head)
// ===========================================================================
const ScreenMatchH2H = () => {
  const meetings = [
    { date: 'May 12, 25', comp: 'League',     hs: 2, as: 1, won: 'h' },
    { date: 'Jan 04, 25', comp: 'Cup',        hs: 1, as: 1, won: 'd' },
    { date: 'Aug 21, 24', comp: 'League',     hs: 0, as: 2, won: 'a' },
    { date: 'Mar 17, 24', comp: 'League',     hs: 3, as: 0, won: 'h' },
    { date: 'Nov 02, 23', comp: 'League',     hs: 1, as: 2, won: 'a' },
  ];
  const summary = { h: 2, d: 1, a: 2 };
  const total = summary.h + summary.d + summary.a;
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <MatchHeader subtab="h2h"/>

          {/* Summary bar */}
          <div style={{ padding: '16px 20px 4px' }}>
            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Last 5 meetings</span>
                <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>Since 2023</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Crest name={teams.ATL.name} code="ATL"/>
                  <span style={{ fontSize: 13, fontWeight: 700 }}>{summary.h} W</span>
                </div>
                <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontWeight: 600 }}>{summary.d} D</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 13, fontWeight: 700 }}>{summary.a} W</span>
                  <Crest name={teams.NOR.name} code="NOR"/>
                </div>
              </div>
              <div style={{ display: 'flex', height: 6, gap: 2, borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ flex: summary.h / total, background: 'var(--accent)' }}/>
                <div style={{ flex: summary.d / total, background: 'var(--text-secondary)', opacity: 0.4 }}/>
                <div style={{ flex: summary.a / total, background: 'var(--text-primary)' }}/>
              </div>
            </div>
          </div>

          {/* Meeting list */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card" style={{ padding: 0 }}>
              {meetings.map((m, i) => {
                const wcolor = m.won === 'h' ? 'var(--accent)' : m.won === 'a' ? 'var(--text-primary)' : 'var(--text-secondary)';
                const wbg = m.won === 'h' ? 'rgba(200,255,62,0.10)' : m.won === 'a' ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.03)';
                return (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '54px 1fr 64px 28px',
                    gap: 12, alignItems: 'center', padding: '14px 16px',
                    borderTop: i ? '1px solid var(--border-hairline)' : 0,
                  }}>
                    <div>
                      <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600 }}>{m.date}</div>
                      <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>{m.comp}</div>
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>Atlas FC<br/><span style={{ color: 'var(--text-secondary)', fontWeight: 500 }}>Norse Utd</span></div>
                    <div className="mono" style={{ fontWeight: 800, fontSize: 14, textAlign: 'right' }}>
                      <div>{m.hs}</div>
                      <div style={{ color: 'var(--text-secondary)' }}>{m.as}</div>
                    </div>
                    <div style={{ width: 28, height: 28, borderRadius: 8, background: wbg, color: wcolor, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 800 }}>
                      {m.won === 'h' ? 'W' : m.won === 'a' ? 'L' : 'D'}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Top scorers in fixture */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Top scorers in this fixture</span>
              <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { rank: 1, name: 'J. Okonkwo', team: 'ATL', goals: 4 },
                  { rank: 2, name: 'D. Solberg',  team: 'NOR', goals: 3 },
                  { rank: 3, name: 'M. Bellini',  team: 'ATL', goals: 2 },
                ].map(p => (
                  <div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 700, width: 16 }}>{p.rank}</span>
                    <div style={{ width: 32, height: 32, borderRadius: '50%', background: hashColor(p.name), display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11 }}>{p.name.split(' ')[1][0]}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{p.team}</div>
                    </div>
                    <div className="mono" style={{ fontSize: 14, fontWeight: 800 }}>{p.goals}<span style={{ fontSize: 11, color: 'var(--text-secondary)', marginLeft: 2 }}>g</span></div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div style={{ padding: '12px 20px 24px', fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>
            Source · Opta · updated 1m ago
          </div>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 007 — MATCH · ODDS
// Inspiration: 10bet / Winamax odds grid.
// ===========================================================================
const ScreenMatchOdds = () => {
  const books = [
    { name: 'BetWay',   h: 1.86, d: 3.20, a: 4.10 },
    { name: 'Bet365',   h: 1.85, d: 3.25, a: 4.20 },
    { name: 'Unibet',   h: 1.90, d: 3.10, a: 4.00 },
    { name: 'Pinnacle', h: 1.92, d: 3.15, a: 4.05 },
  ];
  // Best per col
  const bestH = Math.max(...books.map(b => b.h));
  const bestD = Math.max(...books.map(b => b.d));
  const bestA = Math.max(...books.map(b => b.a));

  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <MatchHeader subtab="odds"/>

          {/* Best odds pills */}
          <div style={{ padding: '16px 20px 12px' }}>
            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Best odds · Match result</span>
                <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 700, letterSpacing: '0.05em' }}>LIVE</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                {[
                  { lbl: 'ATL (1)', v: bestH, book: 'Pinnacle' },
                  { lbl: 'Draw (X)', v: bestD, book: 'Bet365' },
                  { lbl: 'NOR (2)', v: bestA, book: 'Bet365' },
                ].map((o, i) => (
                  <button key={i} style={{
                    padding: '12px 8px',
                    background: i === 0 ? 'var(--accent)' : 'rgba(255,255,255,0.04)',
                    color: i === 0 ? 'var(--accent-ink)' : 'var(--text-primary)',
                    border: '1px solid ' + (i === 0 ? 'var(--accent)' : 'var(--border-hairline)'),
                    borderRadius: 14, textAlign: 'left',
                  }}>
                    <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', opacity: 0.75 }}>{o.lbl}</div>
                    <div className="mono" style={{ fontSize: 20, fontWeight: 800, marginTop: 2 }}>{o.v.toFixed(2)}</div>
                    <div style={{ fontSize: 10, marginTop: 2, opacity: 0.7 }}>{o.book}</div>
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* All bookmakers table */}
          <div style={{ padding: '4px 20px 4px' }}>
            <div className="card" style={{ padding: 0 }}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 56px 56px 56px',
                gap: 8, padding: '14px 16px',
                fontSize: 10, fontWeight: 700, color: 'var(--text-muted)',
                letterSpacing: '0.05em', textTransform: 'uppercase',
                borderBottom: '1px solid var(--border-hairline)',
              }}>
                <span>Bookmaker</span><span style={{ textAlign: 'right' }}>1</span><span style={{ textAlign: 'right' }}>X</span><span style={{ textAlign: 'right' }}>2</span>
              </div>
              {books.map((b, i) => (
                <div key={b.name} style={{
                  display: 'grid', gridTemplateColumns: '1fr 56px 56px 56px',
                  gap: 8, padding: '14px 16px', alignItems: 'center',
                  borderTop: i ? '1px solid var(--border-hairline)' : 0,
                }}>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{b.name}</span>
                  {[['h', b.h, bestH], ['d', b.d, bestD], ['a', b.a, bestA]].map(([k, v, best]) => (
                    <span key={k} className="mono" style={{
                      textAlign: 'right', fontSize: 13, fontWeight: 700,
                      color: v === best ? 'var(--accent)' : 'var(--text-primary)',
                    }}>{v.toFixed(2)}</span>
                  ))}
                </div>
              ))}
            </div>
          </div>

          {/* Other markets */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Other markets</span>
              {[
                { lbl: 'Both teams to score', y: '1.65', n: '2.20' },
                { lbl: 'Over 2.5 goals',      y: '1.85', n: '1.95' },
                { lbl: 'Atlas to win to nil', y: '4.50', n: '1.22' },
              ].map((m, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1fr 64px 64px',
                  gap: 8, padding: '12px 0', alignItems: 'center',
                  borderTop: i ? '1px solid var(--border-hairline)' : 0,
                }}>
                  <span style={{ fontSize: 13, fontWeight: 500 }}>{m.lbl}</span>
                  <button style={{ padding: '8px 0', background: 'rgba(255,255,255,0.04)', borderRadius: 10, fontSize: 12, fontWeight: 700, color: 'var(--text-secondary)' }}>Yes <span className="mono" style={{ marginLeft: 4, color: 'var(--text-primary)' }}>{m.y}</span></button>
                  <button style={{ padding: '8px 0', background: 'rgba(255,255,255,0.04)', borderRadius: 10, fontSize: 12, fontWeight: 700, color: 'var(--text-secondary)' }}>No <span className="mono" style={{ marginLeft: 4, color: 'var(--text-primary)' }}>{m.n}</span></button>
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: '12px 20px 24px', fontSize: 11, color: 'var(--text-muted)', textAlign: 'center', lineHeight: 1.5 }}>
            Odds from licensed operators · 18+ · gamble responsibly<br/>
            <span style={{ opacity: 0.6 }}>Updated 8s ago</span>
          </div>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 009 — BASKETBALL · BOX SCORE
// Sport-variant of the universal shell. Replaces the football-style hero
// with NBA-style quarter line score; replaces lineups/stats with the box.
// ===========================================================================
const ScreenBasketballBoxScore = () => {
  const homeT = { name: 'Alpine Storm', code: 'ALP' };
  const awayT = { name: 'Crescent', code: 'CRS' };
  const lineScore = [
    { q: 'Q1', h: 28, a: 22 },
    { q: 'Q2', h: 24, a: 26 },
    { q: 'Q3', h: 31, a: 24 },
    { q: 'Q4', h: 19, a: 26 },
  ];
  const totals = lineScore.reduce((a, q) => ({ h: a.h + q.h, a: a.a + q.a }), { h: 0, a: 0 });
  const players = [
    { name: 'M. Thompson', min: 38, pts: 31, reb: 8,  ast: 4,  fg: '11/19', tp: '3/6' },
    { name: 'C. Brewer',   min: 34, pts: 22, reb: 4,  ast: 9,  fg: '8/14',  tp: '2/4' },
    { name: 'J. López',    min: 31, pts: 14, reb: 11, ast: 2,  fg: '6/11',  tp: '0/2' },
    { name: 'A. Sato',     min: 27, pts: 12, reb: 3,  ast: 6,  fg: '4/8',   tp: '2/3' },
    { name: 'D. Akin',     min: 22, pts: 8,  reb: 5,  ast: 1,  fg: '3/7',   tp: '0/1' },
  ];

  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          {/* Custom header for basketball — same shell, sport-aware copy */}
          <div style={{ display: 'flex', alignItems: 'center', padding: '8px 16px 16px', gap: 12 }}>
            <RoundBtn><I.chevL size={18}/></RoundBtn>
            <div style={{ flex: 1, textAlign: 'center' }}>
              <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>NBA · Conference Finals</div>
              <div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>Game 4</div>
            </div>
            <RoundBtn><I.share size={16}/></RoundBtn>
          </div>

          {/* Score block */}
          <div style={{ padding: '0 20px 20px', textAlign: 'center' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 12 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <Crest name={homeT.name} code={homeT.code} size="xl"/>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{homeT.name}</div>
                <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>62–28 · 1st</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span className="score lg" style={{ color: 'var(--accent)' }}>{totals.h}</span>
                  <span style={{ color: 'var(--text-muted)', fontSize: 22 }}>:</span>
                  <span className="score lg">{totals.a}</span>
                </div>
                <div className="pill" style={{ background: 'rgba(0,0,0,0.3)', color: 'var(--text-secondary)' }}>FINAL · OT</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <Crest name={awayT.name} code={awayT.code} size="xl"/>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{awayT.name}</div>
                <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>54–36 · 4th</div>
              </div>
            </div>
            <div style={{ marginTop: 14, fontSize: 11, color: 'var(--text-muted)' }}>Crypto.com Arena · 18,997 att.</div>
          </div>

          {/* Line score */}
          <div style={{ padding: '0 20px 12px' }}>
            <div className="card" style={{ padding: 0 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '64px repeat(4, 1fr) 56px', padding: '12px 14px', borderBottom: '1px solid var(--border-hairline)', fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
                <span></span>{lineScore.map(q => <span key={q.q} style={{ textAlign: 'center' }}>{q.q}</span>)}<span style={{ textAlign: 'right' }}>T</span>
              </div>
              {[{ t: homeT, vals: lineScore.map(q => q.h), total: totals.h, win: true },
                { t: awayT, vals: lineScore.map(q => q.a), total: totals.a, win: false }].map((row, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '64px repeat(4, 1fr) 56px',
                  padding: '14px 14px', alignItems: 'center',
                  borderTop: i ? '1px solid var(--border-hairline)' : 0,
                  fontSize: 13,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Crest name={row.t.name} code={row.t.code}/>
                  </div>
                  {row.vals.map((v, j) => <span key={j} className="mono" style={{ textAlign: 'center', fontWeight: 600 }}>{v}</span>)}
                  <span className="mono" style={{ textAlign: 'right', fontWeight: 800, fontSize: 15, color: row.win ? 'var(--accent)' : 'var(--text-primary)' }}>{row.total}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Sub-tabs (mimics shell) */}
          <div className="subtabs" style={{ marginBottom: 4 }}>
            {['Summary', 'Box score', 'Shot chart', 'Play by play', 'H2H'].map((t, i) => (
              <div key={t} className={`subtab ${i === 1 ? 'active' : ''}`}>{t}</div>
            ))}
          </div>

          {/* Box score */}
          <div style={{ padding: '12px 20px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 32px 32px 32px 32px 44px', gap: 8, padding: '8px 4px', fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
              <span>Player</span><span style={{ textAlign: 'right' }}>MIN</span><span style={{ textAlign: 'right' }}>PTS</span><span style={{ textAlign: 'right' }}>REB</span><span style={{ textAlign: 'right' }}>AST</span><span style={{ textAlign: 'right' }}>FG</span>
            </div>
            {players.map((p, i) => (
              <div key={p.name} style={{
                display: 'grid', gridTemplateColumns: '1fr 32px 32px 32px 32px 44px',
                gap: 8, padding: '12px 4px', alignItems: 'center',
                borderTop: '1px solid var(--border-hairline)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: hashColor(p.name), display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 10 }}>{p.name.split(' ')[1].slice(0, 2).toUpperCase()}</div>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</span>
                </div>
                <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--text-secondary)' }}>{p.min}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 700 }}>{p.pts}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 12 }}>{p.reb}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 12 }}>{p.ast}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 11, color: 'var(--text-secondary)' }}>{p.fg}</span>
              </div>
            ))}
          </div>

          <div style={{ padding: '8px 20px 24px', fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>
            Box score · Stats Perform · final
          </div>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 011 — TENNIS · SET BY SET
// Player vs player (singles). Set grid, current game, serve stats.
// ===========================================================================
const ScreenTennisSetBySet = () => {
  const p1 = { last: 'Mendez',  first: 'K.', country: '🇲🇽', seed: 4,  rank: 7 };
  const p2 = { last: 'Volker',  first: 'A.', country: '🇩🇪', seed: 11, rank: 22 };
  const sets = [
    { p1: 6, p2: 4, tb: null },
    { p1: 3, p2: 6, tb: null },
    { p1: 7, p2: 6, tb: { p1: 7, p2: 5 } },
    { p1: 4, p2: 4, tb: null, live: true, game: { p1: 30, p2: 40 } },
  ];

  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', padding: '8px 16px 16px', gap: 12 }}>
            <RoundBtn><I.chevL size={18}/></RoundBtn>
            <div style={{ flex: 1, textAlign: 'center' }}>
              <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>ATP Masters · QF</div>
              <div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>Centre Court</div>
            </div>
            <RoundBtn><I.share size={16}/></RoundBtn>
          </div>

          {/* Player rows + score grid */}
          <div style={{ padding: '0 20px 16px' }}>
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              {[p1, p2].map((p, i) => {
                const isServer = i === 0; // current server
                return (
                  <div key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: '1fr 28px 28px 40px 56px',
                    alignItems: 'center', gap: 8, padding: '14px 16px',
                    borderTop: i ? '1px solid var(--border-hairline)' : 0,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{ fontSize: 18 }}>{p.country}</span>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 14, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                          {p.first} {p.last}
                          {isServer && <span style={{ marginLeft: 6, fontSize: 9, color: 'var(--accent)' }}>●</span>}
                        </div>
                        <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>[{p.seed}] · ATP {p.rank}</div>
                      </div>
                    </div>
                    {sets.slice(0, 3).map((s, j) => {
                      const won = (i === 0 ? s.p1 : s.p2) > (i === 0 ? s.p2 : s.p1);
                      return (
                        <span key={j} className="mono" style={{
                          textAlign: 'center', fontSize: 16, fontWeight: 800,
                          color: won ? 'var(--accent)' : 'var(--text-primary)',
                          position: 'relative',
                        }}>
                          {i === 0 ? s.p1 : s.p2}
                          {s.tb && <sup style={{ fontSize: 9, color: 'var(--text-secondary)', marginLeft: 1 }}>{i === 0 ? s.tb.p1 : s.tb.p2}</sup>}
                        </span>
                      );
                    })}
                    {/* Current set */}
                    <span className="mono" style={{ textAlign: 'center', fontSize: 16, fontWeight: 800, color: 'var(--accent)', background: 'rgba(200,255,62,0.10)', padding: '4px 0', borderRadius: 6 }}>
                      {i === 0 ? sets[3].p1 : sets[3].p2}
                    </span>
                    {/* Current game point */}
                    <div style={{ textAlign: 'right' }}>
                      <span className="mono" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>
                        {i === 0 ? sets[3].game.p1 : sets[3].game.p2}
                      </span>
                    </div>
                  </div>
                );
              })}
              {/* Column headers (below for tennis convention readability) */}
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 28px 28px 40px 56px',
                gap: 8, padding: '8px 16px',
                fontSize: 9, fontWeight: 700, color: 'var(--text-muted)',
                letterSpacing: '0.05em', textTransform: 'uppercase',
                background: 'var(--bg-inset)',
              }}>
                <span>Player</span>
                <span style={{ textAlign: 'center' }}>S1</span>
                <span style={{ textAlign: 'center' }}>S2</span>
                <span style={{ textAlign: 'center' }}>S3</span>
                <span style={{ textAlign: 'center' }}>Live · S4</span>
                <span style={{ textAlign: 'right' }}>Pt</span>
              </div>
            </div>
          </div>

          {/* Sub-tabs */}
          <div className="subtabs" style={{ marginBottom: 4 }}>
            {['Match', 'Stats', 'Points', 'H2H', 'Odds'].map((t, i) => (
              <div key={t} className={`subtab ${i === 1 ? 'active' : ''}`}>{t}</div>
            ))}
          </div>

          {/* Serve stats */}
          <div style={{ padding: '16px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Serve</span>
              <div style={{ marginTop: 12 }}>
                <StatBar lbl="Aces" l="9" r="4" totalL={9} totalR={4}/>
                <StatBar lbl="Double faults" l="2" r="5" totalL={2} totalR={5} accent="var(--warning)"/>
                <StatBar lbl="1st serve in" l="68%" r="62%" totalL={68} totalR={62}/>
                <StatBar lbl="1st serve won" l="78%" r="64%" totalL={78} totalR={64}/>
                <StatBar lbl="Break points won" l="3/7" r="1/4" totalL={3} totalR={1}/>
              </div>
            </div>
          </div>

          {/* Last 6 points trail */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Last 6 points</span>
                <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>4–4 · {p1.last} to serve</span>
              </div>
              <div style={{ display: 'flex', gap: 4 }}>
                {['1', '1', '2', '1', '2', '2'].map((p, i) => (
                  <div key={i} style={{
                    flex: 1, height: 32, borderRadius: 6,
                    background: p === '1' ? 'var(--accent)' : 'var(--bg-inset)',
                    border: '1px solid ' + (p === '1' ? 'var(--accent)' : 'var(--border-hairline)'),
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 11, fontWeight: 800,
                    color: p === '1' ? 'var(--accent-ink)' : 'var(--text-secondary)',
                  }}>{p === '1' ? 'M' : 'V'}</div>
                ))}
              </div>
            </div>
          </div>

          <div style={{ padding: '12px 20px 24px', fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>
            Live data · IBM SlamTracker style · updated 3s ago
          </div>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

Object.assign(window, {
  ScreenMatchSummary, ScreenMatchH2H, ScreenMatchOdds,
  ScreenBasketballBoxScore, ScreenTennisSetBySet,
});