// tournaments.jsx — 4 variations of Tournaments / Multi-day Events

const _Tt = window.T_AU, _Dt = window.D_AU, _It = window.Icon_AU, _Avt = window.Avatar_AU,
      _Mt = window.Money_AU, _Ct = window.Chip_AU, _PSt = window.PhoneScreen_AU;

const TOURN = _Dt.tournament;
function playerById(id) { return _Dt.players.find(p => p.id === id) || { initials: id.toUpperCase().slice(0, 2), color: '#666' }; }
function leaderName(row) { return row.name || playerById(row.id).name || row.id; }
function leaderInitials(row) { return row.initials || playerById(row.id).initials; }
function leaderColor(row) { return row.color || playerById(row.id).color; }

// ─────────────────────────────────────────────────────────────────
// V1 — PODIUM + STANDINGS
// Top-3 podium hero with avatars, ribbons. Full standings under.
// ─────────────────────────────────────────────────────────────────
function TournV1() {
  const top3 = TOURN.leaderboard.slice(0, 3);

  return (
    <_PSt bg={_Tt.bg}>
      {/* Header */}
      <div style={{ flexShrink: 0, background: _Tt.primaryDeep, color: '#fff', padding: '14px 18px 14px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <_It name="chevL" size={22}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ font: `400 11px/1 ${_Tt.fontApp}`, opacity: 0.6, letterSpacing: '0.2em', textTransform: 'uppercase' }}>{TOURN.group}</div>
            <div style={{ font: `700 18px/1.1 ${_Tt.fontApp}`, marginTop: 4 }}>{TOURN.name}</div>
          </div>
          <_It name="share" size={20}/>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto' }}>
        {/* PODIUM */}
        <div style={{
          background: `linear-gradient(180deg, ${_Tt.primaryDeep} 0%, ${_Tt.primary} 60%, ${_Tt.bg} 100%)`,
          padding: '4px 20px 28px', position: 'relative',
        }}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 14, padding: '14px 0 18px' }}>
            {/* 2nd */}
            <PodiumStep p={top3[1]} place={2} height={110} medalColor={_Tt.silver}/>
            {/* 1st */}
            <PodiumStep p={top3[0]} place={1} height={140} medalColor={_Tt.gold} crown/>
            {/* 3rd */}
            <PodiumStep p={top3[2]} place={3} height={88} medalColor={_Tt.bronze}/>
          </div>
        </div>

        {/* progress + stats */}
        <div style={{ padding: '0 20px', marginTop: -12 }}>
          <div style={{
            background: _Tt.card, borderRadius: 14, padding: 14,
            boxShadow: '0 1px 2px rgba(27,58,45,0.05), 0 12px 28px rgba(27,58,45,0.07)',
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
          }}>
            <StatTile label="Rounds" value="3 / 4" sub="R4 starts May 24"/>
            <StatTile label="Your money" value="+$42" sub="3rd in earnings"/>
            <StatTile label="Avg pts" value="37" sub="2nd in field"/>
          </div>
        </div>

        {/* Full leaderboard */}
        <div style={{ padding: '18px 20px 18px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <div style={{ font: `700 14px/1 ${_Tt.fontApp}`, color: _Tt.ink }}>Standings</div>
            <div style={{ display: 'flex', gap: 4 }}>
              <_Ct tone="dark" size="sm">Points</_Ct>
              <_Ct tone="outline" size="sm">Money</_Ct>
            </div>
          </div>
          <div style={{ background: _Tt.card, borderRadius: 14, overflow: 'hidden', boxShadow: '0 1px 2px rgba(27,58,45,0.04)' }}>
            {TOURN.leaderboard.map((row, i) => {
              const isMe = row.id === 'me';
              return (
                <div key={row.id} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '10px 12px',
                  borderBottom: i < TOURN.leaderboard.length - 1 ? `1px solid ${_Tt.divider}` : 'none',
                  background: isMe ? _Tt.mint : 'transparent',
                  borderLeft: isMe ? `4px solid ${_Tt.win}` : '4px solid transparent',
                }}>
                  <div style={{ font: `700 14px/1 ${_Tt.fontApp}`, color: i < 3 ? [_Tt.gold, _Tt.silver, _Tt.bronze][i] : _Tt.inkFaint, minWidth: 18, fontVariantNumeric: 'tabular-nums' }}>{i + 1}</div>
                  <_Avt player={{ initials: leaderInitials(row), color: leaderColor(row) }} size={30}/>
                  <div style={{ flex: 1, font: `${isMe ? 700 : 600} 13px/1.2 ${_Tt.fontApp}`, color: _Tt.ink }}>
                    {leaderName(row).split(' ')[0]}{isMe ? ' (you)' : ''}
                  </div>
                  <div style={{ font: `700 14px/1 ${_Tt.fontApp}`, color: _Tt.ink, fontVariantNumeric: 'tabular-nums' }}>{row.pts}</div>
                  <_Mt cents={row.money} size={12}/>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </_PSt>
  );
}

function PodiumStep({ p, place, height, medalColor, crown }) {
  if (!p) return null;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1 }}>
      {crown && <_It name="trophy" size={20} style={{ color: _Tt.gold, marginBottom: 6 }}/>}
      <_Avt player={{ initials: leaderInitials(p), color: leaderColor(p) }} size={place === 1 ? 56 : 48}/>
      <div style={{ font: `700 12px/1 ${_Tt.fontApp}`, color: '#fff', marginTop: 8 }}>{leaderName(p).split(' ')[0]}</div>
      <div style={{ font: `400 11px/1 ${_Tt.fontApp}`, color: 'rgba(255,255,255,0.7)', marginTop: 3, fontVariantNumeric: 'tabular-nums' }}>{p.pts} pts</div>
      <div style={{
        width: '100%', height, marginTop: 8,
        background: `linear-gradient(180deg, ${medalColor} 0%, ${medalColor}cc 100%)`,
        borderRadius: '14px 14px 0 0',
        display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
        paddingTop: 10,
        font: `800 22px/1 ${_Tt.fontApp}`, color: '#fff',
        boxShadow: `inset 0 4px 8px rgba(0,0,0,0.1), 0 -2px 0 ${medalColor}`,
      }}>{place}</div>
    </div>
  );
}

function StatTile({ label, value, sub }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{ font: `600 10px/1 ${_Tt.fontApp}`, color: _Tt.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{label}</div>
      <div style={{ font: `700 22px/1 ${_Tt.fontApp}`, color: _Tt.ink, marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
      <div style={{ font: `400 10px/1.3 ${_Tt.fontApp}`, color: _Tt.inkFaint, marginTop: 4 }}>{sub}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// V2 — ROUND-BY-ROUND TIMELINE
// Chronological list of all rounds in the tournament. Compact
// leaderboard at top, then dated round cards.
// ─────────────────────────────────────────────────────────────────
function TournV2() {
  return (
    <_PSt bg={_Tt.bg}>
      <div style={{ flexShrink: 0, padding: '14px 20px 6px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <_It name="chevL" size={22} style={{ color: _Tt.ink }}/>
        <div style={{ flex: 1 }}>
          <div style={{ font: `400 11px/1 ${_Tt.fontApp}`, color: _Tt.inkSub, letterSpacing: '0.2em', textTransform: 'uppercase' }}>Tournament</div>
          <div style={{ font: `700 19px/1.1 ${_Tt.fontApp}`, color: _Tt.ink, marginTop: 4 }}>{TOURN.name}</div>
        </div>
        <_It name="share" size={20} style={{ color: _Tt.ink }}/>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 20px 16px' }}>
        {/* Sticky compact leaderboard */}
        <div style={{
          position: 'sticky', top: 0, zIndex: 2,
          background: _Tt.bg, padding: '8px 0 12px',
        }}>
          <div style={{
            background: _Tt.primaryDeep, color: '#fff', borderRadius: 14,
            padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <_It name="trophy" size={18} style={{ color: _Tt.gold, flexShrink: 0 }}/>
            <div style={{ flex: 1 }}>
              <div style={{ font: `400 10px/1 ${_Tt.fontApp}`, opacity: 0.6, letterSpacing: '0.16em', textTransform: 'uppercase' }}>You · 2nd of 6</div>
              <div style={{ font: `700 16px/1 ${_Tt.fontApp}`, marginTop: 4 }}>111 pts · −7 behind Jay</div>
            </div>
            <button style={{ background: _Tt.gold, color: _Tt.primaryDeep, border: 'none', padding: '6px 10px', borderRadius: 8, font: `700 11px/1 ${_Tt.fontApp}`, cursor: 'pointer' }}>Standings</button>
          </div>
        </div>

        <div style={{ font: `600 11px/1 ${_Tt.fontApp}`, color: _Tt.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase', margin: '14px 0 10px' }}>
          The 4 rounds
        </div>

        {/* timeline */}
        <div style={{ position: 'relative', paddingLeft: 28 }}>
          <div style={{ position: 'absolute', left: 11, top: 6, bottom: 6, width: 2, background: _Tt.divider, borderRadius: 1 }}/>
          {TOURN.rounds.map((r, i) => (
            <TourneyTimelineRow key={r.id} r={r} i={i}/>
          ))}
        </div>
      </div>
    </_PSt>
  );
}

function TourneyTimelineRow({ r, i }) {
  const isLive = r.status === 'Live';
  return (
    <div style={{ position: 'relative', paddingBottom: 14 }}>
      <div style={{
        position: 'absolute', left: -24, top: 12,
        width: 16, height: 16, borderRadius: 8,
        background: isLive ? _Tt.secondary : r.status === 'Final' ? _Tt.primary : _Tt.divider,
        border: `3px solid ${_Tt.bg}`,
        boxShadow: isLive ? `0 0 0 4px rgba(39,174,96,0.2)` : 'none',
      }}/>
      <div style={{
        background: _Tt.card, borderRadius: 14, padding: 14,
        border: isLive ? `1.5px solid ${_Tt.secondary}` : '1.5px solid transparent',
        boxShadow: '0 1px 2px rgba(27,58,45,0.04)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ font: `700 11px/1 ${_Tt.fontApp}`, color: isLive ? _Tt.secondary : _Tt.inkSub, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            R{i + 1} · {r.date}
          </div>
          {isLive ? <_Ct tone="win" size="sm">● Live</_Ct> : <_Ct tone="outline" size="sm">{r.status}</_Ct>}
        </div>
        <div style={{ font: `700 16px/1.1 ${_Tt.fontApp}`, color: _Tt.ink, marginTop: 8 }}>{r.course}</div>
        {r.myScore ? (
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 8 }}>
            <div>
              <div style={{ font: `400 10px/1 ${_Tt.fontApp}`, color: _Tt.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Your score</div>
              <div style={{ font: `700 22px/1 ${_Tt.fontApp}`, color: _Tt.ink, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{r.myScore}</div>
            </div>
            <div>
              <div style={{ font: `400 10px/1 ${_Tt.fontApp}`, color: _Tt.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Pts</div>
              <div style={{ font: `700 22px/1 ${_Tt.fontApp}`, color: _Tt.win, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{r.myPts}</div>
            </div>
          </div>
        ) : (
          <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ font: `400 13px/1.4 ${_Tt.fontApp}`, color: _Tt.inkSub }}>Tee time 7:30am · 6 of 8 confirmed</div>
            <button style={{ background: _Tt.secondary, color: '#fff', border: 'none', padding: '6px 12px', borderRadius: 8, font: `700 11px/1 ${_Tt.fontApp}`, cursor: 'pointer' }}>Join</button>
          </div>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// V3 — SCOREBOARD (sports-app)
// Tab between Live / Standings / Rounds.  Tight columnar.
// ─────────────────────────────────────────────────────────────────
function TournV3() {
  const [tab, setTab] = React.useState('standings');

  return (
    <_PSt bg={_Tt.primaryDeep} statusDark>
      <div style={{ flexShrink: 0, padding: '14px 16px 12px', color: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <_It name="chevL" size={22}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ font: `400 10px/1 ${_Tt.fontApp}`, opacity: 0.55, letterSpacing: '0.2em', textTransform: 'uppercase' }}>{TOURN.group}</div>
            <div style={{ font: `700 17px/1.1 ${_Tt.fontApp}`, marginTop: 4 }}>{TOURN.name}</div>
          </div>
          <_It name="bell" size={20}/>
        </div>
        {/* Tabs */}
        <div style={{ display: 'flex', gap: 4, marginTop: 14, background: 'rgba(255,255,255,0.08)', borderRadius: 10, padding: 3 }}>
          {[['live','Live'], ['standings','Standings'], ['rounds','Rounds']].map(([k, l]) => (
            <button key={k} onClick={() => setTab(k)} style={{
              flex: 1, padding: '8px 0', border: 'none', cursor: 'pointer',
              borderRadius: 8, background: tab === k ? '#fff' : 'transparent',
              color: tab === k ? _Tt.primaryDeep : 'rgba(255,255,255,0.7)',
              font: `700 12px/1 ${_Tt.fontApp}`,
            }}>{l}</button>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, background: _Tt.bg, color: _Tt.ink, borderRadius: '20px 20px 0 0', overflowY: 'auto' }}>
        {tab === 'live' && <LiveTab/>}
        {tab === 'standings' && <StandingsTab/>}
        {tab === 'rounds' && <RoundsTab/>}
      </div>
    </_PSt>
  );
}

function LiveTab() {
  return (
    <div style={{ padding: '18px 20px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: _Tt.secondary, boxShadow: `0 0 0 4px rgba(39,174,96,0.25)` }}/>
        <span style={{ font: `700 11px/1 ${_Tt.fontApp}`, color: _Tt.secondary, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Round 4 · live</span>
        <span style={{ font: `400 12px/1 ${_Tt.fontApp}`, color: _Tt.inkSub, marginLeft: 'auto' }}>Updated 2m ago</span>
      </div>
      <div style={{ font: `700 22px/1.1 ${_Tt.fontApp}`, color: _Tt.ink, marginTop: 12, letterSpacing: '-0.01em' }}>Biltmore Hotel GC</div>
      <div style={{ font: `400 12px/1.3 ${_Tt.fontApp}`, color: _Tt.inkSub, marginTop: 4 }}>Saturday Crew tournament · 6 of 8 playing</div>

      <div style={{ marginTop: 16, background: _Tt.card, borderRadius: 14, padding: 4, boxShadow: '0 1px 2px rgba(27,58,45,0.04)' }}>
        <SBHeader/>
        {[
          { p: _Dt.players[2], thru: 12, today: -2, total: -5, pts: 41 },
          { p: _Dt.players[0], thru: 11, today: -1, total: -4, pts: 38, me: true },
          { p: _Dt.players[1], thru: 12, today: +1, total: -3, pts: 34 },
          { p: _Dt.players[3], thru: 10, today: +3, total: +5, pts: 28 },
        ].map((row, i) => (
          <SBRow key={row.p.id} i={i + 1} {...row}/>
        ))}
      </div>

      <div style={{ marginTop: 14, padding: 14, background: '#FFF7EE', border: `1px solid #FAD9B6`, borderRadius: 14, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
        <_It name="bolt" size={18} style={{ color: _Tt.accent, marginTop: 1 }}/>
        <div>
          <div style={{ font: `700 13px/1.2 ${_Tt.fontApp}`, color: _Tt.accent }}>R4 settles tonight</div>
          <div style={{ font: `400 12px/1.4 ${_Tt.fontApp}`, color: _Tt.inkSub, marginTop: 4 }}>Tournament prize splits 60/30/10 from the prize pool.</div>
        </div>
      </div>
    </div>
  );
}
function SBHeader() {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '20px 1fr 38px 44px 50px 40px', gap: 6,
      padding: '8px 12px', font: `700 10px/1 ${_Tt.fontApp}`, color: _Tt.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase',
    }}>
      <div></div><div>Player</div><div style={{ textAlign: 'right' }}>Thru</div><div style={{ textAlign: 'right' }}>Today</div><div style={{ textAlign: 'right' }}>Total</div><div style={{ textAlign: 'right' }}>Pts</div>
    </div>
  );
}
function SBRow({ i, p, thru, today, total, pts, me }) {
  const fmt = (n) => n === 0 ? 'E' : n > 0 ? `+${n}` : `${n}`;
  const fc = (n) => n < 0 ? _Tt.win : n === 0 ? _Tt.ink : _Tt.loss;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '20px 1fr 38px 44px 50px 40px', gap: 6,
      padding: '10px 12px', alignItems: 'center', borderTop: `1px solid ${_Tt.divider}`,
      background: me ? _Tt.mint : 'transparent',
      borderRadius: me ? 10 : 0,
    }}>
      <div style={{ font: `700 13px/1 ${_Tt.fontApp}`, color: i <= 3 ? [_Tt.gold, _Tt.silver, _Tt.bronze][i-1] : _Tt.inkFaint, fontVariantNumeric: 'tabular-nums' }}>{i}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
        <_Avt player={p} size={22}/>
        <span style={{ font: `${me ? 700 : 600} 13px/1 ${_Tt.fontApp}`, color: _Tt.ink }}>{p.first}{me && ' (you)'}</span>
      </div>
      <div style={{ textAlign: 'right', font: `600 13px/1 ${_Tt.fontApp}`, color: _Tt.inkSub, fontVariantNumeric: 'tabular-nums' }}>{thru}</div>
      <div style={{ textAlign: 'right', font: `700 13px/1 ${_Tt.fontApp}`, color: fc(today), fontVariantNumeric: 'tabular-nums' }}>{fmt(today)}</div>
      <div style={{ textAlign: 'right', font: `800 14px/1 ${_Tt.fontApp}`, color: fc(total), fontVariantNumeric: 'tabular-nums' }}>{fmt(total)}</div>
      <div style={{ textAlign: 'right', font: `700 13px/1 ${_Tt.fontMono}`, color: _Tt.gold, fontVariantNumeric: 'tabular-nums' }}>{pts}</div>
    </div>
  );
}

function StandingsTab() {
  return (
    <div style={{ padding: '18px 20px' }}>
      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        <_Ct tone="dark" size="sm">Cumulative pts</_Ct>
        <_Ct tone="outline" size="sm">Money</_Ct>
        <_Ct tone="outline" size="sm">By round</_Ct>
      </div>
      <div style={{ background: _Tt.card, borderRadius: 14, overflow: 'hidden', boxShadow: '0 1px 2px rgba(27,58,45,0.04)' }}>
        {TOURN.leaderboard.map((row, i) => {
          const isMe = row.id === 'me';
          return (
            <div key={row.id} style={{
              display: 'grid', gridTemplateColumns: '24px 1fr 40px 60px', gap: 10, alignItems: 'center',
              padding: '12px 14px',
              borderBottom: i < TOURN.leaderboard.length - 1 ? `1px solid ${_Tt.divider}` : 'none',
              background: isMe ? _Tt.mint : 'transparent',
            }}>
              <div style={{ font: `700 14px/1 ${_Tt.fontApp}`, color: i < 3 ? [_Tt.gold, _Tt.silver, _Tt.bronze][i] : _Tt.inkFaint, fontVariantNumeric: 'tabular-nums' }}>{i + 1}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                <_Avt player={{ initials: leaderInitials(row), color: leaderColor(row) }} size={32}/>
                <div>
                  <div style={{ font: `${isMe ? 700 : 600} 13px/1.2 ${_Tt.fontApp}`, color: _Tt.ink }}>{leaderName(row).split(' ')[0]}{isMe ? ' (you)' : ''}</div>
                  <div style={{ font: `400 11px/1 ${_Tt.fontApp}`, color: _Tt.inkSub, marginTop: 3 }}>{i === 0 ? 'Leader' : i < 3 ? 'Top 3' : '—'}</div>
                </div>
              </div>
              <div style={{ font: `700 16px/1 ${_Tt.fontApp}`, color: _Tt.ink, fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}>{row.pts}</div>
              <_Mt cents={row.money} size={13}/>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function RoundsTab() {
  return (
    <div style={{ padding: '18px 20px' }}>
      {TOURN.rounds.map((r, i) => (
        <div key={r.id} style={{
          background: _Tt.card, borderRadius: 14, padding: 14, marginBottom: 8,
          display: 'flex', alignItems: 'center', gap: 12,
          boxShadow: '0 1px 2px rgba(27,58,45,0.04)',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: r.status === 'Live' ? _Tt.secondary : _Tt.mint,
            color: r.status === 'Live' ? '#fff' : _Tt.primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            font: `800 16px/1 ${_Tt.fontApp}`,
          }}>R{i + 1}</div>
          <div style={{ flex: 1 }}>
            <div style={{ font: `700 14px/1.1 ${_Tt.fontApp}`, color: _Tt.ink }}>{r.course}</div>
            <div style={{ font: `400 12px/1.3 ${_Tt.fontApp}`, color: _Tt.inkSub, marginTop: 3 }}>{r.date} · {r.status}</div>
          </div>
          {r.myScore ? (
            <div style={{ textAlign: 'right' }}>
              <div style={{ font: `700 18px/1 ${_Tt.fontApp}`, color: _Tt.ink, fontVariantNumeric: 'tabular-nums' }}>{r.myScore}</div>
              <div style={{ font: `700 12px/1 ${_Tt.fontMono}`, color: _Tt.gold, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{r.myPts}pts</div>
            </div>
          ) : (
            <_Ct tone="win" size="sm">● Live</_Ct>
          )}
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// V4 — EDITORIAL MAGAZINE  (push)
// Playfair Display, dark forest bg, gold ribbons. Treats the
// tournament like a sports magazine cover.
// ─────────────────────────────────────────────────────────────────
function TournV4() {
  return (
    <_PSt bg={_Tt.webBg} statusDark>
      <div style={{ flex: 1, overflowY: 'auto', color: _Tt.webText, position: 'relative' }}>
        <div style={{
          position: 'absolute', top: -80, right: -80, width: 320, height: 320, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(201,168,76,0.18), transparent 60%)', pointerEvents: 'none',
        }}/>

        {/* Top bar */}
        <div style={{ position: 'relative', padding: '14px 22px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <_It name="chevL" size={22}/>
          <div style={{ font: `600 10px/1 ${_Tt.fontBody}`, letterSpacing: '0.36em', color: _Tt.webGold, textTransform: 'uppercase' }}>The Series</div>
          <_It name="share" size={20}/>
        </div>

        {/* COVER */}
        <div style={{ position: 'relative', padding: '12px 26px 24px' }}>
          <div style={{ font: `600 10px/1 ${_Tt.fontBody}`, letterSpacing: '0.36em', color: _Tt.webGold, textTransform: 'uppercase' }}>Saturday Crew · 2026</div>
          <h1 style={{ font: `700 48px/0.92 ${_Tt.fontDisplay}`, margin: '14px 0 4px', letterSpacing: '-0.02em' }}>
            Summer<br/><em style={{ color: _Tt.webGold }}>Series.</em>
          </h1>
          <div style={{ font: `400 13px/1.5 ${_Tt.fontBody}`, color: 'rgba(240,235,224,0.65)', marginTop: 18 }}>
            Four rounds. Three done. Jay leads, but Mike's been streaking — eagle on 17 last week kept him in this. R4 settles Saturday.
          </div>

          {/* Glass leader card */}
          <div style={{
            marginTop: 22, padding: 18,
            background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(201,168,76,0.18)',
            borderRadius: 22,
            display: 'flex', alignItems: 'center', gap: 14,
            position: 'relative',
          }}>
            <div style={{ position: 'absolute', top: -10, left: 18, padding: '4px 10px', background: _Tt.webGold, color: _Tt.webBg, borderRadius: 100, font: `700 9px/1 ${_Tt.fontBody}`, letterSpacing: '0.2em', textTransform: 'uppercase' }}>The leader</div>
            <_Avt player={_Dt.players[2]} size={64}/>
            <div style={{ flex: 1 }}>
              <div style={{ font: `700 22px/1.1 ${_Tt.fontDisplay}`, color: _Tt.webText }}>Jay Patel</div>
              <div style={{ font: `300 12px/1.4 ${_Tt.fontBody}`, color: 'rgba(240,235,224,0.55)', marginTop: 6 }}>
                118 pts · +$64 · two course-record cards
              </div>
            </div>
          </div>
        </div>

        <div style={{ height: 1, background: 'rgba(201,168,76,0.18)', margin: '0 22px' }}/>

        {/* Standings */}
        <div style={{ padding: '20px 22px 8px' }}>
          <div style={{ font: `600 10px/1 ${_Tt.fontBody}`, letterSpacing: '0.32em', color: _Tt.webGold, textTransform: 'uppercase', marginBottom: 12 }}>The field</div>
          {TOURN.leaderboard.map((row, i) => {
            const isMe = row.id === 'me';
            return (
              <div key={row.id} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 0', borderBottom: i < TOURN.leaderboard.length - 1 ? `1px solid rgba(201,168,76,0.12)` : 'none',
              }}>
                <div style={{ font: `700 14px/1 ${_Tt.fontDisplay}`, color: i < 3 ? _Tt.webGold : 'rgba(240,235,224,0.45)', minWidth: 18, fontVariantNumeric: 'tabular-nums' }}>{i + 1}</div>
                <_Avt player={{ initials: leaderInitials(row), color: leaderColor(row) }} size={36}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ font: `${isMe ? 700 : 600} 15px/1.2 ${_Tt.fontBody}`, color: _Tt.webText }}>
                    {leaderName(row).split(' ')[0]}{isMe ? <em style={{ color: _Tt.webGold, fontStyle: 'italic', fontWeight: 400 }}> · you</em> : ''}
                  </div>
                </div>
                <div style={{ font: `700 16px/1 ${_Tt.fontDisplay}`, color: _Tt.webText, fontVariantNumeric: 'tabular-nums' }}>{row.pts}</div>
                <div style={{
                  font: `600 13px/1 ${_Tt.fontMono}`, fontVariantNumeric: 'tabular-nums',
                  color: row.money >= 0 ? '#5BE584' : '#F0805F', minWidth: 50, textAlign: 'right',
                }}>
                  {row.money >= 0 ? '+' : '−'}${(Math.abs(row.money)/100).toFixed(0)}
                </div>
              </div>
            );
          })}
        </div>

        {/* R4 preview */}
        <div style={{ padding: '12px 22px 28px' }}>
          <div style={{
            background: 'linear-gradient(135deg, rgba(201,168,76,0.16) 0%, rgba(201,168,76,0.04) 100%)',
            border: '1px solid rgba(201,168,76,0.22)', borderRadius: 22, padding: 20,
          }}>
            <div style={{ font: `600 10px/1 ${_Tt.fontBody}`, letterSpacing: '0.32em', color: _Tt.webGold, textTransform: 'uppercase' }}>Round 4 · the closer</div>
            <h3 style={{ font: `700 24px/1.1 ${_Tt.fontDisplay}`, margin: '8px 0 6px' }}>Biltmore</h3>
            <div style={{ font: `300 13px/1.5 ${_Tt.fontBody}`, color: 'rgba(240,235,224,0.6)' }}>
              May 24 · 7:30am tee · 6 of 8 confirmed
            </div>
            <button style={{
              marginTop: 16, padding: '12px 20px',
              background: _Tt.webGold, color: _Tt.webBg, border: 'none',
              borderRadius: 100, font: `600 13px/1 ${_Tt.fontBody}`, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              boxShadow: '0 8px 24px rgba(201,168,76,0.24)',
            }}>RSVP <_It name="arrowR" size={14}/></button>
          </div>
        </div>
      </div>
    </_PSt>
  );
}

Object.assign(window, { TournV1, TournV2, TournV3, TournV4 });