(() => {
const { Button, Icon, Badge } = window.SwivelDesignSystem_a628db;
const GAMES = [
  ['Crash','Multiplier','crash','The multiplier climbs until it breaks. Cash out first or lose the round.'],
  ['Chart Betting','Multiplier','chart','Players call the direction of a live chart and hold the position.'],
  ['Dice','Instant','dice','Set the threshold, set the odds. One roll, immediate settlement.'],
  ['Limbo','Instant','limbo','Pick a target multiplier and find out how far the round goes.'],
  ['HiLo+','Cards','hilo','Higher or lower, compounding through the deck until the player banks.'],
  ['Roulette','Table','roulette','European wheel with configurable table limits and side bets.'],
  ['Wheel of Fortune','Wheel','wheel','Operator-configurable segments, weights and prize tiers.'],
  ['When Moon Bro','Multiplier','moonbro','A race-format multiplier round built for stream and clip sharing.'],
];
function Games() {
  return <section id="games" style={{background:'var(--swivel-signal-black)',padding:'var(--section-y-lg) 0',borderTop:'1px solid var(--grey-900)'}}>
    <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--gutter-page-lg)'}}>
      <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:'var(--space-9)',flexWrap:'wrap'}}>
        <div>
          <p style={{fontFamily:'var(--font-display)',fontSize:'var(--size-2xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-eyebrow)',color:'var(--swivel-portal-yellow)',margin:0}}>In-house content</p>
          <h2 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'clamp(32px,4vw,var(--size-6xl))',lineHeight:'var(--leading-tight)',letterSpacing:'var(--tracking-display)',textTransform:'uppercase',color:'var(--swivel-white)',margin:'16px 0 0'}}>The games are ours.</h2>
        </div>
        <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-md)',lineHeight:'var(--leading-normal)',color:'var(--grey-400)',maxWidth:'40ch',margin:0}}>Built in-house, provably fair, and tuned by us — so RTP, limits and volatility are yours to configure rather than negotiate with a third party.</p>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:'var(--space-6)',marginTop:'var(--space-11)'}}>
        {GAMES.map(([name,cat,slug,line])=>(
          <div key={slug} style={{background:'#141414',border:'1px solid var(--border-subtle)',borderRadius:16,overflow:'hidden',display:'flex',flexDirection:'column'}}>
            <div style={{position:'relative',height:150,background:'var(--swivel-signal-black)'}}>
              <image-slot id={'game-'+slug} shape="rect" fit="cover" src={'site/assets/games/'+slug+'.svg'} placeholder={name+' key art'}></image-slot>
            </div>
            <div style={{padding:'var(--space-6)',display:'flex',flexDirection:'column',gap:'var(--space-4)',flex:1}}>
              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:'var(--space-4)'}}>
                <h3 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'var(--size-lg)',letterSpacing:'var(--tracking-heading)',textTransform:'uppercase',color:'var(--swivel-white)',margin:0}}>{name}</h3>
                <Badge tone="outline" size="sm" style={{color:'var(--grey-300)',borderColor:'var(--grey-700)'}}>{cat}</Badge>
              </div>
              <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-sm)',lineHeight:'var(--leading-normal)',color:'var(--grey-400)',margin:0,textWrap:'pretty'}}>{line}</p>
            </div>
          </div>
        ))}
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:'var(--space-9)',alignItems:'center',marginTop:'var(--space-12)',borderTop:'1px solid var(--grey-800)',paddingTop:'var(--space-11)'}}>
        <div>
          <h3 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'var(--size-3xl)',letterSpacing:'var(--tracking-heading)',textTransform:'uppercase',color:'var(--swivel-white)',margin:0}}>Fair by construction</h3>
          <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-lg)',lineHeight:'var(--leading-normal)',color:'var(--grey-300)',margin:'16px 0 0',maxWidth:'62ch',textWrap:'pretty'}}>Every outcome is produced by a verifiable algorithm your players can check themselves. No unpublished house logic, no adjustable odds behind the lobby.</p>
        </div>
        <Button variant="outline" size="lg" iconRight={<Icon name="download" size={16}/>} style={{color:'var(--swivel-white)',borderColor:'var(--grey-600)'}}>Request the RTP pack</Button>
      </div>
    </div>
  </section>;
}
Object.assign(window, { Games });
})();