// Contact.jsx — bold form with success state
function Contact() {
  const [s, setS] = React.useState({ name: '', email: '', company: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setS(v => ({ ...v, [k]: e.target.value }));
  return (
    <section className="w-section w-section--white" id="contact">
      <span className="w-ov w-ov-confetti w-ov-cnt1" aria-hidden><i></i><i></i><i></i><i></i><i></i></span>
      <div className="w-wrap">
        <div className="w-contact__grid">
          <div data-reveal>
            <p className="w-eyebrow w-section__eyebrow">Start a conversation</p>
            <h2 className="w-contact__aside-h">Tell us about<br />the problem</h2>
            <p className="w-contact__aside-p">A senior engineer reads every message — usually within a business day. No funnels, no sales reps.</p>
            <p className="w-contact__aside-p" style={{ fontWeight: 700 }}>or email <a href="mailto:hello@myra.co" style={{ color: 'inherit' }}>hello@myra.co</a></p>
          </div>
          {sent ? (
            <div className="w-contact__sent" data-reveal>
              <div className="w-sticker w-sticker--pop">GOT IT!</div>
              <h3 className="w-contact__aside-h" style={{ fontSize: 'clamp(28px,4vw,52px)' }}>We&rsquo;ll be in touch</h3>
              <p className="w-contact__aside-p">Thanks, {s.name || 'friend'}. A senior engineer will read this themselves.</p>
              <button className="w-btn w-btn--outline" onClick={() => setSent(false)}>Send another</button>
            </div>
          ) : (
            <form className="w-contact__form" data-reveal onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="w-field"><label>Your name</label><input value={s.name} onChange={set('name')} placeholder="Priya Anand" required /></div>
              <div className="w-field"><label>Email</label><input type="email" value={s.email} onChange={set('email')} placeholder="priya@company.co" required /></div>
              <div className="w-field"><label>Company</label><input value={s.company} onChange={set('company')} placeholder="Company name" /></div>
              <div className="w-field"><label>What are you trying to figure out?</label><textarea rows="4" value={s.message} onChange={set('message')} placeholder="A few sentences is plenty." /></div>
              <button type="submit" className="w-btn w-btn--dark" style={{ alignSelf: 'flex-start' }}>Send message <span className="w-btn__arrow" aria-hidden>→</span></button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Contact });