// Sporda — Phase C desktop · Player detail at 1280×800.
// Shared: TopNav (60px) + content area. Per-screen: 3-column grid where it fits
// (Overview), 2-col for Stats/News, full-width for Career/Comparison.

// ----- Shared desktop chrome ----------------------------------------------
const Logo = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <div style={{ width: 28, height: 28, borderRadius: 7, background: 'var(--accent)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2 4 7v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V7l-8-5z"/></svg>
    </div>
    <span style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-0.01em' }}>Sporda</span>
  </div>
);

// Desktop 5-item tab strip — same IA as mobile bottom nav, hover-elevates.
const TopNav = ({ active = 'matches' }) => (
  <div style={{
    height: 60,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '0 32px',
    borderBottom: '1px solid var(--border-hairline)',
    background: 'var(--bg-base)',
    flex: 'none',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      <Logo/>
      <nav style={{ display: 'flex', gap: 4 }}>
        {[
          { id: 'home',     label: 'Home' },
          { id: 'matches',  label: 'Scores' },
          { id: 'watch',    label: 'Watch' },
          { id: 'news',     label: 'News' },
          { id: 'profile',  label: 'Profile' },
        ].map(t => (
          <button key={t.id} style={{
            padding: '8px 14px',
            borderRadius: 8,
            fontSize: 13,
            fontWeight: t.id === active ? 700 : 500,
            color: t.id === active ? 'var(--text-primary)' : 'var(--text-secondary)',
            background: t.id === active ? 'var(--bg-surface)' : 'transparent',
            position: 'relative',
          }}>
            {t.label}
            {t.id === active && <span style={{ position: 'absolute', left: '50%', bottom: -16, width: 4, height: 4, borderRadius: 2, background: 'var(--accent)', transform: 'translateX(-50%)' }}/>}
          </button>
        ))}
      </nav>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--bg-inset)', padding: '6px 12px 6px 10px', borderRadius: 999, fontSize: 12, color: 'var(--text-muted)', minWidth: 240 }}>
        <I.search size={14}/>
        <span>Search teams, players, leagues…</span>
        <span style={{ marginLeft: 'auto', fontSize: 10, padding: '2px 5px', background: 'var(--bg-surface)', borderRadius: 4, fontWeight: 700 }}>⌘K</span>
      </div>
      <button style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
        <I.bell size={16}/>
        <span style={{ position: 'absolute', top: 8, right: 8, width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }}/>
      </button>
      <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg, #7158E2, #3D5AFE)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11 }}>BR</div>
    </div>
  </div>
);

// Page shell — fills 1280×800. Body splits into the layout pattern per screen.
const DesktopPage = ({ children }) => (
  <div style={{
    width: 1280, height: 800,
    background: 'var(--bg-base)',
    color: 'var(--text-primary)',
    fontFamily: 'var(--font-ui)',
    display: 'flex', flexDirection: 'column',
    overflow: 'hidden',
  }}>
    {children}
  </div>
);

// Compact desktop player hero — wide horizontal band, 200px tall.
const PlayerHeroDesktop = ({ subtab = 'overview' }) => (
  <>
    <div style={{
      padding: '32px 48px 16px',
      background: 'var(--bg-base)',
      display: 'grid',
      gridTemplateColumns: '120px 1fr auto',
      alignItems: 'center',
      gap: 32,
    }}>
      <div style={{ position: 'relative' }}>
        <div style={{
          width: 96, height: 96, borderRadius: '50%',
          background: 'linear-gradient(135deg, ' + SAKA.avatarColor + ' 0%, #C99500 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 800, fontSize: 32, color: '#0A1400',
          boxShadow: '0 8px 24px rgba(255,200,61,0.30)',
        }}>{SAKA.initials}</div>
        <div style={{ position: 'absolute', bottom: -2, right: -2, width: 32, height: 32, borderRadius: '50%', background: SAKA.team.bg, color: 'white', fontSize: 10, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid var(--bg-base)' }}>
          {SAKA.team.code}
        </div>
      </div>
      <div>
        <div style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600, letterSpacing: '0.04em' }}>
          {SAKA.team.name} · #{SAKA.number} · {SAKA.positionCode}
        </div>
        <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.1, marginTop: 4 }}>
          {SAKA.first} <span style={{ color: 'var(--accent)' }}>{SAKA.last}</span>
        </div>
        <div style={{ marginTop: 6, fontSize: 13, color: 'var(--text-secondary)' }}>
          {SAKA.flag} {SAKA.nationality} · {SAKA.age}y · {SAKA.position} · {SAKA.foot} foot
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button style={{
          padding: '10px 18px', borderRadius: 8,
          background: 'var(--bg-surface)', border: '1px solid var(--border-strong)',
          color: 'var(--text-primary)', fontWeight: 700, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}><I.check size={14}/> Following</button>
        <button style={{
          padding: '10px 18px', borderRadius: 8,
          background: 'var(--bg-surface)', border: '1px solid var(--border-strong)',
          color: 'var(--text-primary)', fontWeight: 600, fontSize: 13,
        }}>Compare</button>
        <button style={{
          padding: '10px 14px', borderRadius: 8,
          background: 'var(--bg-surface)', border: '1px solid var(--border-strong)',
          color: 'var(--text-primary)', fontWeight: 600, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}><I.share size={14}/> Share</button>
      </div>
    </div>

    {/* Sub-tabs */}
    <div style={{
      display: 'flex', gap: 32, padding: '0 48px',
      borderBottom: '1px solid var(--border-hairline)',
    }}>
      {['Overview', 'Stats', 'Career', 'Comparison', 'News'].map(t => {
        const key = t.toLowerCase();
        const active = key === subtab;
        return (
          <button key={t} style={{
            padding: '14px 0',
            fontSize: 13, fontWeight: active ? 700 : 500,
            color: active ? 'var(--text-primary)' : 'var(--text-secondary)',
            position: 'relative',
          }}>
            {t}
            {active && <span style={{ position: 'absolute', left: 0, right: 0, bottom: -1, height: 2, background: 'var(--accent)', borderRadius: 2 }}/>}
          </button>
        );
      })}
    </div>
  </>
);

const SourceLineDesktop = ({ text }) => (
  <div style={{ padding: '16px 48px 20px', fontSize: 11, color: 'var(--text-muted)' }}>{text}</div>
);

// ===========================================================================
// 028D — PLAYER · OVERVIEW · DESKTOP
// 3-col layout: profile left · main center · next-match + actions right
// ===========================================================================
const ScreenPlayerOverviewDesktop = () => (
  <DesktopPage>
    <TopNav active="matches"/>
    <div style={{ flex: 1, overflow: 'auto' }}>
      <PlayerHeroDesktop subtab="overview"/>
      <div style={{
        padding: '24px 48px',
        display: 'grid',
        gridTemplateColumns: '300px 1fr 280px',
        gap: 24,
        alignItems: 'flex-start',
      }}>
        {/* LEFT — profile card */}
        <div className="card" style={{ padding: 20 }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 14 }}>Profile</div>
          {[
            { l: 'Position', v: SAKA.position },
            { l: 'Born', v: SAKA.born + ' · ' + SAKA.age + 'y' },
            { l: 'Height', v: SAKA.height },
            { l: 'Weight', v: SAKA.weight },
            { l: 'Foot', v: SAKA.foot },
            { l: 'Contract until', v: SAKA.contractUntil },
            { l: 'Market value', v: '€' + SAKA.marketValueM + 'M' },
            { l: 'Squad #', v: '#' + SAKA.number },
          ].map(x => (
            <div key={x.l} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px solid var(--border-hairline)', fontSize: 13 }}>
              <span style={{ color: 'var(--text-secondary)' }}>{x.l}</span>
              <span style={{ fontWeight: 600 }}>{x.v}</span>
            </div>
          ))}
        </div>

        {/* CENTER — stats + last 5 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Headline stats — 4 cards wide */}
          <div>
            <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>2025–26 · Premier League</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[
                { l: 'Apps', v: 14 },
                { l: 'Goals', v: 11, hl: true },
                { l: 'Assists', v: 12, hl: true },
                { l: 'xG', v: 9.4 },
              ].map(c => (
                <div key={c.l} style={{
                  background: c.hl ? 'rgba(200,255,62,0.10)' : 'var(--bg-surface)',
                  border: '1px solid ' + (c.hl ? 'rgba(200,255,62,0.25)' : 'var(--border-hairline)'),
                  borderRadius: 14, padding: '16px 12px', textAlign: 'center',
                }}>
                  <div className="mono" style={{ fontSize: 28, fontWeight: 800, color: c.hl ? 'var(--accent)' : 'var(--text-primary)' }}>{c.v}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', marginTop: 4 }}>{c.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Last 5 — wider chart */}
          <div className="card" style={{ padding: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Last 5 matches · player rating</span>
              <span className="mono" style={{ fontSize: 14, fontWeight: 800, color: 'var(--accent)' }}>8.4 avg</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
              {[
                { opp: 'BHA', rating: 8.7, goals: 1, assists: 2, dot: 'W' },
                { opp: 'WOL', rating: 7.9, goals: 0, assists: 1, dot: 'W' },
                { opp: 'CHE', rating: 9.1, goals: 2, assists: 1, dot: 'W' },
                { opp: 'NEW', rating: 6.8, goals: 0, assists: 0, dot: 'L' },
                { opp: 'AVL', rating: 9.4, goals: 2, assists: 2, dot: 'W' },
              ].map(m => {
                const h = (m.rating - 5) / 5;
                return (
                  <div key={m.opp} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                    <div style={{ height: 110, width: '100%', background: 'var(--bg-inset)', borderRadius: 6, display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
                      <div style={{ width: '100%', height: `${h * 100}%`, background: m.rating >= 8 ? 'var(--accent)' : m.rating >= 7 ? 'var(--warning)' : 'var(--text-secondary)', borderRadius: '6px 6px 0 0' }}/>
                    </div>
                    <span className="mono" style={{ fontSize: 13, fontWeight: 800 }}>{m.rating}</span>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-muted)' }}>
                      <span className={`fdot ${m.dot}`} style={{ width: 7, height: 7 }}/>
                      <span>{m.opp}</span>
                    </div>
                    {(m.goals > 0 || m.assists > 0) && (
                      <div style={{ display: 'flex', gap: 4, fontSize: 11 }}>
                        {m.goals > 0 && <span style={{ color: 'var(--positive)' }}>⚽{m.goals}</span>}
                        {m.assists > 0 && <span style={{ color: 'var(--accent)' }}>↳{m.assists}</span>}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          {/* Recent contributions feed */}
          <div className="card" style={{ padding: 20 }}>
            <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Goals + assists · last 8</span>
            <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { type: 'G', min: '67\'', game: 'ARS 3–1 AVL', date: 'Sat 21 May' },
                { type: 'A', min: '32\'', game: 'ARS 3–1 AVL', date: 'Sat 21 May' },
                { type: 'A', min: '18\'', game: 'ARS 3–1 AVL', date: 'Sat 21 May' },
                { type: 'A', min: '51\'', game: 'WOL 0–2 ARS', date: 'Wed 18 May' },
                { type: 'G', min: '12\'', game: 'ARS 2–1 CHE', date: 'Sat 14 May' },
                { type: 'G', min: '67\'', game: 'ARS 2–1 CHE', date: 'Sat 14 May' },
              ].map((e, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', background: 'var(--bg-inset)', borderRadius: 8 }}>
                  <div style={{ width: 22, height: 22, borderRadius: 6, background: e.type === 'G' ? 'var(--positive)' : 'rgba(200,255,62,0.20)', color: e.type === 'G' ? '#0A1400' : 'var(--accent)', fontSize: 10, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{e.type}</div>
                  <div style={{ flex: 1, fontSize: 12, fontWeight: 600 }}>{e.game}</div>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>{e.min}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT — actions rail */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Next match countdown */}
          <div className="card" style={{ padding: 16 }}>
            <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Next match</span>
            <div style={{ marginTop: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <Crest name="Liverpool" code="LIV" bg="#C8102E"/>
                <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)' }}>VS</span>
                <ArsenalCrest size={36}/>
              </div>
              <Countdown d={2} h={4} m={32} s={11} label="Kick-off in"/>
              <div style={{ marginTop: 10, fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>Sat 28 May · 21:00 · Anfield</div>
            </div>
          </div>

          {/* Notification preferences */}
          <div className="card" style={{ padding: 16 }}>
            <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Alerts</span>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { l: 'Goals & assists', on: true },
                { l: 'Match start', on: true },
                { l: 'Lineup announced', on: false },
              ].map(a => (
                <div key={a.l} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
                  <span>{a.l}</span>
                  <div className={'toggle' + (a.on ? ' on' : '')}/>
                </div>
              ))}
            </div>
          </div>

          {/* Compare with */}
          <div className="card" style={{ padding: 16 }}>
            <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Compare with</span>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { name: 'M. Salah', club: 'LIV · RW', color: '#C8102E' },
                { name: 'P. Foden', club: 'MCI · CAM', color: '#6CABDD' },
                { name: 'Vinícius Jr', club: 'RMA · LW', color: '#FFFFFF' },
              ].map(p => (
                <button key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 8, borderRadius: 8, background: 'var(--bg-inset)' }}>
                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: p.color, color: p.color === '#FFFFFF' ? '#0A1400' : 'white', fontSize: 10, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    {p.name.split(' ').map(x => x.replace('.', '')[0]).join('').slice(0, 2).toUpperCase()}
                  </div>
                  <div style={{ flex: 1, textAlign: 'left' }}>
                    <div style={{ fontSize: 12, fontWeight: 600 }}>{p.name}</div>
                    <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>{p.club}</div>
                  </div>
                  <I.chevR/>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
      <SourceLineDesktop text="Stats · Opta + StatsBomb · updated 4 min ago"/>
    </div>
  </DesktopPage>
);

// ===========================================================================
// 029D — PLAYER · STATS · DESKTOP
// Wide stat groups in 3-col grid + side panel
// ===========================================================================
const ScreenPlayerStatsDesktop = () => (
  <DesktopPage>
    <TopNav active="matches"/>
    <div style={{ flex: 1, overflow: 'auto' }}>
      <PlayerHeroDesktop subtab="stats"/>
      <div style={{
        padding: '24px 48px',
        display: 'grid',
        gridTemplateColumns: '1fr 320px',
        gap: 24,
        alignItems: 'flex-start',
      }}>
        {/* Main — 3 stat groups in 3-col grid */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <div style={{ display: 'flex', gap: 8 }}>
              {['Premier League', 'UCL', 'EFL Cup', 'All comps'].map((c, i) => (
                <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`}>{c}</div>
              ))}
            </div>
            <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>2025–26 · per 90 · vs PL wingers · 1,124 min played</div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {[
              { title: 'Attacking', rows: [
                { lbl: 'Goals', v: 0.88, pct: 94 },
                { lbl: 'Assists', v: 0.96, pct: 97 },
                { lbl: 'xG', v: 0.74, pct: 89 },
                { lbl: 'xA', v: 0.71, pct: 92 },
                { lbl: 'Shots on tgt', v: 1.4, pct: 84 },
                { lbl: 'Chances created', v: 3.6, pct: 93 },
              ]},
              { title: 'Passing', rows: [
                { lbl: 'Pass accuracy', v: '87%', pct: 72 },
                { lbl: 'Progressive', v: 6.4, pct: 88 },
                { lbl: 'Key passes', v: 2.8, pct: 85 },
                { lbl: 'Crosses (att.)', v: 4.1, pct: 91 },
                { lbl: 'Through balls', v: 0.9, pct: 78 },
                { lbl: 'Pass into box', v: 2.2, pct: 86 },
              ]},
              { title: 'Defensive', rows: [
                { lbl: 'Tackles won', v: 1.1, pct: 42 },
                { lbl: 'Recoveries', v: 4.8, pct: 65 },
                { lbl: 'Aerials won', v: 0.4, pct: 18 },
                { lbl: 'Interceptions', v: 0.6, pct: 38 },
                { lbl: 'Pressures', v: 18.4, pct: 71 },
                { lbl: 'Blocks', v: 0.2, pct: 22 },
              ]},
            ].map(group => (
              <div key={group.title} className="card" style={{ padding: 18 }}>
                <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 12 }}>{group.title}</div>
                {group.rows.map(r => (
                  <div key={r.lbl} style={{ padding: '10px 0', borderBottom: '1px solid var(--border-hairline)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontSize: 12 }}>{r.lbl}</span>
                      <span className="mono" style={{ fontSize: 13, fontWeight: 800 }}>{r.v}</span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <div style={{ flex: 1, height: 3, background: 'var(--bg-inset)', borderRadius: 2 }}>
                        <div style={{ width: `${r.pct}%`, height: '100%', background: r.pct >= 80 ? 'var(--accent)' : r.pct >= 50 ? 'var(--warning)' : 'var(--text-secondary)', borderRadius: 2 }}/>
                      </div>
                      <span className="mono" style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 700, minWidth: 32, textAlign: 'right' }}>
                        {r.pct >= 80 ? 'TOP ' + (100 - r.pct) + '%' : r.pct + 'th'}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>

        {/* Right rail — share stat */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{
            background: 'var(--hero-grad)',
            border: '1px solid rgba(200,255,62,0.15)',
            borderRadius: 18, padding: 22,
          }}>
            <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 8 }}>Stat of the season</div>
            <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1.2, textWrap: 'pretty' }}>
              Saka leads the Premier League in <span style={{ color: 'var(--accent)' }}>chances created</span> (51) — averaging 3.6 per 90, more than any winger in Europe's top 5 leagues.
            </div>
            <button style={{ marginTop: 18, padding: '8px 14px', fontSize: 12, color: 'var(--accent-ink)', background: 'var(--accent)', fontWeight: 700, borderRadius: 8, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <I.share size={12}/> Share as image
            </button>
          </div>

          <div className="card" style={{ padding: 18 }}>
            <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Season filter</span>
            <select style={{
              marginTop: 10, width: '100%', padding: '10px 12px',
              background: 'var(--bg-inset)', border: '1px solid var(--border-hairline)',
              borderRadius: 8, color: 'var(--text-primary)', fontSize: 13, fontWeight: 600,
            }}>
              <option>2025–26</option>
              <option>2024–25</option>
              <option>2023–24</option>
            </select>
            <div style={{ marginTop: 10, fontSize: 11, color: 'var(--text-muted)' }}>14 matches · 1,124 min</div>
          </div>
        </div>
      </div>
      <SourceLineDesktop text="Stats · Opta + StatsBomb · updated 4 min ago"/>
    </div>
  </DesktopPage>
);

// ===========================================================================
// 030D — PLAYER · CAREER · DESKTOP
// Full-width table + horizontal club rail
// ===========================================================================
const ScreenPlayerCareerDesktop = () => {
  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 },
  ];
  return (
    <DesktopPage>
      <TopNav active="matches"/>
      <div style={{ flex: 1, overflow: 'auto' }}>
        <PlayerHeroDesktop subtab="career"/>
        <div style={{ padding: '24px 48px', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 24, alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Totals */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {[
                { l: 'Senior apps', v: 256 },
                { l: 'Goals', v: 79, hl: true },
                { l: 'Assists', v: 64, hl: true },
              ].map(c => (
                <div key={c.l} style={{
                  background: c.hl ? 'rgba(200,255,62,0.10)' : 'var(--bg-surface)',
                  border: '1px solid ' + (c.hl ? 'rgba(200,255,62,0.25)' : 'var(--border-hairline)'),
                  borderRadius: 14, padding: '18px', textAlign: 'center',
                }}>
                  <div className="mono" style={{ fontSize: 36, fontWeight: 800, color: c.hl ? 'var(--accent)' : 'var(--text-primary)' }}>{c.v}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700, marginTop: 4, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{c.l}</div>
                </div>
              ))}
            </div>

            {/* Horizontal career rail */}
            <div className="card" style={{ padding: 20 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Career path</span>
              <div style={{ marginTop: 16, position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
                <div style={{ position: 'absolute', left: 18, right: 18, top: 18, height: 2, background: 'var(--border-hairline)' }}/>
                {[
                  { club: 'Greenford Celtic (youth)', code: 'GFC', bg: '#22C55E', years: '2008–2015', detail: 'First club, age 7' },
                  { club: 'Arsenal U-18 / U-23',      code: 'A',   bg: '#7158E2', years: '2015–2019', detail: 'Academy graduate' },
                  { club: 'Arsenal',                   code: 'ARS', bg: '#EF0107', years: '2019–present', detail: '256 games · 79 goals', current: true },
                ].map(c => (
                  <div key={c.club} style={{ position: 'relative', textAlign: 'center', paddingTop: 50 }}>
                    <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 36, height: 36, borderRadius: '50%', background: c.bg, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 11, border: '3px solid var(--bg-base)', zIndex: 1 }}>
                      {c.code}
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center' }}>
                      {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={{ marginTop: 4, fontSize: 11, color: 'var(--text-muted)' }}>{c.years}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{c.detail}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Wide season table */}
            <div className="card" style={{ padding: 0 }}>
              <div style={{ padding: '14px 20px', 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>
                <button style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-secondary)' }}>Export CSV</button>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 80px 60px 60px 60px 60px 60px', padding: '10px 20px', 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>Comp</span>
                <span style={{ textAlign: 'right' }}>Apps</span>
                <span style={{ textAlign: 'right' }}>Min</span>
                <span style={{ textAlign: 'right' }}>Goals</span>
                <span style={{ textAlign: 'right' }}>Assists</span>
                <span style={{ textAlign: 'right' }}>G+A/90</span>
              </div>
              {seasons.map(s => {
                const min = s.apps * 75;
                const ga90 = ((s.goals + s.assists) / (min / 90)).toFixed(2);
                return (
                  <div key={s.year} style={{
                    display: 'grid', gridTemplateColumns: '110px 1fr 80px 60px 60px 60px 60px 60px',
                    padding: '12px 20px', 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 style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{s.comp}</span>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 12 }}>{s.apps}</span>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 11, color: 'var(--text-secondary)' }}>{min.toLocaleString()}</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>
                    <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--text-muted)' }}>{ga90}</span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Right — international */}
          <div className="card" style={{ padding: 20 }}>
            <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>International · 🏴󠁧󠁢󠁥󠁮󠁧󠁿 England</span>
            <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, textAlign: 'center' }}>
              <div><div className="mono" style={{ fontSize: 24, 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: 24, 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: 24, fontWeight: 800 }}>8</div><div style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 700, marginTop: 2 }}>ASSISTS</div></div>
            </div>
            <div style={{ marginTop: 14, padding: '12px 14px', background: 'var(--bg-inset)', borderRadius: 10, fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
              <strong style={{ color: 'var(--text-primary)' }}>Debut</strong> 8 Oct 2020 vs Wales<br/>
              <strong style={{ color: 'var(--text-primary)' }}>Tournament</strong> Euro 2024 finalist<br/>
              <strong style={{ color: 'var(--text-primary)' }}>Career start</strong> Played for England U-21 (12 caps, 7 goals)
            </div>
          </div>
        </div>
        <SourceLineDesktop text="Career data · Transfermarkt + EnglandFootball.com · sourced 14 Apr 2026"/>
      </div>
    </DesktopPage>
  );
};

Object.assign(window, {
  TopNav, Logo, DesktopPage, PlayerHeroDesktop, SourceLineDesktop,
  ScreenPlayerOverviewDesktop, ScreenPlayerStatsDesktop, ScreenPlayerCareerDesktop,
});