// Sporda — Phase C cont'd · Career · Comparison · News

// ===========================================================================
// 030 — PLAYER · CAREER
// Season-by-season totals table + clubs timeline + youth honours
// ===========================================================================
const ScreenPlayerCareer = () => {
  const seasons = [
    { year: '2025–26', club: 'Arsenal', comp: 'PL', apps: 14, goals: 11, assists: 12, hl: true },
    { year: '2024–25', club: 'Arsenal', comp: 'PL', apps: 36, goals: 14, assists: 11 },
    { year: '2023–24', club: 'Arsenal', comp: 'PL', apps: 35, goals: 16, assists: 9 },
    { year: '2022–23', club: 'Arsenal', comp: 'PL', apps: 38, goals: 14, assists: 11 },
    { year: '2021–22', club: 'Arsenal', comp: 'PL', apps: 38, goals: 11, assists: 7 },
    { year: '2020–21', club: 'Arsenal', comp: 'PL', apps: 32, goals: 5,  assists: 3 },
    { year: '2019–20', club: 'Arsenal', comp: 'PL', apps: 26, goals: 4,  assists: 10 },
  ];
  const totalApps = seasons.reduce((s, x) => s + x.apps, 0);
  const totalGoals = seasons.reduce((s, x) => s + x.goals, 0);
  const totalAssists = seasons.reduce((s, x) => s + x.assists, 0);
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <PlayerHeader subtab="career"/>

          {/* Headline totals */}
          <div style={{ padding: '16px 20px 4px' }}>
            <div className="card">
              <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 12 }}>Senior career · all comps</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, textAlign: 'center' }}>
                {[
                  { l: 'Apps', v: 256 },
                  { l: 'Goals', v: 79 },
                  { l: 'Assists', v: 64 },
                ].map(c => (
                  <div key={c.l}>
                    <div className="mono" style={{ fontSize: 28, fontWeight: 800 }}>{c.v}</div>
                    <div style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 700, marginTop: 2, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{c.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Clubs timeline */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Career path</span>
              <div style={{ marginTop: 14, position: 'relative' }}>
                <div style={{ position: 'absolute', left: 18, top: 6, bottom: 6, width: 2, background: 'var(--border-hairline)' }}/>
                {[
                  { club: 'Arsenal', code: 'ARS', bg: '#EF0107', years: '2019–present', detail: '256 games · 79 goals', current: true },
                  { club: 'Arsenal U-18 / U-23', code: 'A',  bg: '#7158E2', years: '2015–2019', detail: 'Academy graduate' },
                  { club: 'Greenford Celtic (youth)', code: 'GFC', bg: '#22C55E', years: '2008–2015', detail: 'First club, age 7' },
                ].map((c, i) => (
                  <div key={c.club} style={{ display: 'flex', alignItems: 'flex-start', gap: 16, padding: '8px 0', position: 'relative' }}>
                    <div style={{ width: 36, height: 36, borderRadius: '50%', background: c.bg, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 11, flex: 'none', position: 'relative', zIndex: 1, border: '3px solid var(--bg-base)' }}>
                      {c.code}
                    </div>
                    <div style={{ flex: 1, paddingTop: 4 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 700 }}>
                        {c.club}
                        {c.current && <span style={{ padding: '2px 6px', background: 'rgba(200,255,62,0.15)', color: 'var(--accent)', fontSize: 9, fontWeight: 700, letterSpacing: '0.04em', borderRadius: 4 }}>CURRENT</span>}
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{c.years} · {c.detail}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Season-by-season table */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card" style={{ padding: 0 }}>
              <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Premier League · season by season</span>
                <I.chevD size={14}/>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '78px 1fr 40px 40px 40px', padding: '10px 16px', fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.05em', textTransform: 'uppercase', borderBottom: '1px solid var(--border-hairline)' }}>
                <span>Season</span><span>Club</span><span style={{ textAlign: 'right' }}>Apps</span><span style={{ textAlign: 'right' }}>G</span><span style={{ textAlign: 'right' }}>A</span>
              </div>
              {seasons.map(s => (
                <div key={s.year} style={{
                  display: 'grid', gridTemplateColumns: '78px 1fr 40px 40px 40px',
                  padding: '11px 16px', alignItems: 'center',
                  borderBottom: '1px solid var(--border-hairline)',
                  background: s.hl ? 'rgba(200,255,62,0.04)' : 'transparent',
                }}>
                  <span className="mono" style={{ fontSize: 12, fontWeight: 700 }}>{s.year}</span>
                  <span style={{ fontSize: 12 }}>{s.club}</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 12 }}>{s.apps}</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 800, color: s.hl ? 'var(--accent)' : 'var(--text-primary)' }}>{s.goals}</span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 12 }}>{s.assists}</span>
                </div>
              ))}
              <div style={{ display: 'grid', gridTemplateColumns: '78px 1fr 40px 40px 40px', padding: '12px 16px', alignItems: 'center', borderTop: '2px solid var(--border-strong)', background: 'var(--bg-inset)' }}>
                <span className="mono" style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.05em' }}>TOTAL</span>
                <span/>
                <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 800 }}>{totalApps}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 800, color: 'var(--accent)' }}>{totalGoals}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 800 }}>{totalAssists}</span>
              </div>
            </div>
          </div>

          {/* International */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>International · England</span>
              <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, textAlign: 'center' }}>
                <div><div className="mono" style={{ fontSize: 20, fontWeight: 800 }}>42</div><div style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 700, marginTop: 2 }}>CAPS</div></div>
                <div><div className="mono" style={{ fontSize: 20, fontWeight: 800, color: 'var(--accent)' }}>13</div><div style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 700, marginTop: 2 }}>GOALS</div></div>
                <div><div className="mono" style={{ fontSize: 20, fontWeight: 800 }}>8</div><div style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 700, marginTop: 2 }}>ASSISTS</div></div>
              </div>
              <div style={{ marginTop: 10, fontSize: 11, color: 'var(--text-muted)' }}>Debut · 8 Oct 2020 vs Wales · Euro 2024 finalist</div>
            </div>
          </div>

          <SourceLine text="Career data · Transfermarkt + EnglandFootball.com · sourced 14 Apr 2026"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 031 — PLAYER · COMPARISON
// Side-by-side stats vs Mohamed Salah
// ===========================================================================
const ComparisonBar = ({ lbl, l, r, lAvg, rAvg, leftBetter }) => {
  // Bar shows split. The player with higher value gets the lime fill on their side.
  const total = (typeof l === 'number' ? l : parseFloat(l)) + (typeof r === 'number' ? r : parseFloat(r));
  const lShare = total > 0 ? ((typeof l === 'number' ? l : parseFloat(l)) / total) * 100 : 50;
  return (
    <div style={{ padding: '12px 0', borderBottom: '1px solid var(--border-hairline)' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
        <span className="mono" style={{ fontSize: 14, fontWeight: 800, color: leftBetter ? 'var(--accent)' : 'var(--text-primary)' }}>{l}</span>
        <span style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{lbl}</span>
        <span className="mono" style={{ fontSize: 14, fontWeight: 800, color: leftBetter ? 'var(--text-primary)' : 'var(--accent)' }}>{r}</span>
      </div>
      <div style={{ display: 'flex', height: 4, gap: 2 }}>
        <div style={{ flex: lShare, background: leftBetter ? 'var(--accent)' : 'var(--text-secondary)', opacity: leftBetter ? 1 : 0.4, borderRadius: '2px 0 0 2px' }}/>
        <div style={{ flex: 100 - lShare, background: leftBetter ? 'var(--text-secondary)' : 'var(--accent)', opacity: leftBetter ? 0.4 : 1, borderRadius: '0 2px 2px 0' }}/>
      </div>
    </div>
  );
};

const ScreenPlayerCompare = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <PlayerHeader subtab="comparison"/>

        {/* Player vs Player header */}
        <div style={{ padding: '14px 20px 16px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 12, textAlign: 'center' }}>
            <div>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'linear-gradient(135deg, #FFC83D, #C99500)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 18, margin: '0 auto', color: '#0A1400' }}>BS</div>
              <div style={{ marginTop: 6, fontSize: 13, fontWeight: 700 }}>B. Saka</div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>ARS · RW · 24y</div>
            </div>
            <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--text-muted)', letterSpacing: '0.08em' }}>vs</div>
            <div>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'linear-gradient(135deg, #C8102E, #6D050A)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 18, margin: '0 auto', color: 'white' }}>MS</div>
              <div style={{ marginTop: 6, fontSize: 13, fontWeight: 700 }}>M. Salah</div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>LIV · RW · 33y</div>
            </div>
          </div>
          <button style={{ marginTop: 14, width: '100%', padding: '8px', background: 'var(--bg-surface)', border: '1px dashed var(--border-strong)', color: 'var(--text-secondary)', borderRadius: 12, fontSize: 12, fontWeight: 600 }}>
            Change opponent
          </button>
        </div>

        {/* Stats */}
        <div style={{ padding: '0 20px 4px' }}>
          <div className="card">
            <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>2025–26 · Premier League · per 90</div>
            <ComparisonBar lbl="Goals"           l={0.88} r={0.62} leftBetter/>
            <ComparisonBar lbl="Assists"         l={0.96} r={0.45} leftBetter/>
            <ComparisonBar lbl="xG"              l={0.74} r={0.81}/>
            <ComparisonBar lbl="xA"              l={0.71} r={0.38} leftBetter/>
            <ComparisonBar lbl="Shots / 90"      l={2.8}  r={3.4}/>
            <ComparisonBar lbl="Chances created" l={3.6}  r={2.4} leftBetter/>
            <ComparisonBar lbl="Pass accuracy"   l="87%"  r="79%" leftBetter/>
            <ComparisonBar lbl="Successful dribbles" l={3.1} r={2.4} leftBetter/>
            <ComparisonBar lbl="Tackles won"     l={1.1}  r={0.6} leftBetter/>
          </div>
        </div>

        {/* Win % indicator */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div style={{
            background: 'var(--hero-grad)',
            border: '1px solid rgba(200,255,62,0.15)',
            borderRadius: 18, padding: 18, textAlign: 'center',
          }}>
            <div className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Overall edge</div>
            <div style={{ marginTop: 8, fontSize: 18, fontWeight: 800 }}>
              Saka leads on <span style={{ color: 'var(--accent)' }}>7 of 9</span> metrics
            </div>
            <div style={{ marginTop: 4, fontSize: 12, color: 'var(--text-secondary)' }}>
              Salah edges on raw shot volume and xG — Saka's chance creation and finishing efficiency outpace across the rest.
            </div>
          </div>
        </div>

        <SourceLine text="Comparison · Opta + StatsBomb · 2025–26 PL · updated 4 min ago"/>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 032 — PLAYER · NEWS (Saka-tagged)
// ===========================================================================
const ScreenPlayerNews = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <PlayerHeader subtab="news"/>

        {/* Category pills */}
        <div style={{ display: 'flex', gap: 8, padding: '14px 20px 16px', overflowX: 'auto', scrollbarWidth: 'none' }}>
          {['All', 'Match', 'Interview', 'Stat watch', 'Off-pitch'].map((c, i) => (
            <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{c}</div>
          ))}
        </div>

        {/* Featured */}
        <div style={{ padding: '0 20px 20px' }}>
          <div style={{ background: 'var(--bg-surface)', borderRadius: 'var(--r-card)', overflow: 'hidden', border: '1px solid var(--border-hairline)' }}>
            <div style={{ aspectRatio: '16 / 9', position: 'relative', background: 'linear-gradient(135deg, #FFC83D 0%, #DB0007 100%)', display: 'flex', alignItems: 'flex-end', padding: 16 }}>
              <div className="tag-micro" style={{ position: 'absolute', top: 12, left: 12, background: 'var(--accent)', color: 'var(--accent-ink)', padding: '4px 10px', borderRadius: 999 }}>Stat watch</div>
              {/* Number callout overlay */}
              <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center', color: '#0A1400' }}>
                <div className="mono" style={{ fontSize: 72, fontWeight: 900, lineHeight: 1 }}>51</div>
                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.08em', marginTop: 4 }}>CHANCES CREATED</div>
              </div>
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ fontSize: 16, fontWeight: 700, lineHeight: 1.3, textWrap: 'pretty' }}>
                Bukayo Saka has now created more chances than any other Premier League player this season.
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>OptaJoe · 3h ago</div>
                <div style={{ display: 'flex', gap: 14, color: 'var(--text-secondary)' }}>
                  <I.heart/><I.cmt/><I.share/>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* List */}
        <div style={{ padding: '0 20px 16px' }}>
          {[
            { tag: 'Interview', title: '"I owe everything to Mikel" — Saka opens up on Arteta\'s influence', meta: 'The Athletic · 6h ago' },
            { tag: 'Match',     title: 'Five takeaways: Saka & Saliba drive Arsenal past Villa', meta: 'The Guardian · 1d ago' },
            { tag: 'Stat watch',title: 'Saka now level with Henry for most chances created in a single PL season', meta: 'Squawka · 1d ago' },
            { tag: 'Off-pitch', title: 'Saka launches second wave of literacy programme in Ealing', meta: 'BBC Sport · 2d ago' },
            { tag: 'Interview', title: '"England has the squad. We just need to convert" — Saka on the Euros', meta: 'Sky Sports · 4d ago' },
          ].map((n, i, arr) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 0 }}>
              <div style={{
                width: 64, height: 64, borderRadius: 12, flex: 'none',
                background: `linear-gradient(135deg, ${crestPalette[(i * 2) % crestPalette.length]} 0%, ${crestPalette[(i * 2 + 1) % crestPalette.length]} 100%)`,
              }}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 4 }}>{n.tag}</div>
                <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3, textWrap: 'pretty' }}>{n.title}</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 6 }}>{n.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <BottomNav active="news"/>
    </div>
  </div>
);

Object.assign(window, {
  ScreenPlayerCareer, ScreenPlayerCompare, ScreenPlayerNews,
});