(() => {
const { Icon, Card } = window.SwivelDesignSystem_a628db;
const GROUPS = [
  { eyebrow:'What you get', icon:'layout-dashboard', items:[
    ['Player account management','Player data, activity monitoring and segmentation in one record that follows the player across every vertical.'],
    ['Back office and reporting','Real-time reporting across coin flow, retention and revenue. Export or pull it by API.'],
    ['Traffic analysis and coin management','Attribution on the way in, Gold Coin and Sweeps Coin balances on the way through.'],
  ]},
  { eyebrow:'What we run', icon:'shield-check', items:[
    ['24/7 player support','Our team answers your players, in your brand voice, around the clock.'],
    ['Risk and fraud mitigation','Bonus abuse, collusion and payment fraud caught by rules we already tuned in production.'],
    ['KYC and payments operations','Verification, redemption review and payout handling run as a managed service.'],
  ]},
  { eyebrow:'What plugs in', icon:'plug', items:[
    ['Game content','In-house provably-fair titles plus aggregated content from GameArt, Betsoft, Relax Gaming and Pragmatic Play.'],
    ['Payment methods','Card, bank and alternative rails for purchase and redemption, market by market.'],
    ['Bonus engine','Event-triggered bonuses, cashback and rakeback, free spins, leaderboards and tournaments.'],
  ]},
];
function PlatformSystem() {
  return <section id="platform" style={{background:'var(--surface-subtle)',padding:'var(--section-y-lg) 0'}}>
    <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--gutter-page-lg)'}}>
      <p style={{fontFamily:'var(--font-display)',fontSize:'var(--size-2xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-eyebrow)',color:'var(--text-muted)',margin:0}}>The platform</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(--text-heading)',margin:'16px 0 0',maxWidth:'24ch'}}>You own the brand. We run the rest.</h2>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:'var(--space-7)',marginTop:'var(--space-11)'}}>
        {GROUPS.map(g=>(
          <Card key={g.eyebrow} tone="default" padding="lg" radius="card">
            <div style={{display:'flex',alignItems:'center',gap:'var(--space-4)'}}>
              <span style={{width:36,height:36,borderRadius:8,background:'var(--swivel-signal-black)',color:'var(--swivel-white)',display:'grid',placeItems:'center',flex:'none'}}><Icon name={g.icon} size={18}/></span>
              <span style={{fontFamily:'var(--font-display)',fontSize:'var(--size-2xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-eyebrow)',color:'var(--text-heading)'}}>{g.eyebrow}</span>
            </div>
            <div style={{display:'grid',gap:'var(--space-7)',marginTop:'var(--space-9)'}}>
              {g.items.map(([t,d])=>(
                <div key={t}>
                  <h3 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'var(--size-lg)',letterSpacing:'var(--tracking-heading)',textTransform:'uppercase',color:'var(--text-heading)',margin:0,lineHeight:'var(--leading-snug)'}}>{t}</h3>
                  <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-md)',lineHeight:'var(--leading-normal)',color:'var(--text-muted)',margin:'8px 0 0',textWrap:'pretty'}}>{d}</p>
                </div>
              ))}
            </div>
          </Card>
        ))}
      </div>
    </div>
  </section>;
}
Object.assign(window, { PlatformSystem });
})();