// Sporda — Phase D desktop · 036D Bracket · 037D News.

// ===========================================================================
// 036D — LEAGUE · BRACKET (desktop) — proper tree, PL clubs in UCL
// ===========================================================================
const BracketMatch = ({ home, hc, hb, hs, away, ac, ab, as, won, future, when }) => {
  const homeWon = won === 'h';
  return (
    <div style={{
      background: 'var(--bg-surface)',
      border: '1px solid ' + (future ? 'var(--accent)' : 'var(--border-hairline)'),
      borderRadius: 10, padding: 10,
      width: 200,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '2px 0', opacity: future || homeWon ? 1 : 0.5 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0, flex: 1 }}>
          <Crest name={home} code={hc} bg={hb}/>
          <span style={{ fontSize: 11, fontWeight: homeWon ? 800 : 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{home}</span>
        </div>
        {!future && <span className="mono" style={{ fontSize: 13, fontWeight: 800, color: homeWon ? 'var(--accent)' : 'var(--text-primary)' }}>{hs}</span>}
      </div>
      <div style={{ height: 1, background: 'var(--border-hairline)', margin: '4px 0' }}/>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '2px 0', opacity: future || !homeWon ? 1 : 0.5 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0, flex: 1 }}>
          <Crest name={away} code={ac} bg={ab}/>
          <span style={{ fontSize: 11, fontWeight: !homeWon ? 800 : 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{away}</span>
        </div>
        {!future && <span className="mono" style={{ fontSize: 13, fontWeight: 800, color: !homeWon ? 'var(--accent)' : 'var(--text-primary)' }}>{as}</span>}
      </div>
      {when && <div style={{ marginTop: 6, fontSize: 9, color: 'var(--text-muted)', textAlign: 'center', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{when}</div>}
    </div>
  );
};

const ScreenLeagueBracketDesktop = () => (
  <DesktopPage>
    <TopNav active="matches"/>
    <div style={{ flex: 1, overflow: 'auto' }}>
      <LeagueHeroDesktop subtab="bracket"/>
      <div style={{ padding: '24px 48px' }}>
        {/* Banner */}
        <div style={{ background: 'var(--hero-grad)', border: '1px solid rgba(200,255,62,0.15)', borderRadius: 18, padding: 20, marginBottom: 24, display: 'flex', alignItems: 'center', gap: 24 }}>
          <div>
            <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 6 }}>European competitions</div>
            <div style={{ fontSize: 24, fontWeight: 800, lineHeight: 1.2, textWrap: 'pretty' }}>
              4 of 4 English clubs reached the UCL Round of 16. <span style={{ color: 'var(--accent)' }}>2 remain</span> in the Quarter-finals.
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {['UCL', 'Europa', 'Conference', 'FA Cup'].map((c, i) => (
              <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`}>{c}</div>
            ))}
          </div>
        </div>

        {/* Bracket tree — Round of 16 / QF / SF / Final */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, padding: '8px 0', position: 'relative' }}>
          {/* Column headers */}
          <div style={{ gridColumn: '1 / -1', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
            {['Round of 16', 'Quarter-finals', 'Semi-finals', 'Final'].map(t => (
              <div key={t} style={{ fontSize: 11, fontWeight: 800, color: 'var(--text-secondary)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t}</div>
            ))}
          </div>

          {/* R16 column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <BracketMatch home="Arsenal"     hc="ARS" hb="#EF0107" hs="2" away="Real Madrid"  ac="RMA" ab="#FFFFFF" as="1" won="h"/>
            <BracketMatch home="Bayer Lev."  hc="B04" hb="#E32221" hs="3" away="PSV"          ac="PSV" ab="#ED1C24" as="1" won="h"/>
            <BracketMatch home="Liverpool"   hc="LIV" hb="#C8102E" hs="1" away="Inter"        ac="INT" ab="#0068A8" as="3" won="a"/>
            <BracketMatch home="Atletico"    hc="ATM" hb="#CB3524" hs="2" away="Dortmund"     ac="DOR" ab="#FDE100" as="1" won="h"/>
            <BracketMatch home="Man City"    hc="MCI" hb="#6CABDD" hs="3" away="PSG"          ac="PSG" ab="#004170" as="2" won="h"/>
            <BracketMatch home="Bayern"      hc="BAY" hb="#DC052D" hs="2" away="Aston Villa"  ac="AVL" ab="#670E36" as="2" won="a"/>
            <BracketMatch home="Barcelona"   hc="BAR" hb="#A50044" hs="3" away="Napoli"       ac="NAP" ab="#12A0D7" as="1" won="h"/>
            <BracketMatch home="Juventus"    hc="JUV" hb="#000000" hs="1" away="Benfica"      ac="BEN" ab="#E60026" as="2" won="a"/>
          </div>

          {/* QF column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28, paddingTop: 24 }}>
            <BracketMatch future when="Apr 8 · Emirates" home="Arsenal" hc="ARS" hb="#EF0107" away="Bayer Leverkusen" ac="B04" ab="#E32221"/>
            <BracketMatch future when="Apr 9 · Stadio" home="Inter" hc="INT" hb="#0068A8" away="Atletico Madrid" ac="ATM" ab="#CB3524"/>
            <BracketMatch future when="Apr 8 · Etihad" home="Man City" hc="MCI" hb="#6CABDD" away="Bayern" ac="BAY" ab="#DC052D"/>
            <BracketMatch future when="Apr 9 · Camp Nou" home="Barcelona" hc="BAR" hb="#A50044" away="Benfica" ac="BEN" ab="#E60026"/>
          </div>

          {/* SF column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 110, paddingTop: 75 }}>
            <div style={{ background: 'var(--bg-surface)', border: '1px dashed var(--border-strong)', borderRadius: 10, padding: 14, width: 200, textAlign: 'center', color: 'var(--text-muted)' }}>
              <div style={{ fontSize: 11, fontWeight: 700 }}>QF winner</div>
              <div style={{ fontSize: 9, marginTop: 2 }}>vs</div>
              <div style={{ fontSize: 11, fontWeight: 700 }}>QF winner</div>
              <div style={{ fontSize: 9, color: 'var(--text-muted)', marginTop: 6, letterSpacing: '0.04em' }}>APR 28</div>
            </div>
            <div style={{ background: 'var(--bg-surface)', border: '1px dashed var(--border-strong)', borderRadius: 10, padding: 14, width: 200, textAlign: 'center', color: 'var(--text-muted)' }}>
              <div style={{ fontSize: 11, fontWeight: 700 }}>QF winner</div>
              <div style={{ fontSize: 9, marginTop: 2 }}>vs</div>
              <div style={{ fontSize: 11, fontWeight: 700 }}>QF winner</div>
              <div style={{ fontSize: 9, color: 'var(--text-muted)', marginTop: 6, letterSpacing: '0.04em' }}>APR 29</div>
            </div>
          </div>

          {/* Final column */}
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 160 }}>
            <div style={{
              background: 'var(--hero-grad)',
              border: '1px solid rgba(200,255,62,0.30)',
              borderRadius: 14, padding: 16, width: 200, textAlign: 'center',
            }}>
              <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--accent)', letterSpacing: '0.08em' }}>FINAL</div>
              <div style={{ fontSize: 22, fontWeight: 900, marginTop: 8 }}>🏆</div>
              <div style={{ marginTop: 10, fontSize: 9, color: 'var(--text-muted)', letterSpacing: '0.04em', fontWeight: 700 }}>MAY 30 · WEMBLEY</div>
            </div>
          </div>
        </div>
      </div>
      <SourceLineDesktop text="UEFA Champions League · official UEFA data · refreshed 8 min ago"/>
    </div>
  </DesktopPage>
);

// ===========================================================================
// 037D — LEAGUE · NEWS (desktop) — magazine layout
// ===========================================================================
const ScreenLeagueNewsDesktop = () => (
  <DesktopPage>
    <TopNav active="news"/>
    <div style={{ flex: 1, overflow: 'auto' }}>
      <LeagueHeroDesktop subtab="news"/>
      <div style={{ padding: '24px 48px' }}>
        {/* Filter pills */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
          {['All', 'Match reports', 'Transfers', 'Tactics', 'Officials'].map((c, i) => (
            <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`}>{c}</div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, marginBottom: 16 }}>
          {/* Featured */}
          <div style={{ 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, #C8102E 0%, #3D5AFE 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 }}>Title race</div>
              <div style={{ textAlign: 'center', color: 'white' }}>
                <div style={{ fontSize: 96, fontWeight: 900, lineHeight: 1, letterSpacing: '-0.04em' }}>3 pts</div>
                <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: '0.08em', marginTop: 6 }}>BETWEEN LIVERPOOL & ARSENAL</div>
              </div>
            </div>
            <div style={{ padding: 24 }}>
              <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1.25, textWrap: 'pretty' }}>
                The Premier League title race tightens: 24 games to go, three points and 50 miles between top and second.
              </div>
              <div style={{ marginTop: 8, fontSize: 13, color: 'var(--text-secondary)' }}>
                Arteta's defense has conceded the fewest. Slot's attack has scored the most. The Anfield clash this weekend may settle which holds the lead at Christmas.
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 16 }}>
                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>The Athletic · 2h ago · 4 min read</div>
                <div style={{ display: 'flex', gap: 14 }}><I.heart/><I.cmt/><I.share/></div>
              </div>
            </div>
          </div>

          {/* Right side — 2 stacked */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { tag: 'Match reports', title: 'Arsenal 3–1 Aston Villa: Saka brace keeps pressure on Liverpool', meta: 'BBC Sport · 5h ago', color: '#EF0107' },
              { tag: 'Transfers', title: 'Newcastle target Brighton\'s Mitoma in summer move — sources', meta: 'Sky Sports · 8h ago', color: '#241F20' },
            ].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: 14, fontWeight: 700, lineHeight: 1.3 }}>{n.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8 }}>{n.meta}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Row of 4 */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            { tag: 'Tactics', title: 'How Pep\'s Foden-as-9 experiment is finally clicking', meta: 'The Athletic · 1d ago', color: '#6CABDD' },
            { tag: 'Officials', title: 'PGMOL admit "clear and obvious" error in Chelsea v Liverpool', meta: 'Telegraph · 1d ago', color: '#FFB547' },
            { tag: 'Match reports', title: 'Man City 4–0 West Ham: Haaland scores twice as City reclaim 3rd', meta: 'Guardian · 2d ago', color: '#6CABDD' },
            { tag: 'Transfers', title: 'Tottenham brace for late Chelsea bid for Bissouma', meta: 'Standard · 2d ago', color: '#132257' },
          ].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 }}>{n.title}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8 }}>{n.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <SourceLineDesktop text="Premier League news · refreshed 4 min ago"/>
    </div>
  </DesktopPage>
);

Object.assign(window, { ScreenLeagueBracketDesktop, ScreenLeagueNewsDesktop });