// Sporda — Phase C · Player detail (5 tabs). Canonical: Bukayo Saka.
// Header pattern mirrors TeamHeader (back chevron + share + hero + sub-tabs).
// Composes Phase A patterns where they fit (long-press, share-as-image).

const SAKA = {
  first: 'Bukayo',
  last: 'Saka',
  shortName: 'B. Saka',
  initials: 'BS',
  nationality: 'England',
  flag: '🏴󠁧󠁢󠁥󠁮󠁧󠁿',
  age: 24,
  born: '5 Sep 2001',
  height: '1.78 m',
  weight: '72 kg',
  foot: 'Left',
  position: 'Right winger',
  positionCode: 'RW',
  team: { name: 'Arsenal', code: 'ARS', bg: '#EF0107' },
  number: 7,
  marketValueM: 130,
  contractUntil: 'Jun 2027',
  avatarColor: '#FFC83D',
};

// Player header — used across all 5 tabs.
const PlayerHeader = ({ subtab = 'overview', following = true }) => (
  <>
    {/* Top row */}
    <div style={{ display: 'flex', alignItems: 'center', padding: '8px 16px 12px', gap: 12 }}>
      <RoundBtn><I.chevL size={18}/></RoundBtn>
      <div style={{ flex: 1, textAlign: 'center' }}>
        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{SAKA.team.name} · #{SAKA.number}</div>
      </div>
      <RoundBtn><I.share size={16}/></RoundBtn>
    </div>

    {/* Hero — avatar + name + meta */}
    <div style={{ padding: '0 20px 16px', textAlign: 'center' }}>
      <div style={{ position: 'relative', display: 'inline-block', marginBottom: 14 }}>
        <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>
        {/* Club crest pinned to avatar */}
        <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 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.01em' }}>{SAKA.first} {SAKA.last}</div>
      <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
        {SAKA.flag} {SAKA.nationality} · {SAKA.positionCode} · {SAKA.age}y
      </div>

      {/* Follow + Compare CTAs */}
      <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 16 }}>
        <button style={{
          padding: '10px 22px', borderRadius: 999,
          background: following ? 'var(--bg-surface)' : 'var(--accent)',
          color: following ? 'var(--text-primary)' : 'var(--accent-ink)',
          border: '1px solid ' + (following ? 'var(--border-strong)' : 'var(--accent)'),
          fontWeight: 700, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>{following ? <><I.check size={14}/> Following</> : '+ Follow'}</button>
        <button style={{
          padding: '10px 18px', borderRadius: 999,
          background: 'var(--bg-surface)', border: '1px solid var(--border-strong)',
          color: 'var(--text-primary)', fontWeight: 600, fontSize: 13,
        }}>Compare</button>
      </div>
    </div>

    {/* Sub-tabs */}
    <div className="subtabs">
      {['Overview', 'Stats', 'Career', 'Comparison', 'News'].map(t => {
        const key = t.toLowerCase();
        return <div key={t} className={`subtab ${key === subtab ? 'active' : ''}`}>{t}</div>;
      })}
    </div>
  </>
);

// ===========================================================================
// 028 — PLAYER · OVERVIEW
// Hero stats + recent form + biographical + next match
// ===========================================================================
const ScreenPlayerOverview = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <PlayerHeader subtab="overview"/>

        {/* Headline season stats — 4 cards */}
        <div style={{ padding: '16px 20px 4px' }}>
          <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: 8 }}>
            {[
              { 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: 12, padding: '12px 6px', textAlign: 'center',
              }}>
                <div className="mono" style={{ fontSize: 20, fontWeight: 800, color: c.hl ? 'var(--accent)' : 'var(--text-primary)' }}>{c.v}</div>
                <div style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', marginTop: 2 }}>{c.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Last 5 — rating chart */}
        <div style={{ padding: '12px 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)' }}>Last 5 matches · player rating</span>
              <span className="mono" style={{ fontSize: 13, fontWeight: 800, color: 'var(--accent)' }}>8.4 avg</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
              {[
                { 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: 6 }}>
                    <div style={{ height: 80, 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: 11, fontWeight: 800 }}>{m.rating}</span>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 10, color: 'var(--text-muted)' }}>
                      <span className={`fdot ${m.dot}`} style={{ width: 6, height: 6 }}/>
                      <span>{m.opp}</span>
                    </div>
                    {(m.goals > 0 || m.assists > 0) && (
                      <div style={{ display: 'flex', gap: 3, fontSize: 9 }}>
                        {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>
        </div>

        {/* Bio + contract */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card">
            <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Profile</span>
            <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {[
                { l: 'Position', v: SAKA.position },
                { l: 'Born', v: SAKA.born },
                { l: 'Height', v: SAKA.height },
                { l: 'Foot', v: SAKA.foot },
                { l: 'Contract', v: SAKA.contractUntil },
                { l: 'Market value', v: '€' + SAKA.marketValueM + 'M' },
              ].map(x => (
                <div key={x.l}>
                  <div style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{x.l}</div>
                  <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>{x.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Next match teaser */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card" style={{ padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 40, height: 40, borderRadius: '50%', background: SAKA.team.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, color: 'white', fontSize: 11 }}>
                ARS
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600 }}>Next match · Sat 28 May · 21:00</div>
                <div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>Liverpool vs Arsenal</div>
              </div>
              <I.chevR/>
            </div>
          </div>
        </div>

        <SourceLine text="Stats · Opta + StatsBomb · updated 4 min ago"/>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 029 — PLAYER · STATS
// Per-90 breakdown, attacking/defending split, comparison vs position avg
// ===========================================================================
const StatLine = ({ lbl, p90, vsAvg, percentile }) => (
  <div style={{ padding: '12px 0', borderBottom: '1px solid var(--border-hairline)' }}>
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
      <span style={{ fontSize: 13, fontWeight: 600 }}>{lbl}</span>
      <span className="mono" style={{ fontSize: 14, fontWeight: 800 }}>{p90}</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{ flex: 1, height: 4, background: 'var(--bg-inset)', borderRadius: 2, position: 'relative' }}>
        <div style={{ width: `${percentile}%`, height: '100%', background: percentile >= 80 ? 'var(--accent)' : percentile >= 50 ? 'var(--warning)' : 'var(--text-secondary)', borderRadius: 2 }}/>
        <div style={{ position: 'absolute', left: '50%', top: -2, bottom: -2, width: 1, background: 'var(--text-muted)', opacity: 0.4 }}/>
      </div>
      <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, minWidth: 36, textAlign: 'right' }}>
        {percentile >= 80 ? 'TOP ' + (100 - percentile) + '%' : percentile + 'th'}
      </span>
    </div>
  </div>
);

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

        {/* Filters */}
        <div style={{ padding: '14px 20px 12px', display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none' }}>
          {['Premier League', 'UCL', 'EFL Cup', 'All comps'].map((c, i) => (
            <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{c}</div>
          ))}
        </div>
        <div style={{ padding: '0 20px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-secondary)' }}>
          <span>2025–26 · per 90 min · vs PL wingers</span>
          <span style={{ fontWeight: 700 }}>1,124 min played</span>
        </div>

        {/* Attacking */}
        <div style={{ padding: '0 20px 4px' }}>
          <div className="card">
            <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 6 }}>Attacking</div>
            <StatLine lbl="Goals"          p90={0.88} vsAvg="+0.42" percentile={94}/>
            <StatLine lbl="Assists"        p90={0.96} vsAvg="+0.61" percentile={97}/>
            <StatLine lbl="xG"             p90={0.74} vsAvg="+0.27" percentile={89}/>
            <StatLine lbl="xA"             p90={0.71} vsAvg="+0.34" percentile={92}/>
            <StatLine lbl="Shots on target" p90={1.4} vsAvg="+0.5" percentile={84}/>
            <StatLine lbl="Chances created" p90={3.6} vsAvg="+1.4" percentile={93}/>
          </div>
        </div>

        {/* Passing */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card">
            <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 6 }}>Passing</div>
            <StatLine lbl="Pass accuracy"   p90="87%" vsAvg="+3%" percentile={72}/>
            <StatLine lbl="Progressive passes" p90={6.4} vsAvg="+2.1" percentile={88}/>
            <StatLine lbl="Key passes"      p90={2.8} vsAvg="+1.0" percentile={85}/>
            <StatLine lbl="Crosses (att.)"  p90={4.1} vsAvg="+1.7" percentile={91}/>
          </div>
        </div>

        {/* Defensive */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card">
            <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 6 }}>Defensive</div>
            <StatLine lbl="Tackles won"     p90={1.1} vsAvg="−0.2" percentile={42}/>
            <StatLine lbl="Recoveries"      p90={4.8} vsAvg="+0.6" percentile={65}/>
            <StatLine lbl="Aerials won"     p90={0.4} vsAvg="−0.6" percentile={18}/>
          </div>
        </div>

        {/* Share + source */}
        <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,
          }}>
            <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 6 }}>Stat of the season</div>
            <div style={{ fontSize: 18, fontWeight: 800, lineHeight: 1.25, 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: 14, fontSize: 12, color: 'var(--accent)', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <I.share size={12}/> Share as image
            </button>
          </div>
        </div>

        <SourceLine text="Stats · Opta + StatsBomb · updated 4 min ago"/>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

Object.assign(window, {
  SAKA, PlayerHeader, ScreenPlayerOverview, ScreenPlayerStats,
});