// screens-sports.jsx — Group 2: Sports (5 screens)

const SPORT_FILTERS = [
  { id:'all', label:'All' }, { id:'football', label:'Football' },
  { id:'basketball', label:'Basketball' }, { id:'tennis', label:'Tennis' },
  { id:'cricket', label:'Cricket' }, { id:'more', label:'More +' },
];

/* ── Screen 5: Sports Home ── */
function SportsHomeScreen({ navigate }) {
  const [filter, setFilter] = React.useState('all');
  const liveEvents = SPORT_EVENTS.filter(e => e.isLive);
  const allUpcoming = SPORT_EVENTS.filter(e => !e.isLive);
  const upcoming = filter === 'all' ? allUpcoming : allUpcoming.filter(e => e.sport === filter);
  const plEvents = upcoming.filter(e => e.league === 'pl');
  const uclEvents = upcoming.filter(e => e.league === 'ucl' || e.league === 'll' || e.league === 'bl');
  const nbaEvents = upcoming.filter(e => e.league === 'nba' || e.league === 'tennis');

  return (
    <React.Fragment>
      {/* Filter pills */}
      <div style={{ background:'var(--color-nav-bg)', borderBottom:'1px solid var(--color-border-subtle)', padding:'8px 16px', flexShrink:0 }}>
        <div style={{ display:'flex', gap:6, overflowX:'auto', WebkitOverflowScrolling:'touch' }}>
          {SPORT_FILTERS.map(f => {
            const on = filter === f.id;
            return (
              <button key={f.id} onClick={() => setFilter(f.id)} style={{ flexShrink:0, height:32, padding:'0 14px', borderRadius:8, background:on?'var(--color-primary)':'var(--color-surface)', border:`1px solid ${on?'var(--color-primary)':'var(--color-border)'}`, cursor:'pointer', fontFamily:'var(--font-body)', fontSize:12, fontWeight:on?600:400, color:on?'#fff':'var(--color-text-secondary)', whiteSpace:'nowrap', transition:'all 0.15s ease' }}>{f.label}</button>
            );
          })}
        </div>
      </div>
      <div style={{ flex:1, overflowY:'auto', overflowX:'hidden', background:'var(--color-bg)' }}>

        {/* Live events horizontal scroll */}
        {liveEvents.length > 0 && (
          <div style={{ paddingTop:16, marginBottom:16 }}>
            <div style={{ display:'flex', alignItems:'center', gap:7, padding:'0 16px', marginBottom:10 }}>
              <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:15, color:'var(--color-text-primary)' }}>Live now</span>
              <span style={{ display:'flex', alignItems:'center', gap:4, background:'rgba(239,91,91,0.18)', border:'1px solid rgba(239,91,91,0.4)', borderRadius:5, padding:'2px 6px', fontSize:9, fontWeight:700, color:'var(--color-danger)', letterSpacing:0.5 }}>
                <span style={{ width:5, height:5, borderRadius:'50%', background:'var(--color-danger)', animation:'pulse-live 1.5s infinite' }} />
                LIVE
              </span>
            </div>
            <div style={{ display:'flex', gap:10, overflowX:'auto', padding:'0 16px 4px', WebkitOverflowScrolling:'touch', scrollSnapType:'x mandatory' }}>
              {liveEvents.map(ev => (
                <div key={ev.id} onClick={() => navigate('event-detail', { event: ev })} style={{ flexShrink:0, width:220, borderRadius:14, background:'var(--color-surface)', border:'1px solid var(--color-border)', padding:'12px', cursor:'pointer', scrollSnapAlign:'start' }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)' }}>{ev.competition}</span>
                    <span style={{ display:'flex', alignItems:'center', gap:3, background:'rgba(239,91,91,0.15)', borderRadius:4, padding:'2px 6px', fontSize:9, fontWeight:700, color:'var(--color-danger)' }}>
                      <span style={{ width:4, height:4, borderRadius:'50%', background:'var(--color-danger)', animation:'pulse-live 1.5s infinite' }} />
                      {ev.time}
                    </span>
                  </div>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12 }}>
                    <div style={{ display:'flex', alignItems:'center', gap:7, flex:1 }}>
                      <TeamBadge initials={ev.homeBadge} color={ev.homeColor} size={28} />
                      <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:12, color:'var(--color-text-primary)' }}>{ev.home}</span>
                    </div>
                    <div style={{ padding:'4px 10px', background:'var(--color-surface-raised)', borderRadius:8, flexShrink:0 }}>
                      <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>{ev.homeScore} – {ev.awayScore}</span>
                    </div>
                    <div style={{ display:'flex', alignItems:'center', gap:7, flex:1, justifyContent:'flex-end' }}>
                      <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:12, color:'var(--color-text-primary)' }}>{ev.away}</span>
                      <TeamBadge initials={ev.awayBadge} color={ev.awayColor} size={28} />
                    </div>
                  </div>
                  <div style={{ display:'flex', gap:6 }}>
                    {ev.sport === 'basketball'
                      ? [['H',ev.odds.home],['A',ev.odds.away]].map(([l,v]) => <button key={l} style={{ flex:1, height:36, borderRadius:8, background:'var(--color-odds-bg)', border:'1px solid var(--color-border)', cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'var(--color-text-primary)' }}>{v}</button>)
                      : [['1',ev.odds.home],['X',ev.odds.draw],['2',ev.odds.away]].map(([l,v]) => <button key={l} style={{ flex:1, height:36, borderRadius:8, background:'var(--color-odds-bg)', border:'1px solid var(--color-border)', cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
                          <span style={{ fontFamily:'var(--font-body)', fontSize:9, color:'var(--color-text-muted)' }}>{l}</span>
                          <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>{v}</span>
                        </button>)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
        <Divider />

        {/* Upcoming leagues */}
        {[{title:'Premier League',events:plEvents},{title:'European & Other',events:uclEvents},{title:'Basketball & Tennis',events:nbaEvents}].filter(s=>s.events.length>0).map(section => (
          <div key={section.title} style={{ marginTop:16, marginBottom:4 }}>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 16px', marginBottom:8 }}>
              <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)' }}>{section.title}</span>
              <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-primary)', cursor:'pointer' }}>See all</span>
            </div>
            {section.events.map(ev => (
              <div key={ev.id} onClick={() => navigate('event-detail', { event: ev })} style={{ padding:'10px 16px', cursor:'pointer', borderBottom:'1px solid var(--color-border-subtle)' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
                  <span style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)' }}>{ev.competition} · {ev.time}</span>
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                  <div style={{ flex:1, display:'flex', gap:8, alignItems:'center' }}>
                    <TeamBadge initials={ev.homeBadge} color={ev.homeColor} size={26} />
                    <div>
                      <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:13, color:'var(--color-text-primary)' }}>{ev.home}</div>
                      <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:13, color:'var(--color-text-primary)' }}>{ev.away}</div>
                    </div>
                  </div>
                  <div style={{ display:'flex', gap:5 }}>
                    {ev.sport === 'basketball' || ev.sport === 'tennis'
                      ? [['H',ev.odds.home],['A',ev.odds.away]].map(([l,v]) => (
                          <button key={l} style={{ width:56, height:42, borderRadius:8, background:'var(--color-odds-bg)', border:'1px solid var(--color-border)', cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:1 }}>
                            <span style={{ fontFamily:'var(--font-body)', fontSize:9, color:'var(--color-text-muted)' }}>{l}</span>
                            <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>{v}</span>
                          </button>))
                      : [['1',ev.odds.home],['X',ev.odds.draw],['2',ev.odds.away]].map(([l,v]) => (
                          <button key={l} style={{ width:50, height:42, borderRadius:8, background:'var(--color-odds-bg)', border:'1px solid var(--color-border)', cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:1 }}>
                            <span style={{ fontFamily:'var(--font-body)', fontSize:9, color:'var(--color-text-muted)' }}>{l}</span>
                            <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>{v}</span>
                          </button>))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        ))}
        <div style={{ height:20 }} />
      </div>
    </React.Fragment>
  );
}

/* ── Screen 6: Event Detail ── */
function EventDetailScreen({ navigate, goBack, event, onAddBet }) {
  const ev = event || SPORT_EVENTS[0];
  const [activeMarket, setActiveMarket] = React.useState('result');
  const [selectedOdds, setSelectedOdds] = React.useState(null);
  const [statsOpen, setStatsOpen] = React.useState(false);
  const markets = ['result', 'btts', 'over-under', 'handicap', 'first-scorer'];
  const marketLabel = { result:'Match Result', btts:'BTTS', 'over-under':'Over/Under', handicap:'Handicap', 'first-scorer':'First Scorer' };
  const oddsForMarket = {
    result: ev.sport==='basketball'||ev.sport==='tennis'
      ? [['Home',ev.home,ev.odds.home],['Away',ev.away,ev.odds.away]]
      : [['1',ev.home,ev.odds.home],['X','Draw',ev.odds.draw],['2',ev.away,ev.odds.away]],
    btts: [['Yes','Both Teams to Score',1.72],['No','Clean Sheet',2.10]],
    'over-under': [['O 2.5','Over 2.5 Goals',1.80],['U 2.5','Under 2.5 Goals',2.00]],
    handicap: [['−1',ev.home+' −1',1.95],['AH',ev.away+' +1',1.90]],
    'first-scorer': [['1st','Anytime Scorer — '+ev.home,2.50],['1st',ev.away+' Anytime',3.10]],
  };

  const handleOddsClick = (outcome, odds) => {
    setSelectedOdds(outcome);
    if (onAddBet) onAddBet({ event:`${ev.home} v ${ev.away}`, market:marketLabel[activeMarket], outcome, odds });
    setTimeout(() => navigate('bet-slip'), 600);
  };

  return (
    <React.Fragment>
      <BackHeader title={`${ev.home} v ${ev.away}`} onBack={goBack} />
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)' }}>
        {/* Match header */}
        <div style={{ background:'var(--color-surface)', borderBottom:'1px solid var(--color-border)', padding:'20px 16px', textAlign:'center' }}>
          <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', marginBottom:12 }}>{ev.competition}</div>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:16, marginBottom:ev.isLive?12:0 }}>
            <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
              <TeamBadge initials={ev.homeBadge} color={ev.homeColor} size={48} />
              <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)', textAlign:'center' }}>{ev.home}</span>
            </div>
            <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
              {ev.isLive ? (
                <React.Fragment>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:32, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>{ev.homeScore} – {ev.awayScore}</span>
                  <span style={{ display:'flex', alignItems:'center', gap:4, background:'rgba(239,91,91,0.15)', borderRadius:5, padding:'2px 8px', fontFamily:'var(--font-body)', fontSize:11, fontWeight:700, color:'var(--color-danger)' }}>
                    <span style={{ width:5, height:5, borderRadius:'50%', background:'var(--color-danger)', animation:'pulse-live 1.5s infinite' }} />
                    {ev.time}
                  </span>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-muted)' }}>vs</span>
                  <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-secondary)' }}>{ev.time}</span>
                </React.Fragment>
              )}
            </div>
            <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
              <TeamBadge initials={ev.awayBadge} color={ev.awayColor} size={48} />
              <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)', textAlign:'center' }}>{ev.away}</span>
            </div>
          </div>
        </div>

        {/* Market tabs */}
        <div style={{ display:'flex', overflowX:'auto', background:'var(--color-nav-bg)', borderBottom:'1px solid var(--color-border-subtle)', padding:'0 12px', WebkitOverflowScrolling:'touch' }}>
          {markets.map(m => (
            <button key={m} onClick={() => setActiveMarket(m)} style={{ flexShrink:0, background:'none', border:'none', cursor:'pointer', padding:'10px 12px 9px', fontFamily:'var(--font-body)', fontSize:12, fontWeight:500, color:activeMarket===m?'var(--color-primary)':'var(--color-text-muted)', borderBottom:activeMarket===m?'2px solid var(--color-primary)':'2px solid transparent', whiteSpace:'nowrap', transition:'all 0.15s' }}>{marketLabel[m]}</button>
          ))}
        </div>

        {/* Odds grid */}
        <div style={{ padding:'16px', display:'flex', flexDirection:'column', gap:8 }}>
          {(oddsForMarket[activeMarket]||[]).map(([label,outcome,odds],i) => (
            <button key={i} onClick={() => handleOddsClick(outcome, odds)} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 16px', borderRadius:12, background:selectedOdds===outcome?'var(--color-primary)':'var(--color-surface)', border:`1px solid ${selectedOdds===outcome?'var(--color-primary)':'var(--color-border)'}`, cursor:'pointer', transition:'all 0.15s' }}>
              <span style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:500, color:selectedOdds===outcome?'rgba(255,255,255,0.7)':'var(--color-text-muted)', width:30, textAlign:'left' }}>{label}</span>
              <span style={{ flex:1, fontFamily:'var(--font-body)', fontSize:14, fontWeight:500, color:selectedOdds===outcome?'#fff':'var(--color-text-primary)', textAlign:'left', marginLeft:8 }}>{outcome}</span>
              <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, color:selectedOdds===outcome?'#fff':'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>{odds}</span>
            </button>
          ))}
        </div>

        {/* Live stats (collapsible) */}
        {ev.isLive && (
          <div style={{ margin:'0 16px 16px', borderRadius:14, background:'var(--color-surface)', border:'1px solid var(--color-border)', overflow:'hidden' }}>
            <button onClick={() => setStatsOpen(o=>!o)} style={{ width:'100%', background:'none', border:'none', cursor:'pointer', padding:'12px 16px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <span style={{ fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'var(--color-text-primary)' }}>Live stats</span>
              <i className={`ph ${statsOpen?'ph-caret-up':'ph-caret-down'}`} style={{ fontSize:14, color:'var(--color-text-muted)' }} />
            </button>
            {statsOpen && (
              <div style={{ padding:'0 16px 14px', display:'flex', flexDirection:'column', gap:10 }}>
                {[['Possession','58%','42%'],['Shots on target','5','3'],['Corners','4','2'],['Yellow cards','1','0']].map(([stat,h,a]) => (
                  <div key={stat}>
                    <div style={{ display:'flex', justifyContent:'space-between', marginBottom:4 }}>
                      <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:12, color:'var(--color-text-primary)' }}>{h}</span>
                      <span style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)' }}>{stat}</span>
                      <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:12, color:'var(--color-text-primary)' }}>{a}</span>
                    </div>
                    <div style={{ height:4, borderRadius:2, background:'var(--color-border)', overflow:'hidden' }}>
                      <div style={{ height:'100%', width:h.replace('%','')+'%', borderRadius:2, background:'var(--color-primary)' }} />
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
        <div style={{ height:20 }} />
      </div>
    </React.Fragment>
  );
}

/* ── Screen 7: Bet Slip ── */
function BetSlipSheet({ navigate, goBack, bets, setBets }) {
  const slipBets = (bets && bets.length > 0) ? bets : [{ event:'Man City v Arsenal', market:'Match Result', outcome:'Man City', odds:1.42 }];
  const [stake, setStake] = React.useState('25');
  const [betType, setBetType] = React.useState('single');
  const stakeNum = parseFloat(stake) || 0;
  const totalOdds = slipBets.reduce((acc, b) => acc * b.odds, 1);
  const potential = betType === 'single' ? (stakeNum * slipBets[0]?.odds || 0) : (stakeNum * totalOdds);
  const nearLimit = stakeNum > 200;
  const quickAmounts = [5,10,25,50];
  return (
    <React.Fragment>
      <div style={{ background:'var(--color-nav-bg)', borderBottom:'1px solid var(--color-border-subtle)', padding:'8px 16px', display:'flex', alignItems:'center', justifyContent:'space-between', flexShrink:0 }}>
        <button onClick={goBack} style={{ width:36, height:36, borderRadius:9, background:'var(--color-surface)', border:'1px solid var(--color-border)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
          <i className="ph ph-x" style={{ fontSize:16, color:'var(--color-text-primary)' }} />
        </button>
        <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:16, color:'var(--color-text-primary)' }}>Bet Slip</span>
        <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-muted)' }}>{slipBets.length} selection{slipBets.length!==1?'s':''}</span>
      </div>
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)', padding:'12px 16px' }}>
        {/* Bet type toggle */}
        <div style={{ display:'flex', background:'var(--color-surface)', borderRadius:12, padding:4, marginBottom:16, border:'1px solid var(--color-border)' }}>
          {['single','accumulator'].map(t => (
            <button key={t} onClick={() => setBetType(t)} style={{ flex:1, height:36, borderRadius:9, background:betType===t?'var(--color-primary)':'transparent', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:13, fontWeight:600, color:betType===t?'#fff':'var(--color-text-muted)', textTransform:'capitalize', transition:'all 0.15s' }}>{t}</button>
          ))}
        </div>
        {/* Selections */}
        {slipBets.map((b,i) => (
          <div key={i} style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'12px 14px', marginBottom:8 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:6 }}>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', marginBottom:3 }}>{b.event} · {b.market}</div>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)' }}>{b.outcome}</div>
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, color:'var(--color-primary)', fontVariantNumeric:'tabular-nums' }}>{b.odds}</span>
                <button onClick={() => setBets && setBets(p => p.filter((_,j) => j!==i))} style={{ width:24, height:24, borderRadius:6, background:'rgba(239,91,91,0.14)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <i className="ph ph-x" style={{ fontSize:12, color:'var(--color-danger)' }} />
                </button>
              </div>
            </div>
          </div>
        ))}
        {/* Stake input */}
        <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'14px', marginBottom:12 }}>
          <label style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--color-text-muted)', display:'block', marginBottom:8, textTransform:'uppercase', letterSpacing:0.5 }}>Stake</label>
          <div style={{ height:52, borderRadius:10, background:'var(--color-bg)', border:'1.5px solid var(--color-primary)', display:'flex', alignItems:'center', padding:'0 14px', gap:8, marginBottom:10 }}>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:18, color:'var(--color-text-muted)' }}>€</span>
            <input value={stake} onChange={e => setStake(e.target.value.replace(/[^0-9.]/g,''))} style={{ flex:1, background:'none', border:'none', outline:'none', fontFamily:'var(--font-display)', fontWeight:700, fontSize:22, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }} />
          </div>
          <div style={{ display:'flex', gap:6 }}>
            {quickAmounts.map(a => (
              <button key={a} onClick={() => setStake(String(a))} style={{ flex:1, height:34, borderRadius:8, background:parseFloat(stake)===a?'var(--color-primary)':'var(--color-surface-raised)', border:`1px solid ${parseFloat(stake)===a?'var(--color-primary)':'var(--color-border)'}`, cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:600, fontSize:13, color:parseFloat(stake)===a?'#fff':'var(--color-text-secondary)' }}>€{a}</button>
            ))}
          </div>
        </div>
        {/* Potential return */}
        <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'14px', marginBottom:12, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-secondary)' }}>Potential return</span>
          <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:24, color:'var(--color-success)', fontVariantNumeric:'tabular-nums' }}>€{potential.toFixed(2)}</span>
        </div>
        {/* RG nudge */}
        {nearLimit && (
          <div style={{ background:'var(--color-rg-bg)', borderLeft:'3px solid var(--color-warning)', borderRadius:12, border:'1px solid rgba(245,160,58,0.25)', padding:'10px 12px', marginBottom:12, display:'flex', gap:8, alignItems:'flex-start' }}>
            <i className="ph ph-warning" style={{ fontSize:16, color:'var(--color-warning)', marginTop:1 }} />
            <div>
              <div style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'var(--color-text-primary)', marginBottom:2 }}>You're near your daily stake limit</div>
              <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-secondary)' }}>Consider placing a smaller stake to stay within your limits.</div>
            </div>
          </div>
        )}
        <div style={{ height:20 }} />
      </div>
      <div style={{ padding:'12px 16px 24px', background:'var(--color-nav-bg)', borderTop:'1px solid var(--color-border)' }}>
        <button onClick={() => navigate('bet-confirm')} style={{ width:'100%', height:52, borderRadius:12, background:stakeNum>0?'var(--color-primary)':'var(--color-border)', border:'none', cursor:stakeNum>0?'pointer':'default', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:stakeNum>0?'#fff':'var(--color-text-muted)', display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
          Place bet — €{stakeNum.toFixed(2)}
          <i className="ph ph-arrow-right" style={{ fontSize:16 }} />
        </button>
      </div>
    </React.Fragment>
  );
}

/* ── Screen 8: My Bets ── */
function MyBetsScreen({ navigate }) {
  const [tab, setTab] = React.useState('open');
  const statusColor = { winning:'var(--color-success)', losing:'var(--color-danger)', open:'var(--color-text-muted)', won:'var(--color-success)', lost:'var(--color-danger)' };
  const statusTint  = { winning:'rgba(39,196,132,0.14)', losing:'rgba(239,91,91,0.14)', open:'rgba(160,168,192,0.12)', won:'rgba(39,196,132,0.14)', lost:'rgba(239,91,91,0.14)' };
  const statusEdge  = { winning:'rgba(39,196,132,0.4)', losing:'rgba(239,91,91,0.4)', open:'rgba(160,168,192,0.3)', won:'rgba(39,196,132,0.4)', lost:'rgba(239,91,91,0.4)' };
  const statusLabel = { winning:'Winning', losing:'Losing', open:'Open', won:'Won', lost:'Lost' };
  const bets = tab === 'open' ? OPEN_BETS : SETTLED_BETS;
  return (
    <React.Fragment>
      <div style={{ background:'var(--color-nav-bg)', borderBottom:'1px solid var(--color-border-subtle)', padding:'0 16px', flexShrink:0 }}>
        <div style={{ display:'flex', gap:0 }}>
          {['open','settled','cashed-out'].map(t => (
            <button key={t} onClick={() => setTab(t)} style={{ flex:1, background:'none', border:'none', cursor:'pointer', padding:'12px 0 10px', fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:tab===t?'var(--color-primary)':'var(--color-text-muted)', borderBottom:tab===t?'2px solid var(--color-primary)':'2px solid transparent', textTransform:'capitalize', transition:'all 0.15s' }}>{t.replace('-',' ')}</button>
          ))}
        </div>
      </div>
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)' }}>
        {bets.length > 0 ? (
          <div style={{ padding:'12px 16px', display:'flex', flexDirection:'column', gap:10 }}>
            {bets.map(bet => (
              <div key={bet.id} style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'14px' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:8 }}>
                  <div style={{ flex:1 }}>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', marginBottom:3 }}>{bet.id}</div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)', marginBottom:2 }}>{bet.event}</div>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-secondary)' }}>{bet.market} · <span style={{ fontWeight:500, color:'var(--color-text-primary)' }}>{bet.outcome}</span></div>
                  </div>
                  <span style={{ background:statusTint[bet.status], border:`1px solid ${statusEdge[bet.status]}`, borderRadius:6, padding:'3px 8px', fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:statusColor[bet.status] }}>{statusLabel[bet.status]}</span>
                </div>
                <div style={{ display:'flex', justifyContent:'space-between', paddingTop:10, borderTop:'1px solid var(--color-border-subtle)' }}>
                  <div style={{ textAlign:'center' }}>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', marginBottom:2 }}>Odds</div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:15, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>{bet.odds}</div>
                  </div>
                  <div style={{ textAlign:'center' }}>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', marginBottom:2 }}>Stake</div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:15, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>€{bet.stake?.toFixed(2)}</div>
                  </div>
                  <div style={{ textAlign:'center' }}>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', marginBottom:2 }}>{tab==='open'?'Expected':'Payout'}</div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:15, color:tab==='settled'?(bet.status==='won'?'var(--color-success)':'var(--color-danger)'):'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>€{(tab==='open'?bet.potential:bet.payout)?.toFixed(2)}</div>
                  </div>
                  {bet.cashout && (
                    <button style={{ height:36, padding:'0 10px', borderRadius:8, background:'var(--color-success)', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'#fff' }}>Cash out €{bet.cashout?.toFixed(2)}</button>
                  )}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <EmptyState icon="ph-receipt" title="No bets yet" body="Place a bet on any sports event to see it here." cta="Browse sports" onCta={() => navigate('sports')} />
        )}
        <div style={{ height:20 }} />
      </div>
    </React.Fragment>
  );
}

/* ── Screen 9: Bet Confirmation ── */
function BetConfirmScreen({ navigate }) {
  const ref = 'VB-' + Date.now().toString().slice(-8);
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'var(--color-bg)' }}>
      <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'32px 24px', textAlign:'center' }}>
        <div style={{ width:80, height:80, borderRadius:'50%', background:'rgba(39,196,132,0.15)', border:'2px solid var(--color-success)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:20 }}>
          <i className="ph ph-check" style={{ fontSize:40, color:'var(--color-success)' }} />
        </div>
        <h2 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:24, color:'var(--color-text-primary)', marginBottom:8 }}>Bet placed!</h2>
        <p style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--color-text-secondary)', marginBottom:28 }}>Good luck — we're rooting for you.</p>
        <div style={{ width:'100%', background:'var(--color-surface)', borderRadius:16, border:'1px solid var(--color-border)', padding:'16px', marginBottom:20, textAlign:'left' }}>
          {[['Event','Man City v Arsenal'],['Market','Match Result'],['Selection','Man City'],['Odds','1.42'],['Stake','€25.00'],['Potential return','€35.50'],['Reference',ref]].map(([k,v]) => (
            <div key={k} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'8px 0', borderBottom:'1px solid var(--color-border-subtle)' }}>
              <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-muted)' }}>{k}</span>
              <span style={{ fontFamily:k==='Odds'||k==='Stake'||k==='Potential return'?'var(--font-display)':'var(--font-body)', fontWeight:k==='Potential return'?700:500, fontSize:13, color:k==='Potential return'?'var(--color-success)':'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding:'12px 24px 32px', display:'flex', flexDirection:'column', gap:10 }}>
        <button onClick={() => navigate('sports')} style={{ width:'100%', height:50, borderRadius:12, background:'var(--color-primary)', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:14, fontWeight:600, color:'#fff' }}>Back to sports</button>
        <button onClick={() => navigate('bets')} style={{ width:'100%', height:50, borderRadius:12, background:'var(--color-surface)', border:'1px solid var(--color-border)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:14, fontWeight:500, color:'var(--color-text-primary)' }}>View my bets</button>
      </div>
    </div>
  );
}

Object.assign(window, { SportsHomeScreen, EventDetailScreen, BetSlipSheet, MyBetsScreen, BetConfirmScreen });