(() => {
const { Badge, Icon, Tag } = window.SwivelDesignSystem_a628db;
const CORE = ['Wallet & coin ledger','PAM','KYC & risk','Bonus engine','Back office & reporting'];
const VERTICALS = [
  { id:'sweeps', name:'Sweeps casino', status:'Live', tone:'positive',
    line:'A dual-currency social casino: Gold Coins for play, Sweeps Coins for redemption. Provably-fair games built in-house, plus aggregated content from third-party studios.',
    layer:['Dual-currency lobby','Redemption flow','Game aggregation','Provably-fair RNG'],
    ships:['Gold Coin and Sweeps Coin management','In-house provably-fair game suite','Third-party studio content aggregation','Redemption, KYC and payout handling'] },
  { id:'prediction', name:'Prediction markets', status:'In build', tone:'amber',
    line:'Event markets on the same wallet your casino players already fund. Operators run both from one back office, with one player record.',
    layer:['Market creation','Pricing & settlement','Exposure limits','Event data feeds'],
    ships:['Event and market creation tools','Real-time pricing and settlement','Position and exposure controls','Shared balance with your lobby'] },
  { id:'ripping', name:'Card ripping', status:'In build', tone:'amber',
    line:'Live pack-opening slots against real inventory. The coin ledger, player record and risk rules are the ones already running your casino.',
    layer:['Rip slots & streaming','Inventory records','Grading & fulfilment','Odds publication'],
    ships:['Scheduled live rip slots','Inventory and grading records','Shipping and fulfilment hooks','Published odds per pack'] },
  { id:'next', name:'Your vertical', status:'Scoping', tone:'neutral',
    line:'Bring the mechanic. Everything underneath it is already built, already integrated and already running in production.',
    layer:['Your mechanic','Your economy','Your compliance map','Your launch date'],
    ships:['Ledger, wallet and coin engine','Player account management','Bonus engine and leaderboards','Reporting and traffic analysis'] },
];
function Verticals() {
  const [sel, setSel] = React.useState('sweeps');
  const v = VERTICALS.find(x=>x.id===sel);
  return <section id="verticals" style={{background:'var(--surface-page)',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 verticals</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:'20ch'}}>Same core. Different mechanic.</h2>
      <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-lg)',lineHeight:'var(--leading-normal)',color:'var(--text-muted)',maxWidth:'58ch',margin:'20px 0 0'}}>Sweeps casino runs in production today. The next verticals sit on the identical wallet, player record and back office — so adding one is configuration, not a second integration.</p>
      <div style={{display:'flex',gap:'var(--space-3)',marginTop:'var(--space-10)',flexWrap:'wrap'}}>
        {VERTICALS.map(x=>(
          <button key={x.id} onClick={()=>setSel(x.id)} style={{display:'flex',alignItems:'center',gap:'var(--space-3)',height:'var(--control-h-lg)',padding:'0 var(--space-6)',borderRadius:'var(--radius-control, 8px)',cursor:'pointer',fontFamily:'var(--font-display)',fontSize:'var(--size-sm)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-label)',whiteSpace:'nowrap',transition:'var(--transition-control)',background:sel===x.id?'var(--swivel-signal-black)':'transparent',color:sel===x.id?'var(--swivel-white)':'var(--text-body)',border:'1px solid '+(sel===x.id?'var(--swivel-signal-black)':'var(--border-default)')}}>
            {x.name}
            <span style={{fontSize:'var(--size-3xs)',letterSpacing:'var(--tracking-label)',whiteSpace:'nowrap',padding:'2px 6px',borderRadius:999,background:x.status==='Live'?'var(--swivel-portal-yellow)':'transparent',color:x.status==='Live'?'var(--swivel-signal-black)':(sel===x.id?'var(--grey-400)':'var(--text-subtle)'),border:x.status==='Live'?'none':'1px solid '+(sel===x.id?'var(--grey-700)':'var(--border-subtle)')}}>{x.status}</span>
          </button>
        ))}
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(340px,1fr))',gap:'var(--space-11)',marginTop:'var(--space-10)',alignItems:'start',border:'1px solid var(--border-subtle)',borderRadius:16,padding:'var(--space-11)'}}>
        <div>
          <h3 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'var(--size-3xl)',lineHeight:'var(--leading-tight)',letterSpacing:'var(--tracking-heading)',textTransform:'uppercase',color:'var(--text-heading)',margin:0}}>{v.name}</h3>
          <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-lg)',lineHeight:'var(--leading-normal)',color:'var(--text-body)',margin:'16px 0 0',maxWidth:'46ch',textWrap:'pretty'}}>{v.line}</p>
          <div style={{display:'grid',gap:'var(--space-4)',marginTop:'var(--space-9)'}}>
            {v.ships.map(s=>(
              <div key={s} style={{display:'flex',gap:'var(--space-4)',alignItems:'flex-start'}}>
                <span style={{flex:'none',width:20,height:20,borderRadius:'50%',background:'var(--swivel-signal-black)',color:'var(--swivel-portal-yellow)',display:'grid',placeItems:'center',marginTop:2}}><Icon name="check" size={12}/></span>
                <span style={{fontFamily:'var(--font-body)',fontSize:'var(--size-md)',lineHeight:'var(--leading-normal)',color:'var(--text-body)'}}>{s}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{background:'var(--surface-subtle)',borderRadius:16,padding:'var(--space-9)'}}>
          <p style={{fontFamily:'var(--font-display)',fontSize:'var(--size-3xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-eyebrow)',color:'var(--text-muted)',margin:0}}>Vertical layer — changes</p>
          <div style={{display:'flex',flexWrap:'wrap',gap:'var(--space-3)',marginTop:'var(--space-5)'}}>
            {v.layer.map(l=><Tag key={l} size="md">{l}</Tag>)}
          </div>
          <div style={{height:1,background:'var(--border-default)',margin:'var(--space-9) 0'}}/>
          <p style={{fontFamily:'var(--font-display)',fontSize:'var(--size-3xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-eyebrow)',color:'var(--text-muted)',margin:0}}>Shared core — never changes</p>
          <div style={{display:'grid',gap:'var(--space-2)',marginTop:'var(--space-5)'}}>
            {CORE.map(c=>(
              <div key={c} style={{display:'flex',alignItems:'center',gap:'var(--space-4)',background:'var(--swivel-signal-black)',color:'var(--swivel-white)',borderRadius:8,padding:'12px var(--space-5)',fontFamily:'var(--font-display)',fontSize:'var(--size-xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-label)'}}>
                <Icon name="square-check" size={14}/>{c}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>;
}
Object.assign(window, { Verticals });
})();