// Sporda — Phase C desktop · Comparison + News

// ===========================================================================
// 031D — PLAYER · COMPARISON · DESKTOP
// Two-column player headers + center bars + radar
// ===========================================================================
const ScreenPlayerCompareDesktop = () => {
  const metrics = [
    { lbl: 'Goals',           l: 0.88, r: 0.62, leftBetter: true },
    { lbl: 'Assists',         l: 0.96, r: 0.45, leftBetter: true },
    { lbl: 'xG',              l: 0.74, r: 0.81, leftBetter: false },
    { lbl: 'xA',              l: 0.71, r: 0.38, leftBetter: true },
    { lbl: 'Shots / 90',      l: 2.8,  r: 3.4,  leftBetter: false },
    { lbl: 'Chances created', l: 3.6,  r: 2.4,  leftBetter: true },
    { lbl: 'Pass accuracy',   l: '87%', r: '79%', leftBetter: true },
    { lbl: 'Successful dribbles', l: 3.1, r: 2.4, leftBetter: true },
    { lbl: 'Tackles won',     l: 1.1,  r: 0.6,  leftBetter: true },
  ];
  return (
    <DesktopPage>
      <TopNav active="matches"/>
      <div style={{ flex: 1, overflow: 'auto' }}>
        <PlayerHeroDesktop subtab="comparison"/>
        <div style={{ padding: '24px 48px' }}>
          {/* Comparison header — two players */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 24, marginBottom: 24 }}>
            <div style={{ background: 'var(--hero-grad)', borderRadius: 18, padding: 24, border: '1px solid rgba(200,255,62,0.15)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'linear-gradient(135deg, #FFC83D, #C99500)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 24, color: '#0A1400' }}>BS</div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Subject</div>
                  <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1.1 }}>Bukayo Saka</div>
                  <div style={{ marginTop: 2, fontSize: 12, color: 'var(--text-secondary)' }}>Arsenal · RW · 24y · 🏴󠁧󠁢󠁥󠁮󠁧󠁿</div>
                </div>
              </div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--text-muted)', letterSpacing: '0.1em' }}>VS</div>
            <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)', borderRadius: 18, padding: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'linear-gradient(135deg, #C8102E, #6D050A)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 24, color: 'white' }}>MS</div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Opponent</div>
                  <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1.1 }}>Mohamed Salah</div>
                  <div style={{ marginTop: 2, fontSize: 12, color: 'var(--text-secondary)' }}>Liverpool · RW · 33y · 🇪🇬</div>
                </div>
                <button style={{ marginLeft: 'auto', padding: '8px 12px', background: 'var(--bg-inset)', border: '1px solid var(--border-hairline)', borderRadius: 8, fontSize: 11, fontWeight: 700, color: 'var(--text-secondary)' }}>Change</button>
              </div>
            </div>
          </div>

          {/* Bars + radar two-col */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 24, alignItems: 'flex-start' }}>
            <div className="card" style={{ padding: 20 }}>
              <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 14 }}>2025–26 · Premier League · per 90</div>
              {metrics.map(m => {
                const total = (typeof m.l === 'number' ? m.l : parseFloat(m.l)) + (typeof m.r === 'number' ? m.r : parseFloat(m.r));
                const lShare = total > 0 ? ((typeof m.l === 'number' ? m.l : parseFloat(m.l)) / total) * 100 : 50;
                return (
                  <div key={m.lbl} style={{ padding: '14px 0', borderBottom: '1px solid var(--border-hairline)' }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
                      <span className="mono" style={{ fontSize: 16, fontWeight: 800, color: m.leftBetter ? 'var(--accent)' : 'var(--text-primary)' }}>{m.l}</span>
                      <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{m.lbl}</span>
                      <span className="mono" style={{ fontSize: 16, fontWeight: 800, color: m.leftBetter ? 'var(--text-primary)' : 'var(--accent)' }}>{m.r}</span>
                    </div>
                    <div style={{ display: 'flex', height: 5, gap: 2 }}>
                      <div style={{ flex: lShare, background: m.leftBetter ? 'var(--accent)' : 'var(--text-secondary)', opacity: m.leftBetter ? 1 : 0.4, borderRadius: '3px 0 0 3px' }}/>
                      <div style={{ flex: 100 - lShare, background: m.leftBetter ? 'var(--text-secondary)' : 'var(--accent)', opacity: m.leftBetter ? 0.4 : 1, borderRadius: '0 3px 3px 0' }}/>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Radar + summary */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="card" style={{ padding: 20 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Profile radar</span>
                <div style={{ marginTop: 14, display: 'flex', justifyContent: 'center' }}>
                  <svg viewBox="-110 -110 220 220" width={260} height={260}>
                    {/* Pentagon rings */}
                    {[1, 0.75, 0.5, 0.25].map(s => {
                      const pts = Array.from({ length: 6 }, (_, i) => {
                        const a = -Math.PI / 2 + (i * Math.PI * 2 / 6);
                        return [Math.cos(a) * 90 * s, Math.sin(a) * 90 * s].join(',');
                      }).join(' ');
                      return <polygon key={s} points={pts} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="0.8"/>;
                    })}
                    {/* Saka shape */}
                    <polygon points={[
                      [0, -88], [76, -38], [76, 38], [0, 84], [-72, 36], [-78, -36],
                    ].map(p => p.join(',')).join(' ')} fill="rgba(200,255,62,0.20)" stroke="var(--accent)" strokeWidth="1.5"/>
                    {/* Salah shape */}
                    <polygon points={[
                      [0, -72], [80, -42], [62, 30], [0, 64], [-50, 26], [-66, -32],
                    ].map(p => p.join(',')).join(' ')} fill="rgba(200,16,46,0.10)" stroke="#C8102E" strokeWidth="1.5" strokeDasharray="3 2"/>
                    {/* Axis labels */}
                    {['Goal', 'xG', 'xA', 'Pass', 'Dribble', 'Defense'].map((lbl, i) => {
                      const a = -Math.PI / 2 + (i * Math.PI * 2 / 6);
                      const x = Math.cos(a) * 104;
                      const y = Math.sin(a) * 104;
                      return <text key={lbl} x={x} y={y + 3} fontSize="9" fontWeight="700" fill="rgba(255,255,255,0.6)" textAnchor="middle">{lbl}</text>;
                    })}
                  </svg>
                </div>
                <div style={{ display: 'flex', gap: 14, justifyContent: 'center', fontSize: 11, marginTop: 4 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 10, height: 2, background: 'var(--accent)' }}/>Saka</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 10, height: 2, background: '#C8102E' }}/>Salah</span>
                </div>
              </div>

              <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(--text-secondary)' }}>Overall edge</div>
                <div style={{ marginTop: 8, fontSize: 22, fontWeight: 800, lineHeight: 1.15 }}>
                  Saka leads on <span style={{ color: 'var(--accent)' }}>7 of 9</span> metrics
                </div>
                <div style={{ marginTop: 6, 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>
          </div>
        </div>
        <SourceLineDesktop text="Comparison · Opta + StatsBomb · 2025–26 PL · updated 4 min ago"/>
      </div>
    </DesktopPage>
  );
};

// ===========================================================================
// 032D — PLAYER · NEWS · DESKTOP
// 3-column article grid, featured spans 2
// ===========================================================================
const ScreenPlayerNewsDesktop = () => (
  <DesktopPage>
    <TopNav active="news"/>
    <div style={{ flex: 1, overflow: 'auto' }}>
      <PlayerHeroDesktop subtab="news"/>
      <div style={{ padding: '24px 48px' }}>
        {/* Category pills */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
          {['All', 'Match', 'Interview', 'Stat watch', 'Off-pitch'].map((c, i) => (
            <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`}>{c}</div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 16 }}>
          {/* Featured — spans 2 cols */}
          <div style={{ gridColumn: '1 / 3', background: 'var(--bg-surface)', borderRadius: 18, overflow: 'hidden', border: '1px solid var(--border-hairline)' }}>
            <div style={{ aspectRatio: '16 / 7', position: 'relative', background: 'linear-gradient(135deg, #FFC83D 0%, #DB0007 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div className="tag-micro" style={{ position: 'absolute', top: 16, left: 16, background: 'var(--accent)', color: 'var(--accent-ink)', padding: '6px 12px', borderRadius: 999 }}>Stat watch</div>
              <div style={{ textAlign: 'center', color: '#0A1400' }}>
                <div className="mono" style={{ fontSize: 96, fontWeight: 900, lineHeight: 1 }}>51</div>
                <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: '0.08em', marginTop: 4 }}>CHANCES CREATED</div>
              </div>
            </div>
            <div style={{ padding: 24 }}>
              <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1.25, textWrap: 'pretty', letterSpacing: '-0.005em' }}>
                Bukayo Saka has now created more chances than any other Premier League player this season.
              </div>
              <div style={{ marginTop: 8, fontSize: 13, color: 'var(--text-secondary)' }}>
                With 51 in 14 appearances, he's averaging 3.6 per 90 — the highest rate of any winger across Europe's top five leagues.
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 18 }}>
                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>OptaJoe · 3h ago · 2 min read</div>
                <div style={{ display: 'flex', gap: 16, color: 'var(--text-secondary)' }}>
                  <I.heart/><I.cmt/><I.share/>
                </div>
              </div>
            </div>
          </div>

          {/* Right rail — narrower stack of 2 cards */}
          {[
            { tag: 'Interview', title: '"I owe everything to Mikel" — Saka opens up on Arteta\'s influence', meta: 'The Athletic · 6h ago', color: '#7158E2' },
            { tag: 'Match',     title: 'Five takeaways: Saka & Saliba drive Arsenal past Villa', meta: 'The Guardian · 1d ago', color: '#4ECDC4' },
          ].map((n, i) => (
            <div key={i} style={{ background: 'var(--bg-surface)', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--border-hairline)' }}>
              <div style={{ aspectRatio: '4 / 3', background: `linear-gradient(135deg, ${n.color} 0%, #1A2320 100%)` }}/>
              <div style={{ padding: 14 }}>
                <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 6 }}>{n.tag}</div>
                <div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.3, textWrap: 'pretty' }}>{n.title}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8 }}>{n.meta}</div>
              </div>
            </div>
          ))}

          {/* Row 2: 3 cards equally */}
          {[
            { tag: 'Stat watch', title: 'Saka now level with Henry for most chances created in a single PL season', meta: 'Squawka · 1d ago', color: '#FFE66D' },
            { tag: 'Off-pitch',  title: 'Saka launches second wave of literacy programme in Ealing', meta: 'BBC Sport · 2d ago', color: '#22C55E' },
            { tag: 'Interview',  title: '"England has the squad. We just need to convert" — Saka on the Euros', meta: 'Sky Sports · 4d ago', color: '#3D5AFE' },
          ].map((n, i) => (
            <div key={i} style={{ background: 'var(--bg-surface)', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--border-hairline)' }}>
              <div style={{ aspectRatio: '16 / 9', background: `linear-gradient(135deg, ${n.color} 0%, #1A2320 100%)` }}/>
              <div style={{ padding: 14 }}>
                <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 6 }}>{n.tag}</div>
                <div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.3, textWrap: 'pretty' }}>{n.title}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8 }}>{n.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <SourceLineDesktop text="Articles from licensed partners · refreshed 4 min ago"/>
    </div>
  </DesktopPage>
);

Object.assign(window, {
  ScreenPlayerCompareDesktop, ScreenPlayerNewsDesktop,
});