(() => {
const { Button, Icon, Field, Input, Select } = window.SwivelDesignSystem_a628db;
const { inner, Section, headline, Label, CTA_LABEL } = window.SwivelSite;

const VERTICALS = ['Sweeps casino', 'Social casino', 'Card rips', 'Prediction markets', 'ADW'];

// Solid yellow closing slide. The form sits in a black panel (dark theme
// tokens) so its yellow submit button still reads.
function Contact({ onSubmit }) {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); if (onSubmit) onSubmit(); };
  return <Section id="contact" label="10 Contact" bg="var(--swivel-portal-yellow)" color="var(--swivel-signal-black)" mark="black">
    <div style={inner('128px', { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 400px), 1fr))', gap: 64, alignItems: 'start' })}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <Label white>Next step</Label>
        <h2 style={headline('clamp(44px, 6cqw, 96px)', { color: 'var(--swivel-signal-black)', textWrap: 'balance' })}>Let's build your project together.</h2>
        <p style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--swivel-signal-black)', margin: 0 }}>We reply within one business day.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 18, paddingTop: 16 }}>
          <a href="mailto:sales@swivelgaming.com" style={{ color: 'var(--swivel-signal-black)', fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '0.02em' }}>sales@swivelgaming.com</a>
        </div>
      </div>
      <form onSubmit={submit} data-theme="dark" style={{ display: 'flex', flexDirection: 'column', gap: 24, background: 'var(--swivel-signal-black)', border: '1px solid var(--swivel-signal-black)', borderRadius: 16, padding: 40 }}>
        <Field label="Email" required htmlFor="contact-email">
          <Input id="contact-email" name="email" type="email" required autoComplete="email" placeholder="you@company.com" size="lg"/>
        </Field>
        <Field label="Company" required htmlFor="contact-company">
          <Input id="contact-company" name="company" required autoComplete="organization" placeholder="Company name" size="lg"/>
        </Field>
        <Field label="Main vertical of interest" htmlFor="contact-vertical">
          <Select id="contact-vertical" name="vertical" placeholder="Select a vertical" options={VERTICALS} size="lg"/>
        </Field>
        <Button variant="primary" size="xl" block type="submit" iconRight={<Icon name="arrow-up-right" size={18}/>}>{sent ? 'Sent' : CTA_LABEL}</Button>
      </form>
    </div>
  </Section>;
}

Object.assign(window, { Contact });
})();