(() => {
const { Button, Icon } = window.SwivelDesignSystem_a628db;
const PILLARS = [
  ['Built in-house','The platform, the games and the coin engine are ours. Nothing critical is a licensed black box we cannot change for you.'],
  ['Operator-first','Veteran and first-time operators run the same back office. Configuration, not custom development.'],
  ['Multi-vertical by design','The core was built to carry more than one mechanic, which is why the second vertical is a setting rather than a rebuild.'],
];
function Company() {
  return <section id="company" 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}}>About Swivel</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'}}>We build the products we sell.</h2>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))',gap:'var(--space-9)',marginTop:'var(--space-11)'}}>
        {PILLARS.map(([t,d])=>(
          <div key={t} style={{borderTop:'2px solid var(--swivel-signal-black)',paddingTop:'var(--space-6)'}}>
            <h3 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'var(--size-xl)',letterSpacing:'var(--tracking-heading)',textTransform:'uppercase',color:'var(--text-heading)',margin:0}}>{t}</h3>
            <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-md)',lineHeight:'var(--leading-normal)',color:'var(--text-muted)',margin:'12px 0 0',textWrap:'pretty'}}>{d}</p>
          </div>
        ))}
      </div>
      <div id="careers" style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:'var(--space-9)',alignItems:'center',background:'var(--swivel-signal-black)',borderRadius:16,padding:'var(--space-10)',marginTop:'var(--space-14)'}}>
        <div>
          <p style={{fontFamily:'var(--font-display)',fontSize:'var(--size-3xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-eyebrow)',color:'var(--swivel-portal-yellow)',margin:0}}>Careers</p>
          <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(--swivel-white)',margin:'var(--space-5) 0 0'}}>Build the next vertical</h3>
          <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-md)',lineHeight:'var(--leading-normal)',color:'var(--grey-400)',margin:'16px 0 0',maxWidth:'46ch',textWrap:'pretty'}}>Malta and remote. Engineering, operations and partnerships.</p>
        </div>
        <Button variant="outline" size="lg" iconRight={<Icon name="arrow-up-right" size={16}/>} style={{color:'var(--swivel-white)',borderColor:'var(--grey-600)'}}>See opportunities</Button>
      </div>
    </div>
  </section>;
}
Object.assign(window, { Company });
})();