// screens-home.jsx — Home screen: premium category-driven casino feed

const HOME_HERO_SLIDES = [
  { id:1, eyebrow:'Featured Game',  title:'Sands of Anubis',  subtitle:'Unearth the tomb of gold. Big-money bonus reels.', cta:'Play now',    target:'game', gameIdx:0, accent:'#F7C948', art:{ id:101, theme:'egyptian', palette:['#1B0E00','#5A3300','#C98A12'], glow:'#F7C948', accent:'#00C2B0' } },
  { id:2, eyebrow:'Welcome Bonus',  title:'100% up to €500',  subtitle:'On your first deposit — clear, honest terms.',    cta:'Deposit now', target:'deposit', accent:'#5B8AF5', art:{ id:102, theme:'fortune',  palette:['#060E28','#0C2468','#1844B0'], glow:'#5B8AF5', accent:'#7CE0FF' } },
  { id:3, eyebrow:'Weekly Drop',    title:'Free Spins Friday', subtitle:'Deposit €20+ and get 100 spins every Friday.',   cta:'Join now',    target:'bonuses', accent:'#27C484', art:{ id:103, theme:'candy',    palette:['#001208','#0A3A2A','#0E6A44'], glow:'#3BE08A', accent:'#F5D14A' } },
];

const HOME_CATS = [
  { id:'featured',   label:'Featured',    icon:'ph-star' },
  { id:'slots',      label:'Slots',       icon:'ph-dice-five' },
  { id:'live',       label:'Live Casino', icon:'ph-broadcast' },
  { id:'gameshows',  label:'Game Shows',  icon:'ph-television-simple' },
  { id:'arcade',     label:'Arcade',      icon:'ph-game-controller' },
  { id:'table',      label:'Table Games', icon:'ph-club' },
  { id:'jackpots',   label:'Jackpots',    icon:'ph-crown-simple' },
  { id:'promotions', label:'Promotions',  icon:'ph-gift' },
];

// content selectors
const byLive   = () => APP_GAMES.filter(g => g.badge === 'LIVE');
const bySlots  = () => APP_GAMES.filter(g => g.badge !== 'LIVE' && !['cards','wheel'].includes(g.theme));
const byShows  = () => APP_GAMES.filter(g => g.theme === 'wheel');
const byArcade = () => APP_GAMES.filter(g => ['cyber','candy'].includes(g.theme));
const byTable  = () => APP_GAMES.filter(g => ['cards','wheel'].includes(g.theme));
const byJackpot= () => [APP_GAMES[10], APP_GAMES[14], APP_GAMES[8], APP_GAMES[12], APP_GAMES[3], APP_GAMES[15]];

function HomeCategoryTabs({ active, onChange }) {
  return (
    <div style={{ background:'var(--color-nav-bg)', borderBottom:'1px solid var(--color-border-subtle)', flexShrink:0 }}>
      <div style={{ display:'flex', gap:7, overflowX:'auto', padding:'10px 14px', WebkitOverflowScrolling:'touch' }}>
        {HOME_CATS.map(cat => {
          const on = active === cat.id;
          return (
            <button key={cat.id} onClick={() => onChange(cat.id)} style={{
              flexShrink:0, display:'flex', alignItems:'center', gap:6, height:36, padding:'0 13px', borderRadius:10, cursor:'pointer',
              background:on?'var(--color-primary)':'var(--color-surface)',
              border:`1px solid ${on?'var(--color-primary)':'var(--color-border)'}`,
              boxShadow:on?'0 4px 14px -4px var(--color-primary)':'none', transition:'background 0.15s ease, box-shadow 0.15s ease',
            }}>
              <i className={`ph ${cat.icon}`} style={{ fontSize:15, color:on?'#fff':'var(--color-text-muted)' }} />
              <span style={{ fontFamily:'var(--font-body)', fontSize:12.5, fontWeight:on?600:500, color:on?'#fff':'var(--color-text-secondary)', whiteSpace:'nowrap' }}>{cat.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function HomeHero({ navigate, onGameClick }) {
  const [slide, setSlide] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setSlide(p => (p+1) % HOME_HERO_SLIDES.length), 5000);
    return () => clearInterval(t);
  }, []);
  const s = HOME_HERO_SLIDES[slide];
  const heroCta = () => s.target === 'game' ? onGameClick(APP_GAMES[s.gameIdx]) : navigate(s.target);
  return (
    <div style={{ padding:'14px 16px 0' }}>
      <div style={{ borderRadius:20, overflow:'hidden', position:'relative', height:176, border:'1px solid rgba(255,255,255,0.07)' }}>
        {HOME_HERO_SLIDES.map((sl,i) => (
          <div key={sl.id} style={{ position:'absolute', inset:0, opacity:i===slide?1:0, transition:'opacity 0.5s ease', pointerEvents:'none' }}>
            <GameArt game={sl.art} />
            <div style={{ position:'absolute', inset:0, background:'linear-gradient(90deg,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.5) 45%,transparent 78%)' }} />
            <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,transparent 35%,rgba(0,0,0,0.5) 100%)' }} />
          </div>
        ))}
        <div style={{ position:'relative', zIndex:2, height:'100%', display:'flex', flexDirection:'column', justifyContent:'flex-end', padding:'14px 16px', pointerEvents:'none' }}>
          <span style={{ fontFamily:'var(--font-body)', fontSize:10, fontWeight:700, color:s.accent, textTransform:'uppercase', letterSpacing:1.4, marginBottom:4 }}>{s.eyebrow}</span>
          <h2 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:24, color:'#fff', lineHeight:1.12, textShadow:'0 2px 10px rgba(0,0,0,0.5)', margin:'0 0 5px' }}>{s.title}</h2>
          <p style={{ fontFamily:'var(--font-body)', fontSize:12.5, color:'rgba(255,255,255,0.78)', margin:'0 0 13px', maxWidth:230 }}>{s.subtitle}</p>
          <div style={{ display:'flex', gap:8, pointerEvents:'auto' }}>
            <button onClick={heroCta} style={{ height:38, padding:'0 18px', borderRadius:11, background:s.accent, border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:13, fontWeight:700, color:s.id===1?'#1A0E00':'#08111F' }}>{s.cta}</button>
            <button onClick={heroCta} style={{ height:38, padding:'0 15px', borderRadius:11, background:'rgba(255,255,255,0.14)', border:'1px solid rgba(255,255,255,0.22)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'#fff', backdropFilter:'blur(6px)' }}>Details</button>
          </div>
        </div>
        <div style={{ position:'absolute', bottom:14, right:14, display:'flex', gap:5, zIndex:3 }}>
          {HOME_HERO_SLIDES.map((_,i) => <button key={i} onClick={() => setSlide(i)} style={{ width:i===slide?20:7, height:7, borderRadius:4, cursor:'pointer', border:'none', padding:0, background:i===slide?'#fff':'rgba(255,255,255,0.4)', transition:'all 0.2s ease' }} />)}
        </div>
      </div>
    </div>
  );
}

/* ── Category intro strip ── */
function CatIntro({ icon, tint, title, sub }) {
  return (
    <div style={{ margin:'14px 16px 4px', borderRadius:16, background:`linear-gradient(120deg, ${tint}22, transparent)`, border:`1px solid ${tint}33`, padding:'14px 16px', display:'flex', alignItems:'center', gap:13 }}>
      <div style={{ width:44, height:44, borderRadius:12, flexShrink:0, background:`${tint}22`, border:`1px solid ${tint}44`, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <i className={`ph ${icon}`} style={{ fontSize:22, color:tint }} />
      </div>
      <div>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:17, color:'var(--color-text-primary)', letterSpacing:-0.2 }}>{title}</div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-secondary)', marginTop:2 }}>{sub}</div>
      </div>
    </div>
  );
}

/* ── FEATURED feed (flagship) ── */
function FeaturedFeed({ navigate, handleGame }) {
  const [jackpot, setJackpot] = React.useState(8241500.87);
  React.useEffect(() => {
    const t = setInterval(() => setJackpot(p => p + Math.random()*0.3), 200);
    return () => clearInterval(t);
  }, []);
  const liveGames = byLive();
  return (
    <React.Fragment>
      <HomeHero navigate={navigate} onGameClick={handleGame} />

      <div style={{ marginTop:20 }}>
        <SectionHeader title="Continue Playing" count={12} onSeeAll={() => navigate('casino')} />
        <GameRow games={APP_GAMES.slice(0,6)} onGameClick={handleGame} />
      </div>
      <Divider mx={16} /><div style={{ height:16 }} />

      <div>
        <div style={{ padding:'0 16px', marginBottom:6 }}>
          <span style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)' }}>Because you played adventure slots</span>
        </div>
        <SectionHeader title="Recommended for you" count={24} onSeeAll={() => navigate('casino')} />
        <GameRow games={[APP_GAMES[17],APP_GAMES[18],APP_GAMES[19],APP_GAMES[4],APP_GAMES[9]]} onGameClick={handleGame} />
      </div>
      <div style={{ height:16 }} /><Divider mx={16} /><div style={{ height:16 }} />

      <div>
        <SectionHeader title="Top 10 This Week" count={10} onSeeAll={() => navigate('casino')} />
        <GameRow games={APP_GAMES.slice(0,10)} showRank onGameClick={handleGame} />
      </div>
      <div style={{ height:16 }} /><Divider mx={16} /><div style={{ height:16 }} />

      {/* Free spins claim */}
      <div style={{ padding:'0 16px', marginBottom:16 }}>
        <div style={{ borderRadius:16, background:'linear-gradient(135deg,#231400,#3E2400)', border:'1px solid rgba(245,160,58,0.3)', padding:'14px 16px', display:'flex', alignItems:'center', gap:13 }}>
          <div style={{ width:44, height:44, borderRadius:12, background:'linear-gradient(135deg,#D4680A,#FFB347)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
            <i className="ph ph-lightning" style={{ fontSize:22, color:'#fff' }} />
          </div>
          <div style={{ flex:1 }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:14, color:'#fff', marginBottom:2 }}>5 Free Spins ready to claim</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:11.5, color:'rgba(255,255,255,0.65)' }}>Valid on selected Aurum Studios slots</div>
          </div>
          <button onClick={() => navigate('bonuses')} style={{ height:34, padding:'0 15px', borderRadius:9, background:'#F5A03A', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:12, fontWeight:700, color:'#231400' }}>Claim</button>
        </div>
      </div>

      {/* Live casino strip */}
      <div>
        <SectionHeader title="Live Casino Now" count={33} badge="LIVE" onSeeAll={() => navigate('casino')} />
        <div style={{ display:'flex', gap:10, overflowX:'auto', padding:'0 16px 2px', WebkitOverflowScrolling:'touch' }}>
          {liveGames.map(game => (
            <div key={game.id} style={{ flexShrink:0, width:150, cursor:'pointer' }} onClick={() => handleGame(game)}>
              <div style={{ width:150, height:100, borderRadius:14, overflow:'hidden', position:'relative', border:'1px solid rgba(255,255,255,0.07)' }}>
                <GameArt game={game} />
                <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.78) 100%)' }} />
                <div style={{ position:'absolute', top:7, left:7, display:'flex', alignItems:'center', gap:4, background:'rgba(0,0,0,0.55)', backdropFilter:'blur(4px)', borderRadius:5, padding:'2px 7px' }}>
                  <span style={{ width:5, height:5, borderRadius:'50%', background:'var(--color-danger)', animation:'pulse-live 1.5s infinite' }} />
                  <span style={{ fontSize:9, fontWeight:700, color:'#fff' }}>LIVE</span>
                </div>
                {game.players && <div style={{ position:'absolute', top:7, right:7, background:'rgba(0,0,0,0.55)', backdropFilter:'blur(4px)', borderRadius:5, padding:'2px 6px', display:'flex', alignItems:'center', gap:3 }}>
                  <i className="ph ph-users" style={{ fontSize:9, color:'#fff' }} /><span style={{ fontSize:9, color:'#fff', fontWeight:600 }}>{game.players}</span>
                </div>}
                <div style={{ position:'absolute', bottom:7, left:9, right:9, fontFamily:'var(--font-display)', fontWeight:700, fontSize:12.5, color:'#fff', textShadow:'0 1px 6px rgba(0,0,0,0.9)' }}>{game.name}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ height:16 }} /><Divider mx={16} /><div style={{ height:16 }} />

      {/* Jackpot */}
      <div>
        <SectionHeader title="Progressive Jackpots" count={8} onSeeAll={() => navigate('casino')} />
        <div onClick={() => handleGame(APP_GAMES[10])} style={{ margin:'0 16px 14px', borderRadius:16, background:'linear-gradient(135deg,#001A0C,#004A24)', border:'1px solid rgba(39,196,132,0.35)', padding:'16px', textAlign:'center', cursor:'pointer' }}>
          <div style={{ fontFamily:'var(--font-body)', fontSize:10, fontWeight:700, color:'var(--color-success)', textTransform:'uppercase', letterSpacing:1.4, marginBottom:5 }}>Current Mega Jackpot</div>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:32, color:'#fff', fontVariantNumeric:'tabular-nums' }}>€{jackpot.toLocaleString('en-IE',{minimumFractionDigits:2,maximumFractionDigits:2})}</div>
          <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'rgba(255,255,255,0.5)', marginTop:3 }}>Across the Fortune Vault network · live</div>
        </div>
        <GameRow games={[APP_GAMES[10],APP_GAMES[0],APP_GAMES[5]]} onGameClick={handleGame} />
      </div>
      <div style={{ height:16 }} /><Divider mx={16} /><div style={{ height:16 }} />

      <HomeFooter navigate={navigate} />
    </React.Fragment>
  );
}

/* ── Generic category feed ── */
function CategoryFeed({ navigate, handleGame, intro, rowGames, rowTitle, gridGames, gridTitle }) {
  return (
    <React.Fragment>
      <CatIntro {...intro} />
      {rowGames && rowGames.length > 0 && (
        <div style={{ marginTop:14 }}>
          <SectionHeader title={rowTitle} count={rowGames.length} onSeeAll={() => navigate('casino')} />
          <GameRow games={rowGames} onGameClick={handleGame} />
          <div style={{ height:18 }} />
        </div>
      )}
      <div style={{ padding:'0 16px 4px' }}>
        <SectionHeader title={gridTitle} count={gridGames.length} onSeeAll={() => navigate('casino')} />
      </div>
      <GameGrid games={gridGames} onGameClick={handleGame} />
      <div style={{ height:20 }} />
      <HomeFooter navigate={navigate} />
    </React.Fragment>
  );
}

/* ── Live category (feature + grid) ── */
function LiveFeed({ navigate, handleGame }) {
  const live = byLive();
  return (
    <React.Fragment>
      <CatIntro icon="ph-broadcast" tint="#EF5B5B" title="Live Casino" sub="Real dealers, real tables — streaming now" />
      <div style={{ marginTop:14 }}>
        <SectionHeader title="Streaming now" count={live.length} badge="LIVE" onSeeAll={() => navigate('casino')} />
        <div style={{ display:'flex', gap:10, overflowX:'auto', padding:'0 16px 2px', WebkitOverflowScrolling:'touch' }}>
          {live.map(game => (
            <div key={game.id} style={{ flexShrink:0, width:170, cursor:'pointer' }} onClick={() => handleGame(game)}>
              <div style={{ width:170, height:110, borderRadius:14, overflow:'hidden', position:'relative', border:'1px solid rgba(255,255,255,0.07)' }}>
                <GameArt game={game} />
                <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.8) 100%)' }} />
                <div style={{ position:'absolute', top:8, left:8, display:'flex', alignItems:'center', gap:4, background:'rgba(0,0,0,0.55)', backdropFilter:'blur(4px)', borderRadius:5, padding:'2px 7px' }}>
                  <span style={{ width:5, height:5, borderRadius:'50%', background:'var(--color-danger)', animation:'pulse-live 1.5s infinite' }} />
                  <span style={{ fontSize:9, fontWeight:700, color:'#fff' }}>LIVE · {game.players}</span>
                </div>
                <div style={{ position:'absolute', bottom:8, left:10, right:10 }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'#fff' }}>{game.name}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'rgba(255,255,255,0.65)' }}>{game.provider} · €{game.minBet}–€{game.maxBet?.toLocaleString()}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ height:18 }} />
      </div>
      <div style={{ padding:'0 16px 4px' }}><SectionHeader title="All live tables" count={live.length} onSeeAll={() => navigate('casino')} /></div>
      <GameGrid games={live} onGameClick={handleGame} />
      <div style={{ height:20 }} />
      <HomeFooter navigate={navigate} />
    </React.Fragment>
  );
}

/* ── Promotions category ── */
function PromotionsFeed({ navigate }) {
  return (
    <React.Fragment>
      <CatIntro icon="ph-gift" tint="#5B8AF5" title="Promotions" sub="Boosts and rewards with clear, honest terms" />
      <div style={{ padding:'16px', display:'flex', flexDirection:'column', gap:12 }}>
        {PROMOS.map(p => (
          <div key={p.id} onClick={() => navigate('bonuses')} style={{ borderRadius:16, background:'var(--color-surface)', border:'1px solid var(--color-border)', overflow:'hidden', cursor:'pointer' }}>
            <div style={{ height:96, position:'relative', background:`linear-gradient(120deg, ${p.color}, ${p.color}66)`, display:'flex', alignItems:'center', padding:'0 18px', overflow:'hidden' }}>
              <div style={{ position:'absolute', right:-20, top:-30, width:150, height:150, borderRadius:'50%', background:'rgba(255,255,255,0.14)' }} />
              <i className={`ph ${p.icon}`} style={{ fontSize:40, color:'#fff', opacity:0.9, marginRight:14, zIndex:1 }} />
              <div style={{ zIndex:1 }}>
                <span style={{ fontFamily:'var(--font-body)', fontSize:9, fontWeight:800, color:'rgba(255,255,255,0.85)', letterSpacing:1.2, textTransform:'uppercase' }}>{p.tag}</span>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:19, color:'#fff', lineHeight:1.1 }}>{p.title}</div>
              </div>
            </div>
            <div style={{ padding:'12px 16px' }}>
              <div style={{ fontFamily:'var(--font-body)', fontSize:12.5, color:'var(--color-text-secondary)', marginBottom:8 }}>{p.sub}</div>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                <span style={{ fontFamily:'var(--font-body)', fontSize:10.5, color:'var(--color-text-muted)' }}>{p.terms}</span>
                <span style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'var(--color-primary)', display:'flex', alignItems:'center', gap:3 }}>Opt in <i className="ph ph-caret-right" style={{ fontSize:11 }} /></span>
              </div>
            </div>
          </div>
        ))}
      </div>
      <HomeFooter navigate={navigate} />
    </React.Fragment>
  );
}

/* ── Jackpots category ── */
function JackpotsFeed({ navigate, handleGame }) {
  const [jp, setJp] = React.useState(8241500.87);
  React.useEffect(() => { const t = setInterval(() => setJp(p => p + Math.random()*0.35), 180); return () => clearInterval(t); }, []);
  return (
    <React.Fragment>
      <div onClick={() => handleGame(APP_GAMES[10])} style={{ margin:'16px 16px 4px', borderRadius:18, background:'linear-gradient(135deg,#1A1200,#4A3400,#001A0C)', border:'1px solid rgba(245,208,80,0.35)', padding:'20px 16px', textAlign:'center', cursor:'pointer' }}>
        <div style={{ display:'inline-flex', alignItems:'center', gap:6, marginBottom:8 }}>
          <i className="ph ph-crown-simple" style={{ fontSize:18, color:'#F5D050' }} />
          <span style={{ fontFamily:'var(--font-body)', fontSize:10, fontWeight:800, color:'#F5D050', textTransform:'uppercase', letterSpacing:1.6 }}>Mega Jackpot · Live</span>
        </div>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:38, color:'#fff', fontVariantNumeric:'tabular-nums', textShadow:'0 2px 20px rgba(245,208,80,0.3)' }}>€{jp.toLocaleString('en-IE',{minimumFractionDigits:2,maximumFractionDigits:2})}</div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:11.5, color:'rgba(255,255,255,0.55)', marginTop:4 }}>Must-drop before midnight · Fortune Vault network</div>
      </div>
      <div style={{ padding:'14px 16px 4px' }}><SectionHeader title="Jackpot games" count={byJackpot().length} onSeeAll={() => navigate('casino')} /></div>
      <GameGrid games={byJackpot()} onGameClick={handleGame} />
      <div style={{ height:20 }} />
      <HomeFooter navigate={navigate} />
    </React.Fragment>
  );
}

/* ── Footer (shared) ── */
function HomeFooter({ navigate }) {
  return (
    <React.Fragment>
      <div style={{ padding:'0 16px' }}>
        <div style={{ borderRadius:16, background:'var(--color-rg-bg)', border:'1px solid rgba(245,160,58,0.28)', borderLeft:'3px solid var(--color-warning)', padding:'14px 16px', display:'flex', gap:12, alignItems:'flex-start' }}>
          <div style={{ width:38, height:38, borderRadius:10, flexShrink:0, background:'rgba(245,160,58,0.14)', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <i className="ph ph-shield-check" style={{ fontSize:19, color:'var(--color-warning)' }} />
          </div>
          <div style={{ flex:1 }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)', marginBottom:4 }}>Stay in control</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-secondary)', lineHeight:1.5, marginBottom:10 }}>Set deposit limits, session timers, and reality checks.</div>
            <button onClick={() => navigate('rg-hub')} style={{ height:32, padding:'0 14px', borderRadius:9, background:'rgba(245,160,58,0.18)', border:'1px solid rgba(245,160,58,0.4)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:11.5, fontWeight:600, color:'var(--color-warning)' }}>Manage limits</button>
          </div>
        </div>
      </div>
      <div style={{ margin:'20px 16px 0', borderTop:'1px solid var(--color-border)', paddingTop:16 }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'12px 16px', marginBottom:14 }}>
          {[{t:'Quick links',l:['All Games','Promotions']},{t:'Security',l:['Terms','Privacy Policy']},{t:'About us',l:['Who We Are','Contact Us']},{t:'Support',l:['Help Centre','Live Chat']}].map(col => (
            <div key={col.t}>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, color:'var(--color-text-secondary)', textTransform:'uppercase', letterSpacing:0.6, marginBottom:7 }}>{col.t}</div>
              {col.l.map(link => <div key={link} style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', marginBottom:5 }}>{link}</div>)}
            </div>
          ))}
        </div>
        <div style={{ display:'flex', gap:6, marginBottom:10, flexWrap:'wrap' }}>
          {['VISA','MC','NETELLER','SKRILL'].map(p => <div key={p} style={{ height:22, padding:'0 8px', borderRadius:5, background:'var(--color-surface)', border:'1px solid var(--color-border)', display:'flex', alignItems:'center', fontFamily:'var(--font-display)', fontWeight:700, fontSize:8, color:'var(--color-text-muted)' }}>{p}</div>)}
          <div style={{ height:22, padding:'0 8px', borderRadius:5, background:'var(--color-surface)', border:'1px solid var(--color-border)', display:'flex', alignItems:'center', gap:4, fontFamily:'var(--font-display)', fontWeight:700, fontSize:8, color:'var(--color-text-muted)' }}>18+ MGA</div>
        </div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', lineHeight:1.7, marginBottom:10 }}>VantageBet is operated by Vantage Gaming Ltd, licensed by the MGA. Please gamble responsibly. 18+.</div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', textAlign:'center', paddingBottom:8 }}>© 2026 VantageBet. All rights reserved.</div>
      </div>
      <div style={{ height:20 }} />
    </React.Fragment>
  );
}

function HomeContent({ navigate }) {
  const [activeCat, setActiveCat] = React.useState('featured');
  const handleGame = (game) => navigate('game-detail', { game });

  const renderFeed = () => {
    switch (activeCat) {
      case 'featured':   return <FeaturedFeed navigate={navigate} handleGame={handleGame} />;
      case 'live':       return <LiveFeed navigate={navigate} handleGame={handleGame} />;
      case 'promotions': return <PromotionsFeed navigate={navigate} />;
      case 'jackpots':   return <JackpotsFeed navigate={navigate} handleGame={handleGame} />;
      case 'slots':      return <CategoryFeed navigate={navigate} handleGame={handleGame}
        intro={{ icon:'ph-dice-five', tint:'#7A9EEC', title:'Slots', sub:'Hundreds of reels — from ancient gold to neon' }}
        rowTitle="New releases" rowGames={[APP_GAMES[5],APP_GAMES[1],APP_GAMES[19],APP_GAMES[11]]}
        gridTitle="All slots" gridGames={bySlots()} />;
      case 'gameshows':  return <CategoryFeed navigate={navigate} handleGame={handleGame}
        intro={{ icon:'ph-television-simple', tint:'#F5A03A', title:'Game Shows', sub:'Hosted, high-energy wheels and multipliers' }}
        rowTitle="Trending shows" rowGames={byShows()}
        gridTitle="All game shows" gridGames={byShows()} />;
      case 'arcade':     return <CategoryFeed navigate={navigate} handleGame={handleGame}
        intro={{ icon:'ph-game-controller', tint:'#22E0D6', title:'Arcade', sub:'Instant wins and fast, casual play' }}
        rowTitle="Quick play" rowGames={byArcade()}
        gridTitle="All arcade games" gridGames={byArcade()} />;
      case 'table':      return <CategoryFeed navigate={navigate} handleGame={handleGame}
        intro={{ icon:'ph-club', tint:'#27C484', title:'Table Games', sub:'Blackjack, roulette and card classics' }}
        rowTitle="Popular tables" rowGames={byTable()}
        gridTitle="All table games" gridGames={byTable()} />;
      default:           return <FeaturedFeed navigate={navigate} handleGame={handleGame} />;
    }
  };

  return (
    <React.Fragment>
      <HomeCategoryTabs active={activeCat} onChange={setActiveCat} />
      <div key={activeCat} style={{ flex:1, overflowY:'auto', overflowX:'hidden', background:'var(--color-bg)', animation:'slide-up 0.25s ease' }}>
        {renderFeed()}
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { HomeContent });