// Sporda — Session 2: 6 sport variants.
// Each sits inside the universal Match Detail shell — back chevron, comp
// breadcrumb, score block, 6-tab strip. Sport-specific content swaps inside
// whichever tab is active. None of these are football-with-renamed-labels.

// ===========================================================================
// Shared scaffolding for sport-shell headers
// ===========================================================================
const SportHeader = ({ comp, subline, share = true, children }) => (
  <>
    <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)' }}>{comp}</div>
        <div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>{subline}</div>
      </div>
      {share && <RoundBtn><I.share size={16}/></RoundBtn>}
    </div>
    {children}
  </>
);

const SubTabs = ({ active }) => (
  <div className="subtabs">
    {['Summary', 'Events', 'Stats', 'Lineups', 'H2H', 'Odds'].map(t => (
      <div key={t} className={`subtab ${t.toLowerCase() === active ? 'active' : ''}`}>{t}</div>
    ))}
  </div>
);

const SourceLine = ({ text }) => (
  <div style={{ padding: '14px 20px 24px', fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>{text}</div>
);

// ===========================================================================
// 010 — NFL · Drive chart + Box score (Stats tab)
// ===========================================================================
const ScreenNFL = () => {
  // Drive chart — yard-by-yard footprint of the current drive
  const drive = { startYard: 25, endYard: 62, side: 'home' };  // KC drove from own 25 to BUF 38
  const passing = [
    { name: 'P. Mahomes',   team: 'KC',  ydsl: '287/24/34', td: 2, int: 1, rtg: 96.4 },
    { name: 'J. Allen',     team: 'BUF', ydsl: '241/19/31', td: 1, int: 0, rtg: 92.1 },
  ];
  const rushing = [
    { name: 'I. Pacheco', team: 'KC',  car: 14, yds: 78, td: 1 },
    { name: 'J. Cook',    team: 'BUF', car: 18, yds: 102, td: 0 },
  ];
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <SportHeader comp="NFL · Divisional" subline="Week 19 · Arrowhead">
            <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="Kansas City" code="KC" size="xl" bg="#E31837"/>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>Kansas City</div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>14–3 · AFC West</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)' }}>24</span>
                    <span style={{ color: 'var(--text-muted)', fontSize: 22 }}>:</span>
                    <span className="score lg">21</span>
                  </div>
                  <div className="pill live"><span className="dot"/>Q4 · 8:32</div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                  <Crest name="Buffalo" code="BUF" size="xl" bg="#00338D"/>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>Buffalo</div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>13–4 · AFC East</div>
                </div>
              </div>
              <div style={{ marginTop: 14, fontSize: 11, color: 'var(--text-muted)' }}>GEHA Field at Arrowhead · 76,416 att.</div>
            </div>
          </SportHeader>

          <SubTabs active="stats"/>

          {/* Drive chart */}
          <div style={{ padding: '16px 20px 4px' }}>
            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Current drive · KC</span>
                <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 700 }}>2nd & 7</span>
              </div>
              {/* Field: 0-50-100 yard lines */}
              <div style={{ position: 'relative', height: 56, borderRadius: 10, overflow: 'hidden', background: 'linear-gradient(180deg, #143524 0%, #0F2A1C 100%)' }}>
                {/* End zones */}
                <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '10%', background: 'rgba(227,24,55,0.30)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 800, color: 'white', letterSpacing: '0.05em' }}>KC</div>
                <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: '10%', background: 'rgba(0,51,141,0.30)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 800, color: 'white', letterSpacing: '0.05em' }}>BUF</div>
                {/* Yard markers */}
                {[10, 20, 30, 40, 50, 60, 70, 80, 90].map(y => (
                  <div key={y} style={{ position: 'absolute', left: `${y}%`, top: 6, bottom: 6, width: 1, background: 'rgba(255,255,255,0.15)' }}/>
                ))}
                {[20, 30, 40, 50, 40, 30, 20].map((label, i) => (
                  <div key={i} style={{ position: 'absolute', left: `${(i + 1) * 12.5}%`, top: '50%', transform: 'translate(-50%, -50%)', fontSize: 9, color: 'rgba(255,255,255,0.40)', fontWeight: 700 }}>{label}</div>
                ))}
                {/* Drive bar */}
                <div style={{
                  position: 'absolute', top: 18, height: 20,
                  left: `${10 + drive.startYard * 0.8}%`,
                  width: `${(drive.endYard - drive.startYard) * 0.8}%`,
                  background: 'var(--accent)', opacity: 0.85,
                  borderRadius: 4,
                  boxShadow: '0 0 12px rgba(200,255,62,0.5)',
                }}/>
                {/* Ball marker */}
                <div style={{ position: 'absolute', top: 28, left: `${10 + drive.endYard * 0.8}%`, width: 10, height: 10, marginLeft: -5, background: 'white', borderRadius: '50%', boxShadow: '0 0 0 2px var(--accent)' }}/>
              </div>
              <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-secondary)' }}>
                <span><span style={{ color: 'var(--text-primary)', fontWeight: 700 }}>6 plays · 37 yds</span> · 2:18 elapsed</span>
                <span className="mono">at BUF 38</span>
              </div>
            </div>
          </div>

          {/* Passing */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Passing</span>
              <div style={{ marginTop: 12 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 88px 28px 28px 36px', gap: 8, padding: '6px 0', fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
                  <span>QB</span><span style={{ textAlign: 'right' }}>YDS/C/A</span><span style={{ textAlign: 'right' }}>TD</span><span style={{ textAlign: 'right' }}>INT</span><span style={{ textAlign: 'right' }}>RTG</span>
                </div>
                {passing.map((p, i) => (
                  <div key={p.name} style={{ display: 'grid', gridTemplateColumns: '1fr 88px 28px 28px 36px', gap: 8, padding: '10px 0', alignItems: 'center', borderTop: '1px solid var(--border-hairline)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 24, height: 24, borderRadius: '50%', background: i === 0 ? '#E31837' : '#00338D', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700 }}>{p.team}</div>
                      <span style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</span>
                    </div>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 12 }}>{p.ydsl}</span>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 700 }}>{p.td}</span>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: p.int > 0 ? 'var(--negative)' : 'var(--text-secondary)' }}>{p.int}</span>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 700, color: i === 0 ? 'var(--accent)' : 'var(--text-primary)' }}>{p.rtg}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Rushing */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Rushing leaders</span>
              <div style={{ marginTop: 12 }}>
                {rushing.map((p, i) => (
                  <div key={p.name} style={{ display: 'grid', gridTemplateColumns: '1fr 32px 36px 24px', gap: 12, padding: '10px 0', alignItems: 'center', borderTop: i ? '1px solid var(--border-hairline)' : 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 24, height: 24, borderRadius: '50%', background: i === 0 ? '#E31837' : '#00338D', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700 }}>{p.team}</div>
                      <span style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</span>
                    </div>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--text-secondary)' }}>{p.car} car</span>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 700 }}>{p.yds} yd</span>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 12 }}>{p.td}<span style={{ fontSize: 10, color: 'var(--text-secondary)' }}>td</span></span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <SourceLine text="Stats via NFL Next Gen · updated 4s ago"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 012 — CRICKET · Innings card + run-rate worm (Summary tab)
// ===========================================================================
const ScreenCricket = () => {
  // Worm data — cumulative runs every 5 overs
  const wormIND = [0, 28, 56, 88, 122, 154, 188, 225, 252, 275, 287];   // 50 ov
  const wormAUS = [0, 22, 48, 78, 112, 145, 168];                        // 32.4 ov
  const maxRuns = 300;
  const overs = 50;
  const pt = (val, idx, arr) => `${(idx / (arr.length - 1)) * 100},${100 - (val / maxRuns) * 100}`;
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <SportHeader comp="ICC · ODI Series" subline="3rd ODI · M. Chinnaswamy">
            <div style={{ padding: '0 20px 20px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {[
                  { team: 'India',     code: 'IND', flag: '🇮🇳', score: '287/6', ov: '(50.0 ov)', rr: 5.74 },
                  { team: 'Australia', code: 'AUS', flag: '🇦🇺', score: '168/4', ov: '(32.4 ov)', rr: 5.18, batting: true },
                ].map((s, i) => (
                  <div key={s.code} style={{
                    background: s.batting ? 'var(--hero-grad)' : 'var(--bg-surface)',
                    borderRadius: 'var(--r-card)', padding: '14px',
                    border: '1px solid ' + (s.batting ? 'rgba(200,255,62,0.20)' : 'var(--border-hairline)'),
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                      <span style={{ fontSize: 18 }}>{s.flag}</span>
                      <span style={{ fontSize: 12, fontWeight: 700 }}>{s.team}</span>
                      {s.batting && <span className="pill live" style={{ height: 18, padding: '0 6px', fontSize: 9, marginLeft: 'auto' }}><span className="dot"/>BAT</span>}
                    </div>
                    <div className="mono" style={{ fontSize: 26, fontWeight: 800 }}>{s.score}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 2 }}>{s.ov} · RR <span className="mono">{s.rr}</span></div>
                  </div>
                ))}
              </div>
            </div>
          </SportHeader>

          <SubTabs active="summary"/>

          {/* Live partnership */}
          <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)' }}>At the crease</span>
                <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>Req. RR <span className="mono" style={{ color: 'var(--text-primary)' }}>6.85</span></span>
              </div>
              {[
                { name: 'S. Smith *', runs: 67, balls: 82, fours: 6, sixes: 1, sr: 81.7 },
                { name: 'T. Head',    runs: 24, balls: 31, fours: 3, sixes: 0, sr: 77.4 },
              ].map((b, i) => (
                <div key={b.name} style={{ display: 'grid', gridTemplateColumns: '1fr 36px 36px 36px 44px', gap: 8, padding: '10px 0', alignItems: 'center', borderTop: i ? '1px solid var(--border-hairline)' : 0 }}>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{b.name}</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 14, fontWeight: 800 }}>{b.runs}</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--text-secondary)' }}>({b.balls})</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 11, color: 'var(--text-muted)' }}>{b.fours}×4 {b.sixes}×6</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--accent)' }}>{b.sr}</span>
                </div>
              ))}
              <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px dashed var(--border-hairline)', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-secondary)' }}>
                <span>J. Bumrah · <span className="mono">0/34 (8 ov)</span></span>
                <span>P'ship · <span className="mono" style={{ color: 'var(--text-primary)' }}>54 (61)</span></span>
              </div>
            </div>
          </div>

          {/* Run-rate worm */}
          <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)' }}>Run-rate worm</span>
                <div style={{ display: 'flex', gap: 12, fontSize: 11 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 10, height: 2, background: 'var(--accent)' }}/>IND</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 10, height: 2, background: '#FFB547' }}/>AUS</span>
                </div>
              </div>
              <div style={{ position: 'relative', height: 160 }}>
                <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
                  {[75, 50, 25].map(y => (
                    <line key={y} x1="0" x2="100" y1={y} y2={y} stroke="rgba(255,255,255,0.06)" strokeWidth="0.3"/>
                  ))}
                  <polyline points={wormIND.map((v, i) => pt(v, i, wormIND)).join(' ')} fill="none" stroke="var(--accent)" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
                  <polyline points={wormAUS.map((v, i) => pt(v, i, wormAUS)).join(' ')} fill="none" stroke="#FFB547" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
                  <circle cx={(wormAUS.length - 1) / (overs / 5) * 100} cy={100 - (wormAUS[wormAUS.length - 1] / maxRuns) * 100} r="1.5" fill="#FFB547"/>
                </svg>
              </div>
              <div style={{ marginTop: 6, display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--text-muted)' }}>
                <span>0 ov</span><span>25 ov</span><span>50 ov</span>
              </div>
            </div>
          </div>

          {/* Last 6 balls */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>This over · 32.4</span>
              <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
                {[
                  { v: '1', c: 'var(--text-secondary)' },
                  { v: '4', c: 'var(--accent)' },
                  { v: '·', c: 'var(--text-muted)' },
                  { v: '1', c: 'var(--text-secondary)' },
                  { v: 'W', c: 'var(--negative)' },
                  { v: '6', c: 'var(--accent)' },
                ].map((b, i) => (
                  <div key={i} style={{
                    width: 36, height: 36, borderRadius: '50%',
                    background: 'var(--bg-inset)', border: '1px solid var(--border-hairline)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: b.c, fontWeight: 800, fontSize: 14,
                  }}>{b.v}</div>
                ))}
              </div>
            </div>
          </div>

          <SourceLine text="Live ball-by-ball · ESPNcricinfo · updated 6s ago"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenNFL, ScreenCricket, SportHeader, SubTabs, SourceLine });