// Sporda — Session 6 · Phase B · Team detail (6 tabs)
// Canonical team: Arsenal. 022 Overview · 023 Fixtures · 024 Squad · 025 Stats
// · 026 News · 027 Trophy room.
// Header (crest + meta + Follow CTA + 6-tab strip) is shared across all 6.

// ----- Arsenal canonical data ----------------------------------------------
const ARSENAL = {
  name: 'Arsenal',
  code: 'ARS',
  bg: '#EF0107',
  inkBg: '#063672',  // secondary club blue, for accent moments
  fullName: 'Arsenal Football Club',
  founded: 1886,
  ground: 'Emirates Stadium · 60,704',
  manager: 'Mikel Arteta',
  league: 'Premier League',
  position: 2,
  positionSuffix: 'nd',
  played: 14,
  points: 32,
  form: ['W', 'W', 'W', 'L', 'W'],
};

// Reusable Arsenal hero crest with the cannon as a stylized SVG.
const ArsenalCrest = ({ size = 56 }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: 'linear-gradient(135deg, #EF0107 0%, #DB0007 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: '0 4px 14px rgba(239,1,7,0.30)',
    color: 'white',
    flex: 'none',
    position: 'relative',
    overflow: 'hidden',
  }}>
    <span style={{ fontWeight: 900, fontSize: size * 0.32, letterSpacing: '0.02em', position: 'relative', zIndex: 1 }}>ARS</span>
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%)' }}/>
  </div>
);

// ----- Shared TeamHeader (back chevron + crest + meta + sub-tabs) ---------
const TeamHeader = ({ subtab = 'overview', following = true }) => (
  <>
    {/* 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)' }}>{ARSENAL.league}</div>
      </div>
      <RoundBtn><I.share size={16}/></RoundBtn>
    </div>

    {/* Hero — crest + name + meta + Follow CTA */}
    <div style={{ padding: '0 20px 16px', textAlign: 'center' }}>
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
        <ArsenalCrest size={80}/>
      </div>
      <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.01em' }}>{ARSENAL.name}</div>
      <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
        <span style={{ color: 'var(--accent)', fontWeight: 700 }}>{ARSENAL.position}{ARSENAL.positionSuffix}</span> · {ARSENAL.points} pts · MW {ARSENAL.played}
      </div>
      {/* Form dots inline */}
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 6, marginTop: 12 }}>
        <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Form</span>
        <div className="form-dots">
          {ARSENAL.form.map((f, i) => <span key={i} className={`fdot ${f}`}/>)}
        </div>
      </div>
      {/* Follow + Notify CTAs */}
      <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 16 }}>
        <button style={{
          padding: '10px 24px', borderRadius: 999,
          background: following ? 'var(--bg-surface)' : 'var(--accent)',
          color: following ? 'var(--text-primary)' : 'var(--accent-ink)',
          border: '1px solid ' + (following ? 'var(--border-strong)' : 'var(--accent)'),
          fontWeight: 700, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          {following ? <><I.check size={14}/> Following</> : '+ Follow'}
        </button>
        <button style={{
          padding: '10px 18px', borderRadius: 999,
          background: 'var(--bg-surface)', border: '1px solid var(--border-strong)',
          color: 'var(--text-primary)', fontWeight: 600, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <I.bell size={14}/> Alerts
        </button>
      </div>
    </div>

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

// ===========================================================================
// 022 — TEAM · OVERVIEW
// Composes: 076 countdown (next match), 077 live-now (if a match is live)
// ===========================================================================
const ScreenTeamOverview = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <TeamHeader subtab="overview"/>

        {/* Next match countdown — composes 076 power-user component */}
        <div style={{ padding: '16px 20px 4px' }}>
          <div className="card" style={{ padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Next match</span>
              <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>Sat 28 May · 21:00 · Anfield</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'flex-end' }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>Liverpool</div>
                <Crest name="Liverpool" code="LIV" bg="#C8102E"/>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.05em' }}>VS</span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <ArsenalCrest size={36}/>
                <div style={{ fontSize: 13, fontWeight: 700 }}>Arsenal</div>
              </div>
            </div>
            {/* Inline countdown — composes 076 */}
            <Countdown d={2} h={4} m={32} s={11} label="Kick-off in"/>
          </div>
        </div>

        {/* Top performers — quick gallery */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Top performers · this season</span>
              <button style={{ color: 'var(--text-secondary)', fontSize: 12, fontWeight: 600 }}>Squad →</button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
              {[
                { name: 'Saka',    full: 'B. Saka',    role: 'RW', stat: '11', stat2: '12', sl: 'G', sl2: 'A', color: '#FFC83D' },
                { name: 'Ødegaard',full: 'M. Ødegaard',role: 'CAM', stat: '6', stat2: '8', sl: 'G', sl2: 'A', color: '#3D5AFE' },
                { name: 'Saliba',  full: 'W. Saliba',  role: 'CB', stat: '92%', stat2: '11', sl: 'Pass', sl2: 'Tk', color: '#22C55E' },
              ].map(p => (
                <div key={p.name} style={{
                  background: 'var(--bg-inset)', borderRadius: 14, padding: 12,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                }}>
                  <div style={{ width: 44, height: 44, borderRadius: '50%', background: p.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14, color: '#0A1400' }}>
                    {p.name.slice(0, 2).toUpperCase()}
                  </div>
                  <div style={{ fontSize: 12, fontWeight: 700, marginTop: 4 }}>{p.full}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.04em' }}>{p.role}</div>
                  <div style={{ display: 'flex', gap: 10, marginTop: 4, fontSize: 11 }}>
                    <span><span className="mono" style={{ fontWeight: 700, color: 'var(--accent)' }}>{p.stat}</span><span style={{ color: 'var(--text-muted)' }}>·{p.sl}</span></span>
                    <span><span className="mono" style={{ fontWeight: 700 }}>{p.stat2}</span><span style={{ color: 'var(--text-muted)' }}>·{p.sl2}</span></span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Recent results */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card" style={{ padding: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', borderBottom: '1px solid var(--border-hairline)' }}>
              <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Recent results</span>
              <button style={{ color: 'var(--text-secondary)', fontSize: 12, fontWeight: 600 }}>Fixtures →</button>
            </div>
            {[
              { res: 'W', opp: 'Brighton',  oppCode: 'BHA', oppBg: '#0057B8',  hs: 3, as: 0, home: true,  date: 'Sat 21 May' },
              { res: 'W', opp: 'Wolves',    oppCode: 'WOL', oppBg: '#FDB913',  hs: 2, as: 0, home: false, date: 'Wed 18 May' },
              { res: 'W', opp: 'Chelsea',   oppCode: 'CHE', oppBg: '#034694',  hs: 2, as: 1, home: true,  date: 'Sat 14 May' },
              { res: 'L', opp: 'Newcastle', oppCode: 'NEW', oppBg: '#241F20',  hs: 0, as: 1, home: false, date: 'Mon 09 May' },
              { res: 'W', opp: 'Aston Villa', oppCode: 'AVL', oppBg: '#670E36', hs: 3, as: 1, home: true, date: 'Sat 30 Apr' },
            ].map((m, i, arr) => {
              const us = m.home ? m.hs : m.as;
              const them = m.home ? m.as : m.hs;
              return (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr 56px 24px', gap: 10, padding: '12px 16px', alignItems: 'center', borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 0 }}>
                  <span className={`fdot ${m.res}`} style={{ width: 8, height: 8 }}/>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>
                      {m.home ? 'ARS' : m.opp} vs {m.home ? m.opp : 'ARS'}
                    </div>
                    <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>{m.date} · {m.home ? 'Home' : 'Away'}</div>
                  </div>
                  <span className="mono" style={{ textAlign: 'center', fontWeight: 800, fontSize: 14, color: m.res === 'W' ? 'var(--accent)' : m.res === 'L' ? 'var(--text-secondary)' : 'var(--text-primary)' }}>
                    {us}–{them}
                  </span>
                  <I.chevR/>
                </div>
              );
            })}
          </div>
        </div>

        {/* Info card */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="card">
            <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Club info</span>
            <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {[
                { l: 'Manager', v: ARSENAL.manager },
                { l: 'Founded', v: ARSENAL.founded },
                { l: 'Ground', v: ARSENAL.ground.split(' · ')[0] },
                { l: 'Capacity', v: ARSENAL.ground.split(' · ')[1] },
              ].map(x => (
                <div key={x.l}>
                  <div style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{x.l}</div>
                  <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>{x.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <SourceLine text="Squad & match data · Opta · updated 2 min ago"/>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 023 — TEAM · FIXTURES
// Segmented Upcoming / Results, Followed-only toggle (required by brief).
// ===========================================================================
const ScreenTeamFixtures = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <TeamHeader subtab="fixtures"/>

        {/* Segmented control: Upcoming / Results / All */}
        <div style={{ padding: '16px 20px 12px' }}>
          <div style={{ display: 'flex', background: 'var(--bg-inset)', borderRadius: 999, padding: 4 }}>
            {[
              { lbl: 'Upcoming', active: true },
              { lbl: 'Results' },
              { lbl: 'All' },
            ].map(seg => (
              <button key={seg.lbl} style={{
                flex: 1, padding: '8px 0', borderRadius: 999,
                background: seg.active ? 'var(--bg-surface)' : 'transparent',
                color: seg.active ? 'var(--text-primary)' : 'var(--text-secondary)',
                fontWeight: seg.active ? 700 : 500, fontSize: 13,
                boxShadow: seg.active ? '0 2px 6px rgba(0,0,0,0.2)' : 'none',
              }}>{seg.lbl}</button>
            ))}
          </div>
        </div>

        {/* Filter row — competition + followed-only */}
        <div style={{ padding: '0 20px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
          <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)', borderRadius: 999, fontSize: 12, fontWeight: 600 }}>
            All competitions <I.chevD size={14}/>
          </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 on"/>
          </div>
        </div>

        {/* Date-grouped fixture list */}
        {[
          { date: 'May 2026', items: [
            { d: 'Sat 28', t: '21:00', comp: 'PL', home: { name: 'Liverpool', code: 'LIV', bg: '#C8102E' }, away: { name: 'Arsenal', code: 'ARS' }, venue: 'Anfield', countdown: '2d 4h' },
            { d: 'Wed 25', t: '20:00', comp: 'EFL', home: { name: 'Arsenal', code: 'ARS' }, away: { name: 'Brentford', code: 'BRE', bg: '#C8102E' }, venue: 'Emirates', countdown: '5d 3h' },
          ]},
          { date: 'June 2026', items: [
            { d: 'Sun 02', t: '17:30', comp: 'PL', home: { name: 'Arsenal', code: 'ARS' }, away: { name: 'Man City', code: 'MCI', bg: '#6CABDD' }, venue: 'Emirates', countdown: '11d', big: true },
            { d: 'Sat 08', t: '15:00', comp: 'PL', home: { name: 'Tottenham', code: 'TOT', bg: '#132257' }, away: { name: 'Arsenal', code: 'ARS' }, venue: 'Tottenham St.', countdown: '17d', derby: true },
            { d: 'Wed 12', t: '20:00', comp: 'UCL', home: { name: 'Arsenal', code: 'ARS' }, away: { name: 'Real Madrid', code: 'RMA', bg: '#FFFFFF' }, venue: 'Emirates', countdown: '21d' },
          ]},
        ].map(grp => (
          <div key={grp.date}>
            <div style={{ padding: '6px 20px 10px', fontSize: 11, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>
              {grp.date}
            </div>
            <div style={{ padding: '0 20px 8px' }}>
              {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: 16, padding: '14px 14px', marginBottom: 10,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--text-secondary)' }}>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                        <span className="mono" style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{m.d.split(' ')[1]}</span>
                        <span style={{ fontSize: 10 }}>{m.d.split(' ')[0]}</span>
                      </div>
                      <span>·</span>
                      <span className="mono">{m.t}</span>
                      <span style={{ padding: '2px 6px', background: 'var(--bg-inset)', borderRadius: 4, fontSize: 9, fontWeight: 700, letterSpacing: '0.04em' }}>{m.comp}</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>}
                    </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: m.home.code === 'ARS' ? 800 : 600 }}>{m.home.name}</span>
                      {m.home.code === 'ARS' ? <ArsenalCrest size={32}/> : <Crest name={m.home.name} code={m.home.code} bg={m.home.bg}/>}
                    </div>
                    <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)' }}>vs</span>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      {m.away.code === 'ARS' ? <ArsenalCrest size={32}/> : <Crest name={m.away.name} code={m.away.code} bg={m.away.bg}/>}
                      <span style={{ fontSize: 13, fontWeight: m.away.code === 'ARS' ? 800 : 600 }}>{m.away.name}</span>
                    </div>
                  </div>
                  <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px solid var(--border-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-muted)' }}>
                    <span>{m.venue}</span>
                    <span className="mono" style={{ color: 'var(--accent)', fontWeight: 700 }}>{m.countdown}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}

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

Object.assign(window, {
  ARSENAL, ArsenalCrest, TeamHeader,
  ScreenTeamOverview, ScreenTeamFixtures,
});