function Contact() {
  const [form, setForm] = React.useState({ first: "", last: "", email: "", message: "" });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const update = (k) => (e) => {
    setForm({ ...form, [k]: e.target.value });
    if (errors[k]) setErrors({ ...errors, [k]: null });
  };

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.first.trim()) next.first = "Required";
    if (!form.last.trim()) next.last = "Required";
    if (!form.email.trim()) next.email = "Required";
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) next.email = "Enter a valid email";
    if (!form.message.trim()) next.message = "Required";
    setErrors(next);
    if (Object.keys(next).length === 0) setSubmitted(true);
  };

  return (
    <section id="contact" className="section inverse" style={{ paddingTop: 120, paddingBottom: 120 }}>
      <div className="shell">
        <div className="contact-head-grid" style={{
          display: "grid",
          gridTemplateColumns: "80px 1fr",
          gap: 32,
          paddingTop: 24,
          borderTop: "1px solid rgba(250,248,245,.18)",
          marginBottom: 64,
        }}>
          <div className="mono" style={{ fontSize: 12, letterSpacing: ".1em", color: "rgba(250,248,245,.55)", paddingTop: 10 }}>
            (09)
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Consultation</div>
            <h2 className="h-section" style={{ color: "var(--cream)", maxWidth: 1000 }}>
              Ready to work smarter and<br/>
              <em style={{ fontStyle: "italic", color: "var(--gold-warm)", fontWeight: 400 }}>breathe easier?</em>
            </h2>
          </div>
        </div>

        <div className="contact-body-grid" style={{
          display: "grid",
          gridTemplateColumns: "80px 1fr 1fr",
          gap: 64,
          alignItems: "start",
        }}>
          <div className="indent-collapse-mobile"></div>

          {/* Left: pitch + booking */}
          <div>
            <p className="body-lg" style={{ marginTop: 0, color: "var(--cream)" }}>
              Claim a free consultation call today. A chance to explore how workload can be
              streamlined, energy freed up, and focus restored.
            </p>
            <p className="body" style={{ color: "rgba(250,248,245,.7)" }}>
              Choose a time from the booking calendar, or drop a message using the form here.
            </p>

            <div style={{ marginTop: 32, marginBottom: 32 }}>
              <a href="#book" className="btn" style={{
                background: "var(--cream)",
                color: "var(--charcoal)",
                borderRadius: "2px 14px 2px 14px",
              }}>
                Book a discovery call <ArrowRight size={12}/>
              </a>
            </div>

            <div style={{
              paddingTop: 24,
              borderTop: "1px solid rgba(250,248,245,.18)",
            }}>
              <div className="eyebrow" style={{ marginBottom: 16, color: "rgba(250,248,245,.55)" }}>Direct</div>
              <div style={{ display: "grid", gap: 12, fontSize: 14 }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span style={{ color: "rgba(250,248,245,.55)" }}>Email</span>
                  <span>hello@sophiesbureau.com</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span style={{ color: "rgba(250,248,245,.55)" }}>Tel</span>
                  <span>+33 671 27 34 00</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span style={{ color: "rgba(250,248,245,.55)" }}>Hours</span>
                  <span>Mon–Fri · 09:00–17:30 CET</span>
                </div>
              </div>
            </div>
          </div>

          {/* Right: form */}
          {!submitted ? (
            <form onSubmit={submit} noValidate>
              <div className="contact-name-grid" style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 24,
                marginBottom: 24,
              }}>
                <div className={`field ${errors.first ? "field-error" : ""}`}>
                  <label>First name <span style={{ color: "var(--gold-warm)" }}>*</span></label>
                  <input value={form.first} onChange={update("first")} />
                  {errors.first && <div className="err">{errors.first}</div>}
                </div>
                <div className={`field ${errors.last ? "field-error" : ""}`}>
                  <label>Last name <span style={{ color: "var(--gold-warm)" }}>*</span></label>
                  <input value={form.last} onChange={update("last")} />
                  {errors.last && <div className="err">{errors.last}</div>}
                </div>
              </div>
              <div className={`field ${errors.email ? "field-error" : ""}`} style={{ marginBottom: 24 }}>
                <label>Email <span style={{ color: "var(--gold-warm)" }}>*</span></label>
                <input type="email" value={form.email} onChange={update("email")} />
                {errors.email && <div className="err">{errors.email}</div>}
              </div>
              <div className={`field ${errors.message ? "field-error" : ""}`} style={{ marginBottom: 32 }}>
                <label>Message <span style={{ color: "var(--gold-warm)" }}>*</span></label>
                <textarea value={form.message} onChange={update("message")} rows={5} />
                {errors.message && <div className="err">{errors.message}</div>}
              </div>
              <button type="submit" className="btn" style={{
                background: "var(--cream)",
                color: "var(--charcoal)",
                borderRadius: "2px 14px 2px 14px",
                border: 0,
                width: "100%",
                justifyContent: "space-between",
              }}>
                <span>Send message</span>
                <ArrowRight size={12}/>
              </button>
              <p style={{
                marginTop: 16,
                fontSize: 12,
                color: "rgba(250,248,245,.55)",
                lineHeight: 1.5,
              }}>
                We use Simple Analytics — no cookies, no tracking. Your message is read by Sophie only.
              </p>
            </form>
          ) : (
            <div style={{
              border: "1px solid rgba(250,248,245,.25)",
              padding: 36,
              borderRadius: "2px 24px 2px 24px",
            }}>
              <div className="eyebrow" style={{ color: "var(--gold-warm)", marginBottom: 18 }}>Message received</div>
              <h3 className="serif" style={{ fontSize: 32, fontWeight: 500, lineHeight: 1.1, margin: "0 0 16px", color: "var(--cream)" }}>
                Thanks, {form.first}. I'll be in touch soon.
              </h3>
              <p className="body" style={{ color: "rgba(250,248,245,.7)" }}>
                A reply usually arrives within one working day. In the meantime, you're welcome
                to book a discovery call directly.
              </p>
              <button onClick={() => { setSubmitted(false); setForm({ first: "", last: "", email: "", message: "" }); }}
                style={{
                  marginTop: 24,
                  background: "transparent",
                  border: 0,
                  color: "var(--cream)",
                  fontSize: 13,
                  borderBottom: "1px solid var(--cream)",
                  paddingBottom: 2,
                  cursor: "pointer",
                }}>
                Send another message
              </button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;