function ContactModal({ open, onClose }) {
  const [sent, setSent] = React.useState(false); const [busy, setBusy] = React.useState(false);
  const [v, setV] = React.useState({ name: '', biz: '', email: '', phone: '', msg: '' }); const [err, setErr] = React.useState({});
  const close = () => { onClose(); setTimeout(() => { setSent(false); setErr({}); }, 300); };
  React.useEffect(() => { if (!open) return; const esc = e => { if (e.key === 'Escape') close(); }; document.addEventListener('keydown', esc); return () => document.removeEventListener('keydown', esc); }, [open]);
  const validate = () => { const e = {}; if (!v.name.trim()) e.name = 'Enter your name'; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v.email)) e.email = 'Enter a valid email address'; if (v.phone && v.phone.replace(/\D/g, '').length !== 10) e.phone = 'Enter a 10-digit phone number'; return e; };
  const submit = ev => { ev.preventDefault(); const e = validate(); setErr(e); if (Object.keys(e).length) return; setBusy(true); sendForm('Website: book a free demo', { name: v.name, business: v.biz, email: v.email, phone: v.phone, message: v.msg, page: location.href }).then(() => setSent(true), () => setErr({ form: FORM_FAIL })).finally(() => setBusy(false)); };
  const set = k => ev => setV(s => ({ ...s, [k]: ev.target.value }));
  if (sent) return <DS.Dialog open={open} onClose={close} success title="Thanks." description="We'll call you within 1 business hour." />;
  return <DS.Dialog open={open} onClose={close} title="Book a free demo" description="Tell us about your business. We call back within 1 business hour.">
    <form onSubmit={submit} noValidate style={{ display: 'grid', gap: 14 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}><DS.Input label="Your name" value={v.name} onChange={set('name')} error={err.name} autoComplete="name" /><DS.Input label="Business name" value={v.biz} onChange={set('biz')} autoComplete="organization" /></div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}><DS.Input label="Email" type="email" value={v.email} onChange={set('email')} error={err.email} autoComplete="email" /><DS.Input label="Phone (optional)" type="tel" value={v.phone} onChange={set('phone')} error={err.phone} autoComplete="tel" /></div>
      <DS.Input label="How can we help?" multiline rows={3} value={v.msg} onChange={set('msg')} />
      {err.form && <p role="alert" className="small" style={{ color: '#b42318' }}>{err.form}</p>}
      <DS.Button size="lg" fullWidth type="submit" loading={busy}>Send message</DS.Button>
    </form>
  </DS.Dialog>;
}
Object.assign(window, { ContactModal });