// Sporda — Session 2 cont'd: F1, Golf, MMA, Esports.

// ===========================================================================
// 013 — F1 · Grid + lap chart + tyre strategy (Stats tab)
// ===========================================================================
const ScreenF1 = () => {
  const tyres = { S: '#FF3B5C', M: '#FFB547', H: '#F5F7F4', I: '#4ADE80', W: '#3D5AFE' };
  // Driver, team-color, stints (compound + lap-length), current position, gap
  const drivers = [
    { p: 1, name: 'M. Verstappen', code: 'VER', team: '#1E5BC6',
      stints: [{ c: 'M', l: 18 }, { c: 'H', l: 24 }, { c: 'S', l: 3 }], gap: '—' },
    { p: 2, name: 'L. Norris',     code: 'NOR', team: '#FF8000',
      stints: [{ c: 'M', l: 16 }, { c: 'H', l: 27 }, { c: 'S', l: 2 }], gap: '+4.218' },
    { p: 3, name: 'C. Leclerc',    code: 'LEC', team: '#DC0000',
      stints: [{ c: 'S', l: 12 }, { c: 'H', l: 31 }, { c: 'S', l: 2 }], gap: '+11.044' },
    { p: 4, name: 'O. Piastri',    code: 'PIA', team: '#FF8000',
      stints: [{ c: 'M', l: 19 }, { c: 'H', l: 24 }, { c: 'M', l: 2 }], gap: '+15.872' },
    { p: 5, name: 'G. Russell',    code: 'RUS', team: '#27F4D2',
      stints: [{ c: 'M', l: 14 }, { c: 'M', l: 18 }, { c: 'H', l: 13 }], gap: '+22.401' },
  ];
  const totalLaps = 78;
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <SportHeader comp="F1 · Monaco GP" subline="Race · Lap 45 / 78">
            <div style={{ padding: '0 20px 20px' }}>
              <div style={{
                borderRadius: 'var(--r-card-lg)', padding: 18, position: 'relative', overflow: 'hidden',
                background: 'var(--hero-grad-rich)',
              }}>
                <div style={{ position: 'absolute', top: -60, right: -40, width: 220, height: 220, background: 'radial-gradient(circle, rgba(30,91,198,0.22), transparent 60%)' }}/>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                  <div className="pill live"><span className="dot"/>LAP 45/78</div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', textAlign: 'right' }}>Track <span className="mono" style={{ color: 'var(--text-primary)' }}>38°</span> · Air <span className="mono" style={{ color: 'var(--text-primary)' }}>24°</span></div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 8, height: 56, borderRadius: 4, background: drivers[0].team }}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600 }}>LEADER · P1</div>
                    <div style={{ fontWeight: 800, fontSize: 22, letterSpacing: '-0.01em' }}>{drivers[0].name}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Last <span className="mono" style={{ color: 'var(--text-primary)' }}>1:14.382</span> · Best <span className="mono" style={{ color: '#A855F7' }}>1:13.918</span></div>
                  </div>
                </div>
                <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                  {[{ s: 'S1', t: '18.234', best: false }, { s: 'S2', t: '22.118', best: true }, { s: 'S3', t: '17.802', best: false }].map(x => (
                    <div key={x.s} style={{ padding: '10px 12px', background: 'rgba(0,0,0,0.3)', borderRadius: 10, textAlign: 'center' }}>
                      <div style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.04em' }}>{x.s}</div>
                      <div className="mono" style={{ fontSize: 14, fontWeight: 700, color: x.best ? '#A855F7' : 'var(--text-primary)', marginTop: 2 }}>{x.t}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </SportHeader>

          <SubTabs active="stats"/>

          {/* Tyre strategy grid */}
          <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)' }}>Tyre strategy · Top 5</span>
                <div style={{ display: 'flex', gap: 10, fontSize: 10, fontWeight: 700 }}>
                  {Object.entries({ S: 'Soft', M: 'Med', H: 'Hard' }).map(([k, v]) => (
                    <span key={k} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: tyres[k] }}/>{v}
                    </span>
                  ))}
                </div>
              </div>
              {drivers.map(d => (
                <div key={d.code} style={{ display: 'grid', gridTemplateColumns: '20px 60px 1fr 60px', alignItems: 'center', gap: 10, padding: '10px 0', borderTop: '1px solid var(--border-hairline)' }}>
                  <span className="mono" style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-secondary)' }}>P{d.p}</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <div style={{ width: 4, height: 18, borderRadius: 2, background: d.team }}/>
                    <span style={{ fontSize: 11, fontWeight: 800 }}>{d.code}</span>
                  </div>
                  <div style={{ display: 'flex', height: 16, borderRadius: 4, overflow: 'hidden', background: 'var(--bg-inset)' }}>
                    {d.stints.map((s, i) => (
                      <div key={i} style={{
                        flex: s.l, background: tyres[s.c],
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 9, fontWeight: 800, color: '#0A1400',
                        borderRight: i < d.stints.length - 1 ? '2px solid var(--bg-base)' : 0,
                      }}>{s.c}</div>
                    ))}
                  </div>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 11, color: d.gap === '—' ? 'var(--accent)' : 'var(--text-secondary)', fontWeight: 600 }}>{d.gap}</span>
                </div>
              ))}
              <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--text-muted)' }}>
                <span>Lap 1</span><span>Lap {totalLaps}</span>
              </div>
            </div>
          </div>

          {/* Mini lap chart — position over time */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Position chart · Top 5</span>
              <div style={{ height: 120, marginTop: 14, position: 'relative' }}>
                <svg viewBox="0 0 100 50" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
                  {[1, 2, 3, 4].map(p => (
                    <line key={p} x1="0" x2="100" y1={p * 10} y2={p * 10} stroke="rgba(255,255,255,0.06)" strokeWidth="0.3"/>
                  ))}
                  {/* Synthetic position traces */}
                  <polyline points="0,2 25,2 26,5 50,5 51,2 100,2"  fill="none" stroke={drivers[0].team} strokeWidth="1.2"/>
                  <polyline points="0,12 18,12 19,5 50,10 51,5 100,12" fill="none" stroke={drivers[1].team} strokeWidth="1.2"/>
                  <polyline points="0,22 15,22 16,12 40,12 41,22 100,22" fill="none" stroke={drivers[2].team} strokeWidth="1.2"/>
                  <polyline points="0,32 30,32 31,22 65,22 66,32 100,32" fill="none" stroke={drivers[3].team} strokeWidth="1.2"/>
                  <polyline points="0,42 20,42 21,32 55,32 56,42 100,42" fill="none" stroke={drivers[4].team} strokeWidth="1.2"/>
                </svg>
                <div style={{ position: 'absolute', left: -2, top: 0, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', fontSize: 9, color: 'var(--text-muted)', fontWeight: 700 }}>
                  <span>P1</span><span>P2</span><span>P3</span><span>P4</span><span>P5</span>
                </div>
              </div>
            </div>
          </div>

          <SourceLine text="Timing · FIA Live Timing · updated 1s ago"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 014 — GOLF · Leaderboard + scorecard (Summary tab)
// ===========================================================================
const ScreenGolf = () => {
  const board = [
    { rank: 1, name: 'R. McIlroy',      score: -11, thru: 'F',  rd: 67, sel: true },
    { rank: 2, name: 'S. Scheffler',    score: -9,  thru: 'F',  rd: 69 },
    { rank: 3, name: 'X. Schauffele',   score: -8,  thru: 16,   rd: 68 },
    { rank: 4, name: 'S. Lowry',        score: -7,  thru: 15,   rd: 70 },
    { rank: 5, name: 'L. Åberg',        score: -6,  thru: 14,   rd: 71 },
  ];
  // McIlroy scorecard — pars and scores per hole 1-18
  const pars   = [4, 4, 5, 3, 4, 4, 4, 3, 5, 4, 3, 5, 4, 4, 3, 4, 5, 4];
  const scores = [4, 3, 4, 3, 4, 3, 4, 4, 5, 3, 3, 4, 4, 5, 2, 3, 4, 5];
  const cellColor = (par, sc) => {
    const d = sc - par;
    if (d <= -2) return { bg: '#3D5AFE', fg: '#fff' };          // eagle
    if (d === -1) return { bg: '#4ADE80', fg: '#0A1400' };       // birdie
    if (d === 0)  return { bg: 'transparent', fg: 'var(--text-primary)' };
    if (d === 1)  return { bg: '#FFB547', fg: '#0A1400' };       // bogey
    return { bg: '#FF3B5C', fg: '#fff' };                        // double+
  };
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <SportHeader comp="The Open Championship" subline="Round 3 of 4 · Royal Troon">
            <div style={{ padding: '0 20px 16px' }}>
              <div style={{
                borderRadius: 'var(--r-card-lg)', padding: 18,
                background: 'var(--hero-grad)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                  <div className="pill live"><span className="dot"/>R3 LIVE</div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>Cut at <span className="mono" style={{ color: 'var(--text-primary)' }}>+3</span> · 76 advanced</div>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600 }}>LEADER</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 4 }}>
                  <span style={{ fontWeight: 800, fontSize: 22, letterSpacing: '-0.01em' }}>R. McIlroy</span>
                  <span className="score" style={{ color: 'var(--accent)', fontSize: 32 }}>−11</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Through 18 · R3 score <span className="mono" style={{ color: 'var(--text-primary)' }}>67</span></div>
              </div>
            </div>
          </SportHeader>

          <SubTabs active="summary"/>

          {/* Leaderboard */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card" style={{ padding: 0 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '24px 1fr 56px 44px 40px', padding: '12px 14px', fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.05em', textTransform: 'uppercase', borderBottom: '1px solid var(--border-hairline)' }}>
                <span></span><span>Player</span><span style={{ textAlign: 'right' }}>To par</span><span style={{ textAlign: 'right' }}>Thru</span><span style={{ textAlign: 'right' }}>R3</span>
              </div>
              {board.map(p => (
                <div key={p.rank} style={{
                  display: 'grid', gridTemplateColumns: '24px 1fr 56px 44px 40px',
                  padding: '14px 14px', alignItems: 'center',
                  borderTop: p.rank > 1 ? '1px solid var(--border-hairline)' : 0,
                  background: p.sel ? 'rgba(200,255,62,0.06)' : 'transparent',
                }}>
                  <span className="mono" style={{ fontSize: 12, color: p.sel ? 'var(--accent)' : 'var(--text-secondary)', fontWeight: 700 }}>{p.rank}</span>
                  <span style={{ fontSize: 13, fontWeight: p.sel ? 700 : 600 }}>{p.name}</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 15, fontWeight: 800, color: p.sel ? 'var(--accent)' : 'var(--text-primary)' }}>{p.score > 0 ? '+' : '−'}{Math.abs(p.score)}</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--text-secondary)' }}>{p.thru}</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--text-muted)' }}>{p.rd}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Scorecard for selected (McIlroy) */}
          <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)' }}>McIlroy · R3 scorecard</span>
                <div style={{ display: 'flex', gap: 10, fontSize: 10, fontWeight: 700 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: '#4ADE80' }}/>Birdie</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: '#FFB547' }}/>Bogey</span>
                </div>
              </div>
              {[0, 9].map(off => (
                <div key={off} style={{ marginBottom: off === 0 ? 12 : 0 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gap: 3 }}>
                    <div style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 700, textAlign: 'center' }}>{off === 0 ? 'OUT' : 'IN'}</div>
                    {pars.slice(off, off + 9).map((_, i) => (
                      <div key={i} style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 700, textAlign: 'center' }}>{off + i + 1}</div>
                    ))}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gap: 3, marginTop: 4 }}>
                    <div style={{ fontSize: 10, color: 'var(--text-muted)', textAlign: 'center', paddingTop: 8 }}>Par</div>
                    {pars.slice(off, off + 9).map((p, i) => (
                      <div key={i} style={{ aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: 'var(--text-secondary)' }}>{p}</div>
                    ))}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gap: 3, marginTop: 4 }}>
                    <div style={{ fontSize: 10, color: 'var(--text-muted)', textAlign: 'center', paddingTop: 8 }}>Sc</div>
                    {scores.slice(off, off + 9).map((s, i) => {
                      const c = cellColor(pars[off + i], s);
                      return (
                        <div key={i} style={{
                          aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center',
                          fontSize: 13, fontWeight: 800,
                          background: c.bg, color: c.fg,
                          borderRadius: 6,
                          border: c.bg === 'transparent' ? '1px solid var(--border-hairline)' : 0,
                        }}>{s}</div>
                      );
                    })}
                  </div>
                </div>
              ))}
              <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border-hairline)', display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
                <span style={{ color: 'var(--text-secondary)' }}>Out 32 · In 35</span>
                <span className="mono" style={{ fontWeight: 800 }}>67 <span style={{ color: 'var(--accent)' }}>(−5)</span></span>
              </div>
            </div>
          </div>

          <SourceLine text="Live shot tracking · PGA Tour ShotLink · updated 12s ago"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenF1, ScreenGolf });