(() => {
const { Logo, Button, Icon } = window.SwivelDesignSystem_a628db;
const NAV = [['Platform','platform'],['Verticals','verticals'],['Games','games'],['Company','company']];
function Header({ onCta }) {
  const [active, setActive] = React.useState('');
  const go = (id) => { setActive(id); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: 'smooth' }); };
  return <header style={{position:'sticky',top:0,zIndex:50,background:'var(--swivel-signal-black)',borderBottom:'1px solid var(--grey-800)'}}>
    <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--gutter-page-lg)',height:72,display:'flex',alignItems:'center',gap:'var(--space-11)'}}>
      <a href="#top" onClick={(e)=>{e.preventDefault();window.scrollTo({top:0,behavior:'smooth'});}} style={{display:'flex',alignItems:'center'}}><Logo variant="wordmark" tone="white" height={20} basePath="_ds/swivel-design-system-a628db45-289a-434e-a559-32d25ff73f00/assets/logos"/></a>
      <nav style={{display:'flex',gap:'var(--space-8)',flex:1}}>
        {NAV.map(([label,id])=>(
          <a key={id} href={'#'+id} onClick={(e)=>{e.preventDefault();go(id);}} style={{fontFamily:'var(--font-display)',fontSize:'var(--size-2xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-label)',textDecoration:'none',color:active===id?'var(--swivel-portal-yellow)':'var(--grey-300)',paddingBottom:2,borderBottom:'2px solid '+(active===id?'var(--swivel-portal-yellow)':'transparent'),transition:'var(--transition-control)'}}>{label}</a>
        ))}
      </nav>
      <Button variant="primary" size="md" onClick={onCta} iconRight={<Icon name="arrow-up-right" size={16}/>}>Book a demo</Button>
    </div>
  </header>;
}
Object.assign(window, { Header });
})();