function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [emailError, setEmailError] = useState('');
  const [form, setForm] = useState({ name: '', email: '', budget: '8k-25k', desc: '' });

  const isValidEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!isValidEmail(form.email)) {
      setEmailError('please enter a valid email address.');
      return;
    }
    setEmailError('');
    const url = 'https://docs.google.com/forms/d/e/1FAIpQLScNlB2LIyEE2PKhVKq-9DYtrERsHGCvIGvGP6ENm-SJ6UzzGQ/formResponse';
    const data = new URLSearchParams();
    data.append('entry.1280102930', form.name);
    data.append('entry.1152739883', form.email);
    data.append('entry.1168123122', form.budget);
    data.append('entry.923380716', form.desc);
    fetch(url, { method: 'POST', mode: 'no-cors', body: data });
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <section id="contact" className="section section-contact">
        <div className="container narrow">
          <p className="eyebrow">// reply queued</p>
          <h2 className="section-title">Got it. We'll write back within 48h.</h2>
          <p className="section-sub">If we're not the right fit, we'll say so and try to point you somewhere that is.</p>
          <button className="btn btn-ghost" onClick={() => setSubmitted(false)}>← send another</button>
        </div>
      </section>
    );
  }

  return (
    <section id="contact" className="section section-contact">
      <div className="container narrow">
        <p className="eyebrow">contact</p>
        <h2 className="section-title">Start a project.</h2>
        <p className="section-sub">Tell us roughly what you have in mind. We reply to everything within two business days.</p>

        <form className="contact-form" onSubmit={handleSubmit}>
          <div className="form-row">
            <div className="field">
              <label>name</label>
              <input className="input" required value={form.name} onChange={e=>setForm({...form, name:e.target.value})} placeholder="full name" />
            </div>
            <div className="field">
              <label>email</label>
              <input className={"input" + (emailError ? " input-error" : "")} type="email" required value={form.email} onChange={e=>{ setForm({...form, email:e.target.value}); setEmailError(''); }} placeholder="you@company.com" />
              {emailError && <span style={{color:'#e74c3c', fontSize:'0.8rem', marginTop:'0.25rem', display:'block'}}>{emailError}</span>}
            </div>
          </div>
          <div className="field">
            <label>budget</label>
            <div className="radio-row">
              {['<8k', '8k-25k', '25k-80k', '>80k', 'tbd'].map(b => (
                <label key={b} className={"radio" + (form.budget === b ? ' active' : '')}>
                  <input type="radio" name="b" checked={form.budget===b} onChange={()=>setForm({...form, budget:b})} />
                  <span>{b}</span>
                </label>
              ))}
            </div>
          </div>
          <div className="field">
            <label>what you have in mind</label>
            <textarea className="input textarea" rows="5" required value={form.desc} onChange={e=>setForm({...form, desc:e.target.value})} placeholder="// one paragraph is fine. links welcome."></textarea>
          </div>
          <div className="form-foot">
            <span className="caption">// we'll never share this anywhere.</span>
            <button type="submit" className="btn btn-primary">Send →</button>
          </div>
        </form>
      </div>
    </section>
  );
}
window.Contact = Contact;