(() => {
const { Button, Icon, Field, Input, Select, Textarea } = window.SwivelDesignSystem_a628db;
function ContactBand({ onSubmit }) {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); onSubmit && onSubmit(); };
  return <section id="contact" style={{background:'var(--swivel-portal-yellow)',position:'relative',overflow:'clip'}}>
    <div aria-hidden="true" style={{position:'absolute',width:420,height:420,borderRadius:'50%',border:'2px solid var(--swivel-signal-black)',bottom:-190,left:-120,opacity:.18,pointerEvents:'none'}}/>
    <div style={{position:'relative',maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--section-y-lg) var(--gutter-page-lg)',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(420px,1fr))',gap:'var(--space-12)',alignItems:'start'}}>
      <div>
        <p style={{fontFamily:'var(--font-display)',fontSize:'var(--size-2xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-eyebrow)',color:'var(--swivel-signal-black)',margin:0,opacity:.7}}>Get in touch</p>
        <h2 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'clamp(36px,4.6vw,var(--size-7xl))',lineHeight:'var(--leading-flush)',letterSpacing:'var(--tracking-display)',textTransform:'uppercase',color:'var(--swivel-signal-black)',margin:'20px 0 0',maxWidth:'16ch'}}>Tell us which vertical you want first.</h2>
        <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-lg)',lineHeight:'var(--leading-normal)',color:'var(--swivel-signal-black)',margin:'24px 0 0',maxWidth:'46ch',textWrap:'pretty'}}>One call to scope your market, your currencies and your launch plan. A partnerships lead replies within one business day.</p>
        <div style={{display:'grid',gap:'var(--space-4)',marginTop:'var(--space-10)'}}>
          {[['mail','partners@swivelgaming.com'],['map-pin','Valletta, Malta'],['linkedin','linkedin.com/company/swivel-gaming']].map(([ic,txt])=>(
            <div key={txt} style={{display:'flex',alignItems:'center',gap:'var(--space-4)',fontFamily:'var(--font-display)',fontSize:'var(--size-sm)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-label)',color:'var(--swivel-signal-black)'}}>
              <Icon name={ic} size={16}/>{txt}
            </div>
          ))}
        </div>
      </div>
      <form onSubmit={submit} style={{background:'var(--swivel-white)',borderRadius:16,padding:'var(--space-10)',display:'grid',gap:'var(--space-6)'}}>
        <Field label="Work email" required htmlFor="c-email"><Input id="c-email" size="lg" type="email" placeholder="you@company.com" required/></Field>
        <Field label="Company" required htmlFor="c-co"><Input id="c-co" size="lg" placeholder="Company name" required/></Field>
        <Field label="Vertical you want first" htmlFor="c-vert"><Select id="c-vert" size="lg" placeholder="Select a vertical" options={['Sweeps casino','Prediction markets','Card ripping','Something else']}/></Field>
        <Field label="Anything we should know" hint="Markets, timeline, content you already licence." htmlFor="c-msg"><Textarea id="c-msg" rows={3} placeholder="Optional"/></Field>
        <Button type="submit" variant="solid" size="xl" block iconRight={<Icon name="arrow-up-right" size={18}/>}>{sent ? 'Request sent' : 'Book a demo'}</Button>
      </form>
    </div>
  </section>;
}
Object.assign(window, { ContactBand });
})();