// Sporda — Phase D · League detail. Canonical: Premier League.
// Mobile screens 034 Fixtures · 035 Top scorers · 036 Bracket (PL clubs in UCL)
// · 037 News. 033 Standings already shipped in screens-1.jsx (session 1).

const PL = {
  name: 'Premier League',
  short: 'Premier League',
  code: 'PL',
  bg: '#3D5AFE',
  season: '2025–26',
  matchweek: 14,
  totalWeeks: 38,
  teams: 20,
};

// ----- Shared LeagueHeader (matches Team header pattern) ------------------
const LeagueHeader = ({ subtab = 'standings' }) => (
  <>
    {/* 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)' }}>{PL.season}</div>
      </div>
      <RoundBtn><I.share size={16}/></RoundBtn>
    </div>

    {/* Hero — crest + name + meta */}
    <div style={{ padding: '0 20px 16px', textAlign: 'center' }}>
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
        <div style={{
          width: 72, height: 72, borderRadius: 18,
          background: 'linear-gradient(135deg, ' + PL.bg + ' 0%, #1E2EAE 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 800, fontSize: 18, color: 'white',
          boxShadow: '0 6px 18px rgba(61,90,254,0.30)',
        }}>{PL.code}</div>
      </div>
      <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.01em' }}>{PL.name}</div>
      <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
        Matchweek <span style={{ color: 'var(--accent)', fontWeight: 700 }}>{PL.matchweek}</span> of {PL.totalWeeks} · {PL.teams} teams
      </div>
    </div>

    {/* Sub-tabs */}
    <div className="subtabs">
      {['Standings', 'Fixtures', 'Top scorers', 'Bracket', 'News'].map(t => {
        const key = t.toLowerCase().replace(' ', '-');
        return <div key={t} className={`subtab ${key === subtab ? 'active' : ''}`}>{t}</div>;
      })}
    </div>
  </>
);

// ===========================================================================
// 034 — LEAGUE · FIXTURES (mobile)
// ===========================================================================
const ScreenLeagueFixtures = () => {
  const matchweeks = [
    { wk: 14, label: 'This weekend', complete: 'partial', items: [
      { d: 'Sat 28 May', t: '17:30', home: 'Liverpool',  hc: 'LIV', hb: '#C8102E', away: 'Arsenal',   ac: 'ARS', ab: '#EF0107', big: true },
      { d: 'Sat 28 May', t: '15:00', home: 'Chelsea',    hc: 'CHE', hb: '#034694', away: 'Brighton',  ac: 'BHA', ab: '#0057B8' },
      { d: 'Sat 28 May', t: '15:00', home: 'Man City',   hc: 'MCI', hb: '#6CABDD', away: 'West Ham',  ac: 'WHU', ab: '#7A263A' },
      { d: 'Sat 28 May', t: '12:30', home: 'Newcastle',  hc: 'NEW', hb: '#241F20', away: 'Wolves',    ac: 'WOL', ab: '#FDB913' },
      { d: 'Sun 29 May', t: '14:00', home: 'Tottenham',  hc: 'TOT', hb: '#132257', away: 'Villa',     ac: 'AVL', ab: '#670E36' },
      { d: 'Sun 29 May', t: '16:30', home: 'Man United', hc: 'MUN', hb: '#DA291C', away: 'Everton',   ac: 'EVE', ab: '#003399' },
    ]},
    { wk: 15, label: 'Next weekend', items: [
      { d: 'Sat 4 Jun', t: '15:00', home: 'Arsenal',  hc: 'ARS', hb: '#EF0107', away: 'Man City',  ac: 'MCI', ab: '#6CABDD', big: true },
      { d: 'Sat 4 Jun', t: '15:00', home: 'Brighton', hc: 'BHA', hb: '#0057B8', away: 'Liverpool', ac: 'LIV', ab: '#C8102E' },
      { d: 'Sun 5 Jun', t: '16:30', home: 'Chelsea',  hc: 'CHE', hb: '#034694', away: 'Tottenham', ac: 'TOT', ab: '#132257', derby: true },
    ]},
  ];
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <LeagueHeader subtab="fixtures"/>

          {/* Matchweek picker */}
          <div style={{ padding: '14px 20px 12px', display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none' }}>
            {['MW 12', 'MW 13', 'MW 14', 'MW 15', 'MW 16'].map((w, i) => (
              <div key={w} className={`pill ${i === 2 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{w}</div>
            ))}
          </div>
          <div style={{ padding: '0 20px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <button style={{ fontSize: 12, color: 'var(--text-secondary)', display: 'inline-flex', alignItems: 'center', gap: 4, fontWeight: 600 }}>
              <I.cal size={14}/> Calendar view
            </button>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700 }}>Followed only</span>
              <div className="toggle"/>
            </div>
          </div>

          {matchweeks.map(grp => (
            <div key={grp.wk}>
              <div style={{ padding: '6px 20px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>
                  MW {grp.wk} · {grp.label}
                </div>
                {grp.complete === 'partial' && <span style={{ fontSize: 10, color: 'var(--accent)', fontWeight: 700 }}>· upcoming</span>}
              </div>
              <div style={{ padding: '0 20px 10px' }}>
                {grp.items.map((m, i) => (
                  <div key={i} style={{
                    background: m.big ? 'var(--hero-grad)' : 'var(--bg-surface)',
                    border: '1px solid ' + (m.derby ? '#C8102E40' : 'var(--border-hairline)'),
                    borderRadius: 14, padding: '12px 14px', marginBottom: 8,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--text-secondary)' }}>
                        <span className="mono" style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{m.d.split(' ').slice(1).join(' ')}</span>
                        <span>·</span>
                        <span className="mono">{m.t}</span>
                        {m.derby && <span style={{ padding: '2px 6px', background: 'rgba(200,16,46,0.15)', color: '#FF6B7A', borderRadius: 4, fontSize: 9, fontWeight: 700, letterSpacing: '0.04em' }}>DERBY</span>}
                        {m.big && <span style={{ padding: '2px 6px', background: 'rgba(200,255,62,0.15)', color: 'var(--accent)', borderRadius: 4, fontSize: 9, fontWeight: 700, letterSpacing: '0.04em' }}>FEATURED</span>}
                      </div>
                      <button style={{ color: 'var(--text-muted)' }}><I.bell size={14}/></button>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 10 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
                        <span style={{ fontSize: 13, fontWeight: 600 }}>{m.home}</span>
                        <Crest name={m.home} code={m.hc} bg={m.hb}/>
                      </div>
                      <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)' }}>vs</span>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Crest name={m.away} code={m.ac} bg={m.ab}/>
                        <span style={{ fontSize: 13, fontWeight: 600 }}>{m.away}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}

          <SourceLine text="Fixtures · Premier League · refreshed 5 min ago"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 035 — LEAGUE · TOP SCORERS (mobile)
// ===========================================================================
const PL_SCORERS = [
  { rank: 1, name: 'Erling Haaland',   short: 'Haaland',  team: 'MCI', bg: '#6CABDD', goals: 14, assists: 2,  apps: 14, xg: 13.8 },
  { rank: 2, name: 'Bukayo Saka',      short: 'Saka',     team: 'ARS', bg: '#EF0107', goals: 11, assists: 12, apps: 14, xg: 9.4 },
  { rank: 3, name: 'Mohamed Salah',    short: 'Salah',    team: 'LIV', bg: '#C8102E', goals: 9,  assists: 6,  apps: 13, xg: 10.5 },
  { rank: 4, name: 'Ollie Watkins',    short: 'Watkins',  team: 'AVL', bg: '#670E36', goals: 8,  assists: 3,  apps: 14, xg: 7.2 },
  { rank: 5, name: 'Alexander Isak',   short: 'Isak',     team: 'NEW', bg: '#241F20', goals: 7,  assists: 1,  apps: 12, xg: 6.8 },
  { rank: 6, name: 'Phil Foden',       short: 'Foden',    team: 'MCI', bg: '#6CABDD', goals: 7,  assists: 5,  apps: 14, xg: 5.9 },
  { rank: 7, name: 'Kai Havertz',      short: 'Havertz',  team: 'ARS', bg: '#EF0107', goals: 7,  assists: 3,  apps: 14, xg: 8.1 },
  { rank: 8, name: 'Cole Palmer',      short: 'Palmer',   team: 'CHE', bg: '#034694', goals: 6,  assists: 8,  apps: 13, xg: 5.4 },
  { rank: 9, name: 'Bryan Mbeumo',     short: 'Mbeumo',   team: 'BRE', bg: '#E30613', goals: 6,  assists: 2,  apps: 14, xg: 5.2 },
  { rank: 10,name: 'Heung-min Son',    short: 'Son',      team: 'TOT', bg: '#132257', goals: 5,  assists: 4,  apps: 13, xg: 4.9 },
];

const ScreenLeagueScorers = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <LeagueHeader subtab="top-scorers"/>

        {/* Filter pills */}
        <div style={{ padding: '14px 20px 12px', display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none' }}>
          {['Goals', 'Assists', 'G + A', 'xG'].map((c, i) => (
            <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{c}</div>
          ))}
        </div>

        {/* Podium */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr 1fr', gap: 8, alignItems: 'end' }}>
            {[PL_SCORERS[1], PL_SCORERS[0], PL_SCORERS[2]].map((p, i) => {
              const place = [2, 1, 3][i];
              const h = [90, 110, 80][i];
              const color = [
                'linear-gradient(135deg, #C0C0C0, #888)',
                'linear-gradient(135deg, var(--accent), #88B021)',
                'linear-gradient(135deg, #CD7F32, #8B5A1F)',
              ][i];
              return (
                <div key={p.name} style={{ textAlign: 'center' }}>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: p.bg, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 13, margin: '0 auto 6px' }}>
                    {p.short.slice(0, 2).toUpperCase()}
                  </div>
                  <div style={{ fontSize: 12, fontWeight: 700, marginBottom: 2 }}>{p.short}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-muted)', marginBottom: 6 }}>{p.team}</div>
                  <div style={{
                    background: color, color: place === 1 ? 'var(--accent-ink)' : 'white',
                    borderRadius: '10px 10px 0 0', padding: '10px 6px', height: h,
                    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', gap: 4,
                  }}>
                    <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.05em' }}>{place === 1 ? '1ST' : place === 2 ? '2ND' : '3RD'}</div>
                    <div className="mono" style={{ fontSize: 26, fontWeight: 900 }}>{p.goals}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Full table */}
        <div style={{ padding: '0 20px 4px' }}>
          <div className="card" style={{ padding: 0 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '24px 1fr 32px 32px 36px', padding: '12px 16px', 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' }}>G</span><span style={{ textAlign: 'right' }}>A</span><span style={{ textAlign: 'right' }}>xG</span>
            </div>
            {PL_SCORERS.map(p => (
              <div key={p.rank} style={{ display: 'grid', gridTemplateColumns: '24px 1fr 32px 32px 36px', padding: '12px 16px', alignItems: 'center', borderBottom: '1px solid var(--border-hairline)' }}>
                <span className="mono" style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 700 }}>{p.rank}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: p.bg, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 10 }}>
                    {p.short.slice(0, 2).toUpperCase()}
                  </div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{p.short}</div>
                    <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>{p.team} · {p.apps} apps</div>
                  </div>
                </div>
                <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 800, color: p.rank === 1 ? 'var(--accent)' : 'var(--text-primary)' }}>{p.goals}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 12 }}>{p.assists}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 11, color: 'var(--text-secondary)' }}>{p.xg}</span>
              </div>
            ))}
          </div>
        </div>

        <SourceLine text="Top scorers · Premier League · Opta · updated 6 min ago"/>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

Object.assign(window, {
  PL, PL_SCORERS, LeagueHeader, ScreenLeagueFixtures, ScreenLeagueScorers,
});