function Contact() {
  const [sent, setSent] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3500);
  };

  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="contact">
          <div className="contact-left">
            <div className="section-kicker" style={{marginBottom: 20}}>— 06 / Start a project</div>
            <h2>
              Tell me about<br/>your <em>website.</em>
            </h2>
            <p style={{fontSize: 17, lineHeight: 1.5, color: 'var(--mute)', maxWidth: 420, margin: 0}}>
              Fill in whatever you know. I'll reply within one business day and
              we'll book a short call.
            </p>
            <div className="contact-direct">
              <div className="contact-direct-row">
                <span className="label">Direct line</span>
                <a className="val" href="tel:+6421000000">+64 21 000 000</a>
              </div>
              <div className="contact-direct-row">
                <span className="label">Email</span>
                <a className="val" href="mailto:ben@brucedigital.org">ben@brucedigital.org</a>
              </div>
              <div className="contact-direct-row">
                <span className="label">Location</span>
                <span className="val">Auckland, New Zealand</span>
              </div>
            </div>
          </div>

          <form className="form" onSubmit={onSubmit}>
            <div className="field">
              <label>Your name</label>
              <input type="text" name="name" placeholder="Jane Smith" required />
            </div>
            <div className="field">
              <label>Business name</label>
              <input type="text" name="business" placeholder="Smith &amp; Co." required />
            </div>
            <div className="field">
              <label>Phone</label>
              <input type="tel" name="phone" placeholder="021 000 000" />
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" name="email" placeholder="jane@smithco.nz" required />
            </div>
            <div className="field full">
              <label>Tell us about your website</label>
              <textarea name="message" placeholder="What do you do? What's working now, what isn't? Any sites you like?" />
            </div>
            <div className="form-submit">
              <span className="hint">Reply within 1 business day · Auckland hours</span>
              <button type="submit" className="submit-btn">
                {sent ? "Thanks — I'll be in touch ✓" : "Send brief"}
                {!sent && (
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                    <path d="M3 13L13 3M13 3H5M13 3V11" stroke="currentColor" strokeWidth="1.5"/>
                  </svg>
                )}
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;