// Sporda — Phase E · Onboarding. 6 mobile screens (041 Follow teams already
// shipped Session 1 as ScreenOnboarding in screens-2.jsx). Mobile-only.
// Step progress: 1 Welcome → 2 Sports → 3 Leagues → 4 Teams → 5 Players →
// 6 Notifications → 7 Complete.

// Shared 7-step progress bar
const OnbProgress = ({ step }) => (
  <div style={{ padding: '8px 20px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
    <RoundBtn><I.chevL size={18}/></RoundBtn>
    <div style={{ flex: 1 }}>
      <div style={{ display: 'flex', gap: 4 }}>
        {Array.from({ length: 7 }, (_, i) => (
          <span key={i} style={{
            flex: 1, height: 4, borderRadius: 2,
            background: i < step ? 'var(--accent)' : 'var(--border-hairline)',
          }}/>
        ))}
      </div>
    </div>
    <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontWeight: 600 }}>{step}/7</span>
  </div>
);

// Sticky bottom CTA strip
const OnbBottomCTA = ({ label, sub, disabled }) => (
  <div style={{
    position: 'absolute', bottom: 0, left: 0, right: 0,
    padding: '16px 20px 32px',
    background: 'linear-gradient(180deg, rgba(10,15,12,0) 0%, var(--bg-base) 35%)',
  }}>
    {sub && <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--text-muted)', marginBottom: 10 }}>{sub}</div>}
    <button style={{
      width: '100%', height: 52, borderRadius: 'var(--r-pill)',
      background: disabled ? 'var(--bg-surface)' : 'var(--accent)',
      color: disabled ? 'var(--text-muted)' : 'var(--accent-ink)',
      border: disabled ? '1px solid var(--border-strong)' : 'none',
      fontWeight: 700, fontSize: 15,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    }}>{label} <I.chevR size={16}/></button>
  </div>
);

// ===========================================================================
// 038 — WELCOME / HERO (step 1 of 7)
// ===========================================================================
const ScreenOnboardWelcome = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      {/* Top half — hero with atmospheric gradient */}
      <div style={{
        flex: 1,
        background:
          'radial-gradient(ellipse at 70% 30%, rgba(200,255,62,0.22), transparent 50%), ' +
          'radial-gradient(ellipse at 20% 80%, rgba(125,255,140,0.10), transparent 50%), ' +
          'linear-gradient(180deg, #0F2218 0%, #182320 60%, var(--bg-base) 100%)',
        position: 'relative',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        padding: '40px 24px 32px',
      }}>
        {/* Logomark top-left */}
        <div style={{ position: 'absolute', top: 70, left: 24, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent-ink)' }}>
            <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 4 7v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V7l-8-5z"/></svg>
          </div>
          <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>Sporda</span>
        </div>
        {/* Floating live-score chips for atmosphere */}
        <div style={{ position: 'absolute', top: 130, left: 24, right: 24, display: 'flex', flexDirection: 'column', gap: 8, opacity: 0.6 }}>
          {[
            { teams: 'Arsenal — Liverpool', score: '2 : 1', live: '67\'', tilt: -2 },
            { teams: 'Lakers — Celtics',    score: '102 : 98', live: 'Q4', tilt: 1 },
            { teams: 'Verstappen P1',       score: 'L34/78',  live: 'LIVE', tilt: -1 },
          ].map((c, i) => (
            <div key={i} style={{
              transform: `rotate(${c.tilt}deg) translateX(${i * 12}px)`,
              background: 'rgba(18,25,21,0.85)',
              backdropFilter: 'blur(8px)',
              border: '1px solid rgba(255,255,255,0.06)',
              borderRadius: 12, padding: '8px 12px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              fontSize: 11, fontWeight: 600,
              maxWidth: 260, marginLeft: i * 8,
            }}>
              <span style={{ color: 'var(--text-secondary)' }}>{c.teams}</span>
              <span className="mono" style={{ fontWeight: 800 }}>{c.score}</span>
              <span style={{ color: 'var(--live)', fontWeight: 700, marginLeft: 8 }}>{c.live}</span>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 36, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.02em', textWrap: 'balance' }}>
          Every sport.<br/>Every score.<br/><span style={{ color: 'var(--accent)' }}>One tap.</span>
        </div>
        <div style={{ marginTop: 12, fontSize: 14, color: 'var(--text-secondary)', textWrap: 'pretty', maxWidth: 320 }}>
          Live scores, lineups, and momentum across football, NBA, F1, cricket, tennis, MMA, esports — built for fans who want depth, not noise.
        </div>
      </div>

      {/* Bottom action */}
      <div style={{ padding: '20px 24px 32px', background: 'var(--bg-base)' }}>
        <button style={{
          width: '100%', height: 52, borderRadius: 'var(--r-pill)',
          background: 'var(--accent)', color: 'var(--accent-ink)',
          fontWeight: 700, fontSize: 15,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>Get started <I.chevR size={16}/></button>
        <button style={{
          marginTop: 10, width: '100%', height: 48, borderRadius: 'var(--r-pill)',
          background: 'transparent', color: 'var(--text-secondary)',
          fontWeight: 600, fontSize: 14,
        }}>I have an account</button>
        <div style={{ marginTop: 12, fontSize: 11, color: 'var(--text-muted)', textAlign: 'center', textWrap: 'pretty', lineHeight: 1.5 }}>
          By continuing you agree to our <span style={{ textDecoration: 'underline' }}>Terms</span> and <span style={{ textDecoration: 'underline' }}>Privacy Policy</span>.
        </div>
      </div>
    </div>
  </div>
);

// ===========================================================================
// 039 — PICK SPORT INTERESTS (step 2 of 7)
// ===========================================================================
const SPORTS = [
  { code: 'football',   name: 'Football',   icon: '⚽', sub: 'Soccer · global', bg: '#22C55E', selected: true },
  { code: 'basketball', name: 'Basketball', icon: '🏀', sub: 'NBA · WNBA · EuroLeague', bg: '#F8B400', selected: true },
  { code: 'tennis',     name: 'Tennis',     icon: '🎾', sub: 'ATP · WTA · majors', bg: '#FFE66D' },
  { code: 'f1',         name: 'Motorsport', icon: '🏎', sub: 'F1 · IndyCar · MotoGP', bg: '#FF3B5C', selected: true },
  { code: 'cricket',    name: 'Cricket',    icon: '🏏', sub: 'Tests · ODIs · T20', bg: '#3D5AFE' },
  { code: 'nfl',        name: 'American football', icon: '🏈', sub: 'NFL · NCAA', bg: '#8B4513' },
  { code: 'mma',        name: 'MMA / Boxing', icon: '🥊', sub: 'UFC · Boxing', bg: '#7158E2' },
  { code: 'golf',       name: 'Golf',       icon: '⛳', sub: 'PGA · LIV · LPGA', bg: '#4ECDC4' },
  { code: 'esports',    name: 'Esports',    icon: '🎮', sub: 'LoL · CS · Valorant', bg: '#EC4899', selected: true },
];

const ScreenOnboardSports = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <OnbProgress step={2}/>
      <div className="body" style={{ paddingBottom: 140 }}>
        <div style={{ padding: '0 20px 4px' }}>
          <h1 className="screen-title" style={{ fontSize: 26, lineHeight: 1.15, textWrap: 'balance' }}>What do you<br/>follow?</h1>
          <div style={{ marginTop: 8, fontSize: 14, color: 'var(--text-secondary)', textWrap: 'pretty' }}>
            Pick any number. We'll only surface what you care about.
          </div>
        </div>

        <div style={{ padding: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {SPORTS.map(s => (
            <div key={s.code} style={{
              background: s.selected ? 'var(--accent)' : 'var(--bg-surface)',
              color: s.selected ? 'var(--accent-ink)' : 'var(--text-primary)',
              border: '1px solid ' + (s.selected ? 'var(--accent)' : 'var(--border-hairline)'),
              borderRadius: 16, padding: 16,
              position: 'relative', display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12,
                background: s.selected ? 'rgba(0,0,0,0.15)' : `${s.bg}30`,
                fontSize: 22, display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{s.icon}</div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>{s.name}</div>
              <div style={{ fontSize: 10, color: s.selected ? 'rgba(10,20,0,0.7)' : 'var(--text-secondary)', fontWeight: 600 }}>{s.sub}</div>
              {s.selected && (
                <div style={{ position: 'absolute', top: 10, right: 10, width: 22, height: 22, borderRadius: '50%', background: '#0A1400', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <I.check size={14}/>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
      <OnbBottomCTA label="Continue · 4 picked" sub="You can change these later in Settings"/>
    </div>
  </div>
);

// ===========================================================================
// 040 — FOLLOW LEAGUES (step 3 of 7)
// ===========================================================================
const ScreenOnboardLeagues = () => {
  const groups = [
    { sport: 'Football', leagues: [
      { code: 'PL',  name: 'Premier League',   sub: 'England · 20 clubs',  bg: '#3D5AFE', sel: true },
      { code: 'LL',  name: 'La Liga',          sub: 'Spain · 20 clubs',    bg: '#EC4899', sel: true },
      { code: 'BL',  name: 'Bundesliga',       sub: 'Germany · 18 clubs',  bg: '#FFE66D' },
      { code: 'SA',  name: 'Serie A',          sub: 'Italy · 20 clubs',    bg: '#22C55E' },
      { code: 'L1',  name: 'Ligue 1',          sub: 'France · 18 clubs',   bg: '#0066CC' },
      { code: 'UCL', name: 'Champions League', sub: 'UEFA · 36 clubs',     bg: '#A855F7', sel: true },
    ]},
    { sport: 'Basketball', leagues: [
      { code: 'NBA', name: 'NBA',          sub: 'USA · 30 teams', bg: '#C8102E', sel: true },
      { code: 'WBA', name: 'WNBA',         sub: 'USA · 12 teams', bg: '#FF6B6B' },
      { code: 'EUR', name: 'EuroLeague',   sub: 'Europe · 18 clubs', bg: '#7158E2' },
    ]},
    { sport: 'Motorsport', leagues: [
      { code: 'F1',  name: 'Formula 1',    sub: '24 races · 10 teams', bg: '#FFFFFF', sel: true },
      { code: 'MGP', name: 'MotoGP',       sub: '21 rounds', bg: '#FF3B5C' },
    ]},
  ];
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <OnbProgress step={3}/>
        <div className="body" style={{ paddingBottom: 140 }}>
          <div style={{ padding: '0 20px 16px' }}>
            <h1 className="screen-title" style={{ fontSize: 26, lineHeight: 1.15, textWrap: 'balance' }}>Which leagues<br/>matter to you?</h1>
            <div style={{ marginTop: 8, fontSize: 14, color: 'var(--text-secondary)' }}>
              We'll prioritize their fixtures and news.
            </div>
          </div>

          <div style={{ padding: '0 20px 16px' }}>
            <div className="searchbar"><I.search size={18}/><input placeholder="Search leagues, competitions"/></div>
          </div>

          {groups.map(g => (
            <div key={g.sport} style={{ padding: '0 0 12px' }}>
              <div style={{ padding: '4px 20px 10px', fontSize: 11, fontWeight: 800, color: 'var(--accent)', letterSpacing: '0.08em' }}>
                {g.sport.toUpperCase()}
              </div>
              <div style={{ padding: '0 12px' }}>
                {g.leagues.map(l => (
                  <div key={l.code} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '12px 8px', borderBottom: '1px solid var(--border-hairline)',
                  }}>
                    <div style={{ width: 40, height: 40, borderRadius: 10, background: l.bg, color: l.bg === '#FFFFFF' ? '#0A1400' : 'white', fontSize: 11, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      {l.code}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 600 }}>{l.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{l.sub}</div>
                    </div>
                    <div className={'toggle' + (l.sel ? ' on' : '')}/>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <OnbBottomCTA label="Continue · 4 leagues"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 042 — FOLLOW PLAYERS (step 5 of 7)
// ===========================================================================
const ScreenOnboardPlayers = () => {
  const suggested = [
    { name: 'Bukayo Saka',     team: 'ARS', bg: '#EF0107', sport: '⚽', sel: true },
    { name: 'Erling Haaland',  team: 'MCI', bg: '#6CABDD', sport: '⚽' },
    { name: 'LeBron James',    team: 'LAL', bg: '#552583', sport: '🏀', sel: true },
    { name: 'Mohamed Salah',   team: 'LIV', bg: '#C8102E', sport: '⚽' },
    { name: 'Max Verstappen',  team: 'RBR', bg: '#1E5BC6', sport: '🏎', sel: true },
    { name: 'Virat Kohli',     team: 'IND', bg: '#FFA42B', sport: '🏏' },
    { name: 'Rory McIlroy',    team: 'PGA', bg: '#22C55E', sport: '⛳' },
    { name: 'Faker',           team: 'T1',  bg: '#E2012D', sport: '🎮' },
    { name: 'Stephen Curry',   team: 'GSW', bg: '#FDB927', sport: '🏀' },
  ];
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <OnbProgress step={5}/>
        <div className="body" style={{ paddingBottom: 140 }}>
          <div style={{ padding: '0 20px 16px' }}>
            <h1 className="screen-title" style={{ fontSize: 26, lineHeight: 1.15, textWrap: 'balance' }}>Star players<br/>to follow?</h1>
            <div style={{ marginTop: 8, fontSize: 14, color: 'var(--text-secondary)', textWrap: 'pretty' }}>
              Get alerts when they score, race, or break records.
            </div>
          </div>
          <div style={{ padding: '0 20px 16px' }}>
            <div className="searchbar"><I.search size={18}/><input placeholder="Search players"/></div>
          </div>
          <div style={{ padding: '0 20px 8px', fontSize: 11, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>
            Suggested · based on your teams
          </div>
          <div style={{ padding: '0 20px 16px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
            {suggested.map(p => (
              <div key={p.name} style={{
                background: p.sel ? 'var(--accent)' : 'var(--bg-surface)',
                color: p.sel ? 'var(--accent-ink)' : 'var(--text-primary)',
                border: '1px solid ' + (p.sel ? 'var(--accent)' : 'var(--border-hairline)'),
                borderRadius: 14, padding: 10,
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                position: 'relative',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: p.bg, color: p.bg === '#FFFFFF' ? '#0A1400' : 'white',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, fontSize: 11,
                  position: 'relative',
                }}>
                  {p.name.split(' ').map(x => x[0]).join('').slice(0, 2)}
                  <span style={{ position: 'absolute', bottom: -3, right: -3, fontSize: 14 }}>{p.sport}</span>
                </div>
                <div style={{ fontSize: 11, fontWeight: 700, textAlign: 'center', lineHeight: 1.2 }}>{p.name.split(' ')[0]}<br/>{p.name.split(' ').slice(1).join(' ')}</div>
                <div style={{ fontSize: 9, color: p.sel ? 'rgba(10,20,0,0.7)' : 'var(--text-muted)' }}>{p.team}</div>
                {p.sel && (
                  <div style={{ position: 'absolute', top: 6, right: 6, width: 18, height: 18, borderRadius: '50%', background: '#0A1400', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <I.check size={12}/>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
        <OnbBottomCTA label="Continue · 3 players" sub="Skip if you'd rather follow teams only"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 043 — NOTIFICATION PREFERENCES (step 6 of 7)
// ===========================================================================
const ScreenOnboardNotif = () => {
  const prefs = [
    { key: 'goals',    title: 'Goals & scores',  sub: 'When a followed team scores or a match flips', on: true },
    { key: 'lineups',  title: 'Lineups posted',  sub: '1 hour before kick-off', on: true },
    { key: 'start',    title: 'Match start',     sub: 'When a followed match begins', on: false },
    { key: 'final',    title: 'Final whistle',   sub: 'Match-end summary', on: true },
    { key: 'transfer', title: 'Transfer news',   sub: 'Major moves for your teams', on: false },
    { key: 'injury',   title: 'Injury news',     sub: 'Key players ruled in or out', on: true },
    { key: 'digest',   title: 'Daily digest',    sub: '8 AM recap of last 24h', on: false },
  ];
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <OnbProgress step={6}/>
        <div className="body" style={{ paddingBottom: 140 }}>
          <div style={{ padding: '0 20px 16px' }}>
            <h1 className="screen-title" style={{ fontSize: 26, lineHeight: 1.15, textWrap: 'balance' }}>Stay in the<br/>loop?</h1>
            <div style={{ marginTop: 8, fontSize: 14, color: 'var(--text-secondary)' }}>
              You're in control. Toggle each type. Change anytime.
            </div>
          </div>

          {/* Permission ask card */}
          <div style={{ padding: '0 20px 16px' }}>
            <div style={{
              background: 'var(--hero-grad)',
              border: '1px solid rgba(200,255,62,0.20)',
              borderRadius: 16, padding: 14,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--accent)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <I.bell size={20}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>Enable notifications</div>
                <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>Required for goal alerts. We won't spam you.</div>
              </div>
              <button style={{ padding: '8px 14px', background: '#0A1400', color: 'var(--accent)', borderRadius: 999, fontSize: 12, fontWeight: 700 }}>Allow</button>
            </div>
          </div>

          {/* Toggle list */}
          <div style={{ padding: '0 20px' }}>
            {prefs.map(p => (
              <div key={p.key} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '14px 0', borderBottom: '1px solid var(--border-hairline)',
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{p.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 2 }}>{p.sub}</div>
                </div>
                <div className={'toggle' + (p.on ? ' on' : '')}/>
              </div>
            ))}
          </div>

          {/* Quiet hours hint */}
          <div style={{ padding: '20px 20px 8px' }}>
            <button style={{ width: '100%', padding: '14px', background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-inset)', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
              </div>
              <div style={{ flex: 1, textAlign: 'left' }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Set quiet hours</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>Pause notifications nights & weekdays</div>
              </div>
              <I.chevR/>
            </button>
          </div>
        </div>
        <OnbBottomCTA label="Continue" sub="You can fine-tune per-team in Settings"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 044 — PERSONALIZE COMPLETE (step 7 of 7)
// ===========================================================================
const ScreenOnboardComplete = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <OnbProgress step={7}/>
      <div className="body" style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{
          flex: 1, padding: '40px 28px 20px',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          textAlign: 'center',
        }}>
          {/* Big confetti-y checkmark */}
          <div style={{
            position: 'relative', marginBottom: 28,
          }}>
            <div style={{
              width: 120, height: 120, borderRadius: '50%',
              background: 'radial-gradient(circle at center, rgba(200,255,62,0.20) 0%, transparent 70%)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{
                width: 80, height: 80, borderRadius: '50%',
                background: 'var(--accent)', color: 'var(--accent-ink)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 10px 30px rgba(200,255,62,0.40)',
              }}>
                <I.check size={40}/>
              </div>
            </div>
            {/* Confetti dots */}
            {[
              { top: 0, left: 10, color: '#FF6B6B' },
              { top: 20, right: 5, color: '#3D5AFE' },
              { bottom: 30, left: 0, color: '#FFE66D' },
              { bottom: 0, right: 20, color: '#22C55E' },
              { top: 60, left: -8, color: '#EC4899' },
            ].map((d, i) => (
              <div key={i} style={{ position: 'absolute', ...d, width: 8, height: 8, borderRadius: '50%', background: d.color }}/>
            ))}
          </div>

          <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.15, textWrap: 'balance' }}>
            You're all set,<br/><span style={{ color: 'var(--accent)' }}>Ben.</span>
          </div>
          <div style={{ marginTop: 10, fontSize: 14, color: 'var(--text-secondary)', textWrap: 'pretty', maxWidth: 300 }}>
            Your feed is ready. We've found <strong style={{ color: 'var(--text-primary)' }}>3 live matches</strong> and <strong style={{ color: 'var(--text-primary)' }}>12 upcomings</strong> for the teams you picked.
          </div>

          {/* Stats summary */}
          <div style={{ marginTop: 28, width: '100%', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {[
              { v: 4, l: 'Sports' },
              { v: 4, l: 'Leagues' },
              { v: 6, l: 'Teams' },
              { v: 3, l: 'Players' },
            ].map(s => (
              <div key={s.l} style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)', borderRadius: 12, padding: '12px 4px', textAlign: 'center' }}>
                <div className="mono" style={{ fontSize: 22, fontWeight: 800, color: 'var(--accent)' }}>{s.v}</div>
                <div style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 700, marginTop: 2, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{s.l}</div>
              </div>
            ))}
          </div>

          {/* What you'll see preview */}
          <div style={{ marginTop: 22, width: '100%', textAlign: 'left' }}>
            <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>First in your feed</div>
            <div style={{
              background: 'var(--hero-grad)',
              border: '1px solid rgba(200,255,62,0.15)',
              borderRadius: 14, padding: 14,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div className="pill live"><span className="dot"/>67'</div>
              <div style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>Arsenal 2–1 Norse Utd</div>
              <I.chevR/>
            </div>
          </div>
        </div>

        <div style={{ padding: '16px 24px 32px', background: 'var(--bg-base)' }}>
          <button style={{
            width: '100%', height: 52, borderRadius: 'var(--r-pill)',
            background: 'var(--accent)', color: 'var(--accent-ink)',
            fontWeight: 700, fontSize: 15,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>Open Sporda <I.chevR size={16}/></button>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  OnbProgress, OnbBottomCTA, SPORTS,
  ScreenOnboardWelcome, ScreenOnboardSports, ScreenOnboardLeagues,
  ScreenOnboardPlayers, ScreenOnboardNotif, ScreenOnboardComplete,
});