// Sporda — Phase D cont'd. 036 Bracket · 037 News.

// ===========================================================================
// 036 — LEAGUE · BRACKET (mobile)
// PL clubs in UEFA Champions League knockout. Repurposes the Bracket tab —
// PL itself has no knockout phase, so we surface the European competition.
// ===========================================================================
const ScreenLeagueBracket = () => {
  // Round of 16 — 4 ties featuring PL clubs (and other matches for context)
  const r16 = [
    { home: 'Arsenal',     hc: 'ARS', hb: '#EF0107', leg1: 2, leg2: 1, away: 'Real Madrid',  ac: 'RMA', ab: '#FFFFFF', won: 'h', plClub: 'h' },
    { home: 'Liverpool',   hc: 'LIV', hb: '#C8102E', leg1: 1, leg2: 3, away: 'Inter',         ac: 'INT', ab: '#0068A8', won: 'a', plClub: 'h' },
    { home: 'Man City',    hc: 'MCI', hb: '#6CABDD', leg1: 3, leg2: 2, away: 'PSG',           ac: 'PSG', ab: '#004170', won: 'h', plClub: 'h' },
    { home: 'Aston Villa', hc: 'AVL', hb: '#670E36', leg1: 1, leg2: 1, away: 'Bayern',        ac: 'BAY', ab: '#DC052D', won: 'a', plClub: 'h', agg: '1-1 (3-5 pen)' },
  ];
  const qf = [
    { home: 'Arsenal',     hc: 'ARS', hb: '#EF0107', away: 'Bayer Leverkusen', ac: 'B04', ab: '#E32221', when: 'Apr 2026' },
    { home: 'Man City',    hc: 'MCI', hb: '#6CABDD', away: 'Atletico Madrid',  ac: 'ATM', ab: '#CB3524', when: 'Apr 2026' },
  ];
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <LeagueHeader subtab="bracket"/>

          {/* Banner — PL clubs in UCL */}
          <div style={{ padding: '14px 20px 14px' }}>
            <div style={{
              background: 'var(--hero-grad)',
              border: '1px solid rgba(200,255,62,0.15)',
              borderRadius: 16, padding: '14px 16px',
            }}>
              <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 4 }}>European competitions</div>
              <div style={{ fontSize: 14, fontWeight: 700, lineHeight: 1.3, 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>

          {/* Competition picker */}
          <div style={{ padding: '0 20px 12px', display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none' }}>
            {['UCL', 'Europa', 'Conference', 'FA Cup'].map((c, i) => (
              <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{c}</div>
            ))}
          </div>

          {/* QF — first up (only 2 PL clubs left) */}
          <div style={{ padding: '0 20px 8px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <div className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Quarter-finals · upcoming</div>
              <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>Draw · 15 Mar</span>
            </div>
            {qf.map((m, i) => (
              <div key={i} style={{
                background: 'var(--hero-grad)',
                border: '1px solid var(--border-strong)',
                borderRadius: 14, padding: '14px 14px', marginBottom: 8,
              }}>
                <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: 14, fontWeight: 700 }}>{m.home}</span>
                    <Crest name={m.home} code={m.hc} bg={m.hb}/>
                  </div>
                  <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--accent)' }}>vs</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Crest name={m.away} code={m.ac} bg={m.ab}/>
                    <span style={{ fontSize: 14, fontWeight: 700 }}>{m.away}</span>
                  </div>
                </div>
                <div style={{ marginTop: 10, fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>2-leg · {m.when}</div>
              </div>
            ))}
          </div>

          {/* Round of 16 results */}
          <div style={{ padding: '12px 20px 8px' }}>
            <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>Round of 16 · complete</div>
            {r16.map((m, i) => {
              const homeWon = m.won === 'h';
              return (
                <div key={i} style={{
                  background: 'var(--bg-surface)',
                  border: '1px solid ' + (homeWon ? 'rgba(200,255,62,0.20)' : 'var(--border-hairline)'),
                  borderRadius: 14, padding: '12px 14px', marginBottom: 8,
                }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 70px 1fr', alignItems: 'center', gap: 10 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end', opacity: homeWon ? 1 : 0.55 }}>
                      <span style={{ fontSize: 13, fontWeight: homeWon ? 800 : 500 }}>{m.home}</span>
                      <Crest name={m.home} code={m.hc} bg={m.hb}/>
                    </div>
                    <div style={{ textAlign: 'center' }}>
                      <div className="mono" style={{ fontSize: 14, fontWeight: 800 }}>{m.leg1}–{m.leg2}</div>
                      <div style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 700, marginTop: 2 }}>{m.agg || 'agg'}</div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, opacity: !homeWon ? 1 : 0.55 }}>
                      <Crest name={m.away} code={m.ac} bg={m.ab}/>
                      <span style={{ fontSize: 13, fontWeight: !homeWon ? 800 : 500 }}>{m.away}</span>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <SourceLine text="UEFA bracket · live data · refreshed 8 min ago"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 037 — LEAGUE · NEWS (mobile)
// ===========================================================================
const ScreenLeagueNews = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <LeagueHeader subtab="news"/>

        {/* Category pills */}
        <div style={{ display: 'flex', gap: 8, padding: '14px 20px 16px', overflowX: 'auto', scrollbarWidth: 'none' }}>
          {['All', 'Match reports', 'Transfers', 'Tactics', 'Officials'].map((c, i) => (
            <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{c}</div>
          ))}
        </div>

        {/* Featured — title race story */}
        <div style={{ padding: '0 20px 20px' }}>
          <div style={{ background: 'var(--bg-surface)', borderRadius: 18, overflow: 'hidden', border: '1px solid var(--border-hairline)' }}>
            <div style={{
              aspectRatio: '16 / 9', position: 'relative',
              background: 'linear-gradient(135deg, #C8102E 0%, #3D5AFE 100%)',
              display: 'flex', alignItems: 'flex-end', padding: 16,
            }}>
              <div className="tag-micro" style={{ position: 'absolute', top: 12, left: 12, background: 'var(--accent)', color: 'var(--accent-ink)', padding: '4px 10px', borderRadius: 999 }}>Title race</div>
              <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center', color: 'white' }}>
                <div style={{ fontSize: 60, fontWeight: 900, lineHeight: 1, letterSpacing: '-0.04em' }}>3 pts</div>
                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.08em', marginTop: 4 }}>BETWEEN LIVERPOOL & ARSENAL</div>
              </div>
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ fontSize: 16, fontWeight: 700, lineHeight: 1.3, textWrap: 'pretty' }}>
                The Premier League title race tightens: 24 games to go, three points and 50 miles between top and second.
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>The Athletic · 2h ago</div>
                <div style={{ display: 'flex', gap: 14, color: 'var(--text-secondary)' }}>
                  <I.heart/><I.cmt/><I.share/>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* List */}
        <div style={{ padding: '0 20px 16px' }}>
          {[
            { tag: 'Match reports', title: 'Arsenal 3–1 Aston Villa: Saka brace and Saliba clean sheet keep 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' },
            { 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' },
          ].map((n, i, arr) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 0 }}>
              <div style={{
                width: 64, height: 64, borderRadius: 12, flex: 'none',
                background: `linear-gradient(135deg, ${n.color} 0%, #1A2320 100%)`,
              }}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 4 }}>{n.tag}</div>
                <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3, textWrap: 'pretty' }}>{n.title}</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 6 }}>{n.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <BottomNav active="news"/>
    </div>
  </div>
);

Object.assign(window, { ScreenLeagueBracket, ScreenLeagueNews });