// Sporda — Phase B cont'd: Team Squad · Stats · News · Trophy room

// ===========================================================================
// 024 — TEAM · SQUAD
// Position grouping (GK / DEF / MID / FWD). Status badge per player.
// Followed-only toggle (per brief: every list shows it).
// ===========================================================================
const ScreenTeamSquad = () => {
  const squad = {
    GK:  [
      { n: 'D. Raya',      no: 22, age: 30, status: 'available', nat: '🇪🇸' },
      { n: 'A. Ramsdale',  no: 1,  age: 28, status: 'available', nat: '🇬🇧' },
    ],
    DEF: [
      { n: 'W. Saliba',    no: 2,  age: 25, status: 'available', nat: '🇫🇷' },
      { n: 'G. Magalhães', no: 6,  age: 28, status: 'available', nat: '🇧🇷' },
      { n: 'B. White',     no: 4,  age: 28, status: 'available', nat: '🇬🇧', star: true },
      { n: 'O. Zinchenko', no: 17, age: 29, status: 'injured', meta: 'Hamstring · 3w', nat: '🇺🇦' },
      { n: 'R. Calafiori', no: 33, age: 24, status: 'available', nat: '🇮🇹' },
      { n: 'T. Tomiyasu',  no: 18, age: 27, status: 'injured', meta: 'Knee · 8w', nat: '🇯🇵' },
    ],
    MID: [
      { n: 'D. Rice',      no: 41, age: 27, status: 'available', nat: '🇬🇧', star: true },
      { n: 'M. Ødegaard',  no: 8,  age: 27, status: 'available', nat: '🇳🇴', star: true, captain: true },
      { n: 'M. Merino',    no: 23, age: 30, status: 'available', nat: '🇪🇸' },
      { n: 'J. Timber',    no: 12, age: 24, status: 'suspended', meta: 'Yellow accum', nat: '🇳🇱' },
    ],
    FWD: [
      { n: 'B. Saka',      no: 7,  age: 24, status: 'available', nat: '🇬🇧', star: true },
      { n: 'G. Jesus',     no: 9,  age: 28, status: 'injured', meta: 'ACL · season', nat: '🇧🇷' },
      { n: 'K. Havertz',   no: 29, age: 26, status: 'available', nat: '🇩🇪' },
      { n: 'L. Trossard',  no: 19, age: 31, status: 'available', nat: '🇧🇪' },
    ],
  };
  const statusColor = (s) => s === 'injured' ? 'var(--negative)' : s === 'suspended' ? 'var(--warning)' : 'var(--positive)';
  const statusDot = (s) => (
    <span style={{ width: 6, height: 6, borderRadius: '50%', background: statusColor(s), flex: 'none' }}/>
  );

  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <TeamHeader subtab="squad"/>

          {/* Status summary + Followed only */}
          <div style={{ padding: '14px 20px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 11, color: 'var(--text-secondary)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--positive)' }}/>13 avail</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--negative)' }}/>3 out</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--warning)' }}/>1 susp</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700 }}>Followed only</span>
              <div className="toggle"/>
            </div>
          </div>

          {/* Position-grouped lists */}
          {Object.entries(squad).map(([pos, players]) => (
            <div key={pos}>
              <div style={{ padding: '8px 20px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 800, letterSpacing: '0.08em' }}>
                  {pos === 'GK' ? 'GOALKEEPERS' : pos === 'DEF' ? 'DEFENDERS' : pos === 'MID' ? 'MIDFIELDERS' : 'FORWARDS'}
                </div>
                <span style={{ fontSize: 11, color: 'var(--text-muted)' }} className="mono">{players.length}</span>
              </div>
              <div style={{ padding: '0 12px 8px' }}>
                {players.map(p => (
                  <div key={p.no} style={{
                    display: 'grid', gridTemplateColumns: '28px 36px 1fr 22px',
                    alignItems: 'center', gap: 12, padding: '10px 8px',
                    borderBottom: '1px solid var(--border-hairline)',
                  }}>
                    <span className="mono" style={{ fontSize: 13, fontWeight: 800, color: 'var(--text-muted)', textAlign: 'center' }}>{p.no}</span>
                    <div style={{ width: 36, height: 36, borderRadius: '50%', background: hashColor(p.n), display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11, position: 'relative' }}>
                      {p.n.split(' ').map(x => x.replace('.', '')[0]).join('').slice(0, 2)}
                      {p.captain && <span style={{ position: 'absolute', top: -2, right: -2, width: 14, height: 14, borderRadius: '50%', background: 'var(--accent)', color: 'var(--accent-ink)', fontSize: 8, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid var(--bg-base)' }}>C</span>}
                    </div>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: p.star ? 800 : 600 }}>
                        <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.n}</span>
                        <span style={{ fontSize: 12 }}>{p.nat}</span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, color: 'var(--text-secondary)', marginTop: 2 }}>
                        {statusDot(p.status)}
                        <span>{p.meta || (p.status === 'available' ? 'Available · ' + p.age + 'y' : p.status)}</span>
                      </div>
                    </div>
                    <I.chevR/>
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* Manager card pinned at bottom */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Manager</span>
              <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: '#3D5AFE', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 13 }}>MA</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>Mikel Arteta</div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>Since Dec 2019 · 🇪🇸 Spain</div>
                </div>
                <I.chevR/>
              </div>
            </div>
          </div>

          <SourceLine text="Squad data · Transfermarkt + Opta · updated 8 min ago"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 025 — TEAM · STATS
// Season-aggregate cards + sortable per-player table. Source + last-updated.
// ===========================================================================
const ScreenTeamStats = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <TeamHeader subtab="stats"/>

        {/* Season summary */}
        <div style={{ padding: '14px 20px 4px' }}>
          <div className="card">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>This season · Premier League</span>
              <button style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700 }}>
                2025–26 <I.chevD size={12}/>
              </button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[
                { l: 'P', v: 14 },
                { l: 'W', v: 10 },
                { l: 'D', v: 2 },
                { l: 'L', v: 2 },
              ].map(c => (
                <div key={c.l} style={{ background: 'var(--bg-inset)', borderRadius: 12, padding: '12px 8px', textAlign: 'center' }}>
                  <div className="mono" style={{ fontSize: 22, fontWeight: 800 }}>{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>
            {/* Bars */}
            <div style={{ marginTop: 16 }}>
              <StatBar lbl="Goals · For / Against"   l="29" r="11" totalL={29} totalR={11}/>
              <StatBar lbl="xG · For / Against"      l="28.7" r="13.2" totalL={28.7} totalR={13.2}/>
              <StatBar lbl="Possession (avg %)"     l="61%" r="39%" totalL={61} totalR={39}/>
              <StatBar lbl="Clean sheets · For / Against" l="7" r="2" totalL={7} totalR={2}/>
            </div>
          </div>
        </div>

        {/* Top scorers table */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card" style={{ padding: 0 }}>
            <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--border-hairline)' }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Top scorers</span>
              <button style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700 }}>
                <I.share size={12}/> Share
              </button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '24px 1fr 36px 36px 36px', padding: '10px 16px', fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
              <span></span><span>Player</span><span style={{ textAlign: 'right' }}>G</span><span style={{ textAlign: 'right' }}>A</span><span style={{ textAlign: 'right' }}>xG</span>
            </div>
            {[
              { rank: 1, name: 'B. Saka',     g: 11, a: 12, xg: 9.4 },
              { rank: 2, name: 'K. Havertz',  g: 7,  a: 3,  xg: 8.1 },
              { rank: 3, name: 'L. Trossard', g: 6,  a: 4,  xg: 5.6 },
              { rank: 4, name: 'M. Ødegaard', g: 6,  a: 8,  xg: 5.2 },
              { rank: 5, name: 'G. Magalhães',g: 4,  a: 0,  xg: 2.8 },
            ].map(p => (
              <div key={p.rank} style={{ display: 'grid', gridTemplateColumns: '24px 1fr 36px 36px 36px', padding: '10px 16px', alignItems: 'center', borderTop: '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: 8 }}>
                  <div style={{ width: 26, height: 26, borderRadius: '50%', background: hashColor(p.name), display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 10 }}>
                    {p.name.split('. ')[1].slice(0, 2).toUpperCase()}
                  </div>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</span>
                </div>
                <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 800, color: 'var(--accent)' }}>{p.g}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 12 }}>{p.a}</span>
                <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--text-secondary)' }}>{p.xg}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Most-watched stat highlight */}
        <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 · so far</div>
            <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.2, textWrap: 'pretty' }}>
              Arsenal have conceded the <span style={{ color: 'var(--accent)' }}>fewest goals</span> in the Premier League (11) — Saliba's 2.1 tackles per 90 the best of any centre-back.
            </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>
);

// ===========================================================================
// 026 — TEAM · NEWS
// Filtered news feed: team-tagged articles only. Composes news card pattern.
// ===========================================================================
const ScreenTeamNews = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <TeamHeader subtab="news"/>

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

        {/* Featured article */}
        <div style={{ padding: '0 20px 20px' }}>
          <div style={{ background: 'var(--bg-surface)', borderRadius: 'var(--r-card)', overflow: 'hidden', border: '1px solid var(--border-hairline)' }}>
            <div style={{ aspectRatio: '16 / 9', position: 'relative', background: 'linear-gradient(135deg, #EF0107 0%, #6D050A 60%, #1A0000 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 }}>Match report</div>
              <svg viewBox="0 0 200 60" preserveAspectRatio="none" style={{ position: 'absolute', left: 0, bottom: 0, width: '100%', height: '50%', opacity: 0.2 }}>
                <path d="M0,40 Q20,20 40,30 T80,28 T120,32 T160,26 T200,30 L200,60 L0,60 Z" fill="white"/>
              </svg>
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ fontSize: 16, fontWeight: 700, lineHeight: 1.3, textWrap: 'pretty' }}>
                Saka, Saliba, and a back four reminder: Arsenal 3–0 Brighton, in pictures.
              </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: 'Transfer', title: 'Arsenal hold talks for Sporting CP forward, Olivetti — sources', meta: 'Sky Sports · 5h ago' },
            { tag: 'Injury',   title: 'Gabriel Jesus could return for the run-in, says Arteta', meta: 'Evening Standard · 8h ago' },
            { tag: 'Press',    title: 'Arteta on Liverpool: "It will define what we are this season."', meta: 'BBC Sport · 12h ago' },
            { tag: 'Analysis', title: 'Why Rice is finally Arsenal\u2019s control vehicle', meta: 'The Athletic · 1d ago' },
            { tag: 'Academy',  title: 'U-21s pick up four in last weekend\u2019s round-up', meta: 'Arsenal.com · 1d ago' },
          ].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, ${crestPalette[(i * 3) % crestPalette.length]} 0%, ${crestPalette[(i * 3 + 1) % crestPalette.length]} 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>
);

// ===========================================================================
// 027 — TEAM · TROPHY ROOM
// Grid of trophy cards. Each = competition + count + year-list.
// ===========================================================================
const ScreenTeamTrophies = () => {
  const trophies = [
    { comp: 'Premier League / First Division', count: 13, latest: '2003–04', years: ['1930–31', '1932–33', '1933–34', '1934–35', '1937–38', '1947–48', '1952–53', '1970–71', '1988–89', '1990–91', '1997–98', '2001–02', '2003–04'], color: '#3D5AFE', tier: 'A' },
    { comp: 'FA Cup',     count: 14, latest: '2019–20', years: ['1929–30','1935–36','1949–50','1970–71','1978–79','1992–93','1997–98','2001–02','2002–03','2004–05','2013–14','2014–15','2016–17','2019–20'], color: '#FF6B6B', tier: 'A' },
    { comp: 'EFL Cup',    count: 2,  latest: '1992–93', years: ['1986–87','1992–93'], color: '#FFB547', tier: 'B' },
    { comp: 'Community Shield', count: 17, latest: '2023', years: [], color: '#A855F7', tier: 'B' },
    { comp: 'UEFA Champions League', count: 0, runners: 1, latest: 'RU · 2005–06', color: '#FFFFFF', tier: 'C' },
    { comp: 'UEFA Cup Winners\u2019 Cup', count: 1, latest: '1993–94', years: ['1993–94'], color: '#FFE66D', tier: 'B' },
    { comp: 'Inter-Cities Fairs Cup', count: 1, latest: '1969–70', years: ['1969–70'], color: '#22C55E', tier: 'B' },
  ];
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <TeamHeader subtab="trophy-room"/>

          {/* Headline */}
          <div style={{ padding: '14px 20px 18px' }}>
            <div style={{
              background: 'var(--hero-grad)',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 20, padding: 20, position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', top: -50, right: -30, fontSize: 140, opacity: 0.06 }}><I.trophy/></div>
              <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 6 }}>Honours · all competitions</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span className="score lg" style={{ color: 'var(--accent)' }}>48</span>
                <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>major trophies</span>
              </div>
              <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-muted)' }}>13 league titles \u00b7 14 FA Cups \u00b7 17 Community Shields</div>
            </div>
          </div>

          {/* Trophy grid */}
          <div style={{ padding: '0 20px 12px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {trophies.map(t => (
              <div key={t.comp} style={{
                background: 'var(--bg-surface)',
                border: '1px solid var(--border-hairline)',
                borderRadius: 16, padding: 14,
                position: 'relative', overflow: 'hidden',
              }}>
                {/* Tinted top stripe */}
                <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: t.color, opacity: t.count > 0 ? 1 : 0.3 }}/>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                  <div style={{
                    width: 30, height: 30, borderRadius: 8,
                    background: t.count > 0 ? `${t.color}22` : 'var(--bg-inset)',
                    color: t.count > 0 ? t.color : 'var(--text-muted)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <I.trophy size={16}/>
                  </div>
                  <span className="mono" style={{ fontSize: 22, fontWeight: 800, color: t.count > 0 ? 'var(--text-primary)' : 'var(--text-muted)' }}>{t.count}</span>
                  {t.runners > 0 && <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, marginLeft: 'auto' }}>RU ×{t.runners}</span>}
                </div>
                <div style={{ fontSize: 12, fontWeight: 700, lineHeight: 1.25, marginBottom: 4 }}>{t.comp}</div>
                <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>Last · {t.latest}</div>
              </div>
            ))}
          </div>

          {/* Year list expander preview */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Premier League / First Division · 13 titles</span>
                <I.chevD size={14}/>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {trophies[0].years.map(y => (
                  <span key={y} className="mono" style={{
                    padding: '6px 10px', background: 'var(--bg-inset)',
                    borderRadius: 8, fontSize: 11, fontWeight: 700, color: 'var(--text-secondary)',
                  }}>{y}</span>
                ))}
              </div>
            </div>
          </div>

          <SourceLine text="Honours · Wikipedia + Arsenal.com · sourced 14 Apr 2026"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

Object.assign(window, {
  ScreenTeamSquad, ScreenTeamStats, ScreenTeamNews, ScreenTeamTrophies,
});