// views/Team.jsx — Team profile (Argentina featured)
function TeamView({ code = 'ARG', onRoute }) {
  const T = code === 'ARG' ? window.WCL_TEAM_PROFILE : { ...window.WCL_TEAM_PROFILE, code, name: window.WCL_TEAMS[code]?.name || code };
  const team = window.WCL_TEAMS[code];

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb" style={{ display: 'flex', gap: 6, color: 'var(--foreground-muted)', fontSize: 12, marginBottom: 8 }}>
            <a className="link" onClick={() => onRoute('home')}>Live Today</a>
            <I.ChevR size={12} />
            <span>Teams</span>
            <I.ChevR size={12} />
            <span>{T.name}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <Flag code={code} size="xl" />
            <div>
              <h1 className="type-h1" style={{ margin: 0 }}>{T.name}</h1>
              <div className="sub" style={{ display: 'flex', gap: 12, marginTop: 4, fontSize: 13 }}>
                <span><span className="subtle">FIFA</span> <span className="mono">#{team?.fifa}</span></span>
                <span><span className="subtle">Confederation</span> {team?.confed}</span>
                <span><span className="subtle">Manager</span> {T.manager}</span>
              </div>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary btn-sm"><I.Pin size={14} /> Follow</button>
          <button className="btn btn-primary btn-sm" onClick={() => onRoute('match')}><I.Live size={14} /> Currently live</button>
        </div>
      </div>

      <div className="col4" style={{ marginBottom: 16 }}>
        <div className="kpi"><div className="kpi-label">WC titles</div><div className="kpi-value" style={{ color: 'var(--trophy)' }}>{T.titles}</div><div className="kpi-delta">{T.titleYears.join(', ')}</div></div>
        <div className="kpi"><div className="kpi-label">Appearances</div><div className="kpi-value">{T.appearances}</div><div className="kpi-delta">first 1930</div></div>
        <div className="kpi"><div className="kpi-label">All-time WC W-D-L</div><div className="kpi-value" style={{ fontSize: 22 }}><span className="mono">{T.wcWins}-{T.wcDraws}-{T.wcLosses}</span></div><div className="kpi-delta up">+ {T.wcGoalsFor}/{T.wcGoalsAgainst} goal differential</div></div>
        <div className="kpi spark">
          <div className="kpi-label">FIFA ranking · 8 years</div>
          <div className="kpi-value">#{T.rankingDelta.slice(-1)[0].r}</div>
          <div style={{ color: 'var(--pitch)', marginTop: 4 }}>
            <Sparkline data={T.rankingDelta.map(r => 20 - r.r)} fill color="currentColor" height={28} />
          </div>
        </div>
      </div>

      <div className="col2">
        <section className="panel">
          <div className="panel-head"><h3>This World Cup</h3><span className="subtle" style={{ fontSize: 11 }}>2 of 3 group stage matches</span></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {T.thisRun.map((m, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '90px 1fr auto', alignItems: 'center',
                padding: '12px 14px', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
                background: m.live ? 'color-mix(in oklch, var(--live-red) 8%, var(--surface))' : 'var(--surface)',
              }}>
                <span className="mono subtle" style={{ fontSize: 11 }}>{m.stage}</span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span className="strong">vs</span> <TeamRow code={m.opp} />
                </span>
                <span className={'mono ' + (m.live ? '' : 'strong')} style={{ color: m.live ? 'var(--live-red)' : m.result.startsWith('W') ? 'var(--pitch)' : 'var(--foreground)' }}>
                  {m.result}
                </span>
              </div>
            ))}
            <div style={{
              display: 'grid', gridTemplateColumns: '90px 1fr auto', alignItems: 'center',
              padding: '12px 14px', border: '1px dashed var(--border)', borderRadius: 'var(--radius-md)',
              background: 'transparent', opacity: 0.85
            }}>
              <span className="mono subtle" style={{ fontSize: 11 }}>{T.nextOpp.stage}</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span className="strong">vs</span> <TeamRow code={T.nextOpp.team} />
              </span>
              <span className="mono subtle" style={{ fontSize: 12 }}>{T.nextOpp.when}</span>
            </div>
          </div>

          <div className="divider" />

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Form · last 10</div>
              <FormRow form={T.recentForm} />
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <Donut value={0.142} color="var(--trophy)" size={56} label="14.2%" />
              <div style={{ fontSize: 12 }}>
                <div className="strong">To win 2026</div>
                <div className="subtle">Model · #1 of 48</div>
              </div>
            </div>
          </div>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>Historical performance</h3></div>
          <table className="table">
            <thead>
              <tr>
                <th>Edition</th>
                <th style={{ textAlign: 'right' }}>Stage</th>
                <th style={{ textAlign: 'right' }}>W-D-L</th>
                <th style={{ textAlign: 'right' }}>GF-GA</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['2022 Qatar',     'Champions', '6-1-0', '15-8'],
                ['2018 Russia',    'Round of 16', '1-1-2', '6-9'],
                ['2014 Brazil',    'Final',       '5-2-0', '8-4'],
                ['2010 SAfrica',   'Quarter-final','4-0-1', '10-6'],
                ['2006 Germany',   'Quarter-final','3-1-1', '11-3'],
                ['2002 Korea/Jpn', 'Group stage', '1-1-1', '2-2'],
                ['1998 France',    'Quarter-final','3-1-1', '10-4'],
                ['1994 USA',       'Round of 16', '2-0-2', '8-6'],
                ['1990 Italy',     'Final',       '2-3-2', '5-4'],
                ['1986 Mexico',    'Champions',   '6-1-0', '14-5'],
              ].map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r[0]}</td>
                  <td style={{ textAlign: 'right', color: r[1] === 'Champions' ? 'var(--trophy)' : 'var(--foreground)' }}>{r[1]}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{r[2]}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{r[3]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>

      <div className="col2" style={{ marginTop: 16 }}>
        <section className="panel">
          <div className="panel-head"><h3>Squad value & age</h3></div>
          <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
            <Donut value={0.78} color="var(--brand)" size={108} stroke={9} label="€612M" />
            <div style={{ flex: 1 }}>
              <div style={{ marginBottom: 16 }}>
                <div className="eyebrow">Average age</div>
                <div className="strong" style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>{T.squadAvgAge} <span className="subtle" style={{ fontSize: 13, fontWeight: 400 }}>yrs</span></div>
                <div className="subtle" style={{ fontSize: 12 }}>4th oldest squad in tournament</div>
              </div>
              <StatBar label="Att" left={42} right={58} fmt={v => '€' + v + 'M'} max={100} />
              <StatBar label="Mid" left={28} right={72} fmt={v => '€' + v + 'M'} max={100} />
              <StatBar label="Def" left={16} right={84} fmt={v => '€' + v + 'M'} max={100} />
            </div>
          </div>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>Records</h3></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[
              ['Top scorer (all-time)', T.topScorer.name, T.topScorer.goals + ' goals'],
              ['Most caps', T.topCaps.name, T.topCaps.caps + ' apps'],
              ['Best finish', 'Champions', T.titleYears.join(' · ')],
              ['Biggest WC win', 'ARG 6-0 PER (1978)', 'group stage'],
              ['Heaviest WC loss', 'GER 4-0 ARG (2010)', 'quarter-final'],
              ['Final apps', '6', '1930, 1978, 1986, 1990, 2014, 2022'],
            ].map(([k, v, sub]) => (
              <div key={k} style={{ padding: 12, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)' }}>
                <div className="eyebrow" style={{ marginBottom: 6 }}>{k}</div>
                <div className="strong" style={{ fontSize: 14, fontWeight: 600 }}>{v}</div>
                <div className="subtle" style={{ fontSize: 11, marginTop: 3 }}>{sub}</div>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

Object.assign(window, { TeamView });