function Contact() {
  const { Input, Select, Icon, Toast } = window.DesignSystem_f6a2e7;
  const [sent, setSent] = React.useState(false);
  const [f, setF] = React.useState({ name: '', email: '', topic: '', msg: '' });
  const [errors, setErrors] = React.useState({});
  const set = k => e => { setF(s => ({ ...s, [k]: e.target.value })); setErrors(er => (er[k] ? { ...er, [k]: undefined } : er)); };
  const validate = () => {
    const next = {};
    if (!f.name.trim()) next.name = 'Please tell us your name.';
    if (!f.email.trim()) next.email = 'Please add an email address.';
    else if (!EMAIL_RE.test(f.email.trim())) next.email = "That email doesn't look right.";
    if (!f.msg.trim()) next.msg = 'Write a short message so we know how to help.';
    else if (f.msg.trim().length < 10) next.msg = 'A few more words would help us route this.';
    setErrors(next);
    return Object.keys(next).length === 0;
  };
  const send = () => {
    if (!validate()) return;
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };
  const info = [['mail', 'Email', <a href="mailto:hello@aqualoopwater.com" style={{ color: 'var(--logo-blue)' }}>hello@aqualoopwater.com</a>], ['phone', 'Phone', <span style={{ color: 'var(--text-muted)', fontWeight: 500 }}>Number to be added</span>], ['clock', 'Hours', 'Mon–Sat, 7 am – 8 pm']];
  return <main>
    <PageHero meta={['Thane · Mumbai', 'Replies the same working day']} tag="Contact" title="Say hello." lead="Questions about a plan, a delivery, or bringing Aqualoop to your café. We reply the same working day." />

    <section className="s-wrap s-sec-t">
      <div className="split split--contact">
        <Reveal className="s-card" style={{ padding: 'clamp(24px,3.5vw,44px)' }}>
          <h2 className="s-h3" style={{ marginBottom: 24 }}>Send a message</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div className="g2"><Input label="Name" icon="user" value={f.name} onChange={set('name')} required error={errors.name} /><Input label="Email" type="email" icon="mail" value={f.email} onChange={set('email')} required error={errors.email} /></div>
            <Select label="Topic" placeholder="What's this about?" options={['New order', 'Existing delivery', 'Business enquiry', 'Something else']} value={f.topic} onChange={set('topic')} />
            <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-heading)' }}>Message<span style={{ color: 'var(--aq-danger-600)' }}> *</span></span>
              <textarea className="s-ta" value={f.msg} onChange={set('msg')} rows={6} aria-invalid={!!errors.msg} style={errors.msg ? { borderColor: 'var(--aq-danger-600)' } : undefined} />
              {errors.msg && <span style={{ fontSize: 13, color: 'var(--aq-danger-600)' }}>{errors.msg}</span>}
            </label>
            <div><Cta icon="send" onClick={send}>Send message</Cta></div>
          </div>
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Reveal delay={100} className="s-card s-card--white" style={{ padding: 'clamp(24px,3vw,36px)' }}>
            <ul className="info-rows">
              {info.map(([ic, k, v]) => <li key={k}>
                <span className="s-icon-dot s-icon-dot--soft"><Icon name={ic} size={20} /></span>
                <div><small>{k}</small><b>{v}</b></div>
              </li>)}
            </ul>
          </Reveal>
          <Reveal delay={180} className="s-card" style={{ padding: 'clamp(24px,3vw,36px)' }}>
            <h3 className="s-h4">Delivery areas</h3>
            <div className="area-tags" style={{ marginTop: 16 }}>{['Thane', 'Mira Bhayandar', 'Dahisar', 'Borivali', 'Kandivali'].map(a => <Tag key={a} tone="white" icon="map-pin">{a}</Tag>)}</div>
            <div style={{ marginTop: 20 }}><AreaCheck /></div>
          </Reveal>
        </div>
      </div>
    </section>
    {sent && <div style={{ position: 'fixed', right: 24, bottom: 24, zIndex: 60 }}><Toast tone="success" title="Message sent" message="We'll reply the same working day." onClose={() => setSent(false)} /></div>}
  </main>;
}
Object.assign(window, { Contact });