function Contact({ go }) {
  useReveal();
  // Read ?intent= from hash so links from Method/Self-Assessment pre-fill the topic
  const initialIntent = (() => {
    const m = window.location.hash.match(/intent=([^&]+)/);
    return m ? decodeURIComponent(m[1]) : "";
  })();
  const [form, setForm] = useState({ name: "", email: "", phone: "", intent: initialIntent || "intro", situation: "", source: "" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  const intents = {
    method: "The Move Better Method (12-week program)",
    intro: "Free 15-min Intro Call (mutual fit-check)",
    review: "Postural Review + Strategy Call ($150 — credit toward the Method)",
    basic: "Basic Fitness Training",
    other: "General question",
  };

  function update(k, v) { setForm({ ...form, [k]: v }); setErrors({ ...errors, [k]: null }); }

  function submit(e) {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = "Required.";
    if (!form.email.trim()) errs.email = "Required.";
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = "Please enter a valid email.";
    if (!form.situation.trim()) errs.situation = "A sentence is enough.";
    if (Object.keys(errs).length) { setErrors(errs); return; }

    // Prototype: open mailto with everything filled in.
    // Production swap: POST to /api/contact → Resend → matt@mbmovebetter.com
    const subject = `New inquiry — ${intents[form.intent] || "General"} — ${form.name}`;
    const body = [
      `Name: ${form.name}`,
      `Email: ${form.email}`,
      form.phone ? `Phone: ${form.phone}` : null,
      `Intent: ${intents[form.intent] || form.intent}`,
      `Heard from: ${form.source || "—"}`,
      ``,
      `What brings them here:`,
      form.situation,
    ].filter(Boolean).join("\n");
    const mailto = `mailto:matt@mbmovebetter.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.location.href = mailto;
    setSent(true);
  }

  return (
    <div className="page-active">
      <section className="contact-hero">
        <div className="wrap">
          <div className="mono flank reveal" style={{ color: "var(--gold)", marginBottom: 36 }}>START HERE / CONTACT</div>
          <h1 className="contact-h1 reveal">Let's figure out <em>your body.</em></h1>
          <p className="contact-intro reveal">Matthew responds to every message personally. Whether you have a question about the Method, want to book a PDF Review Call, or are ready to start the 12-week program — fill out the form below and it goes straight to his inbox.</p>
        </div>
      </section>

      <section>
        <div className="wrap">
          <div className="contact-grid">
            <div className="reveal">
              {sent ? (
                <div className="thanks">
                  <span className="mono flank">MESSAGE SENT</span>
                  <h3>Thanks, {form.name.split(" ")[0] || "friend"}.</h3>
                  <p>Your inquiry is on its way to Matthew at <strong style={{ color: "var(--gold)" }}>matt@mbmovebetter.com</strong>. He'll respond personally within 24 hours.</p>
                  <p style={{ fontSize: 13, color: "var(--white-faint)" }}>If your mail client didn't open automatically, email Matthew directly at <a href="mailto:matt@mbmovebetter.com" style={{ color: "var(--gold)" }}>matt@mbmovebetter.com</a>.</p>
                  <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
                    <a className="btn btn-primary" onClick={() => go("method")}>Read The Method</a>
                    <a className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name: "", email: "", phone: "", intent: "method", situation: "", source: "" }); }}>Send Another</a>
                  </div>
                </div>
              ) : (
                <form onSubmit={submit} noValidate>
                  <div className="form-group">
                    <label className="form-label">01 / Name</label>
                    <input className="form-input" value={form.name} onChange={(e) => update("name", e.target.value)} placeholder="First and last" />
                    {errors.name && <div className="form-error">{errors.name}</div>}
                  </div>
                  <div className="form-group">
                    <label className="form-label">02 / Email</label>
                    <input className="form-input" type="email" value={form.email} onChange={(e) => update("email", e.target.value)} placeholder="you@domain.com" />
                    {errors.email && <div className="form-error">{errors.email}</div>}
                  </div>
                  <div className="form-group">
                    <label className="form-label">03 / Phone <span className="opt">— optional</span></label>
                    <input className="form-input" value={form.phone} onChange={(e) => update("phone", e.target.value)} placeholder="(555) 555-5555" />
                  </div>
                  <div className="form-group">
                    <label className="form-label">04 / What are you interested in</label>
                    <select className="form-select" value={form.intent} onChange={(e) => update("intent", e.target.value)}>
                      <option value="intro">Free 15-min Intro Call (start here)</option>
                      <option value="review">Postural Review + Strategy Call — $150 (credit toward the Method)</option>
                      <option value="method">The Move Better Method (12-week program)</option>
                      <option value="basic">Basic Fitness Training</option>
                      <option value="other">General question</option>
                    </select>
                  </div>
                  <div className="form-group">
                    <label className="form-label">05 / What brings you here</label>
                    <textarea className="form-textarea" rows="4" value={form.situation} onChange={(e) => update("situation", e.target.value)} placeholder="In your own words — pain, plateau, goal, or just curiosity. A sentence is enough." />
                    {errors.situation && <div className="form-error">{errors.situation}</div>}
                  </div>
                  <div className="form-group">
                    <label className="form-label">06 / How did you hear about Matthew</label>
                    <select className="form-select" value={form.source} onChange={(e) => update("source", e.target.value)}>
                      <option value="">Select one</option>
                      <option value="instagram">Instagram</option>
                      <option value="facebook">Facebook</option>
                      <option value="referral">Referral from a friend or client</option>
                      <option value="local">Local — South Lake Tahoe</option>
                      <option value="search">Search / Google</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ marginTop: 16 }}>
                    Send Message <span className="arrow">→</span>
                  </button>
                  <p style={{ marginTop: 16, fontSize: 12, color: "var(--white-faint)", lineHeight: 1.6 }}>
                    On submit, your message is delivered directly to <span style={{ color: "var(--gold)" }}>matt@mbmovebetter.com</span>.
                  </p>
                </form>
              )}
            </div>
            <aside className="contact-side reveal">
              <h3>Direct, personal, 24-hour reply.</h3>
              <p>Matthew reads and responds to every form himself. No assistants, no autoresponders. If the Method is the right fit, you'll know quickly. If it isn't, he'll tell you that too.</p>
              <div style={{ marginTop: 32 }}>
                <div className="contact-meta-row">
                  <span className="mono">EMAIL</span>
                  <span className="v"><a href="mailto:matt@mbmovebetter.com" style={{ color: "var(--white)", borderBottom: "1px solid var(--hairline-gold)" }}>matt@mbmovebetter.com</a></span>
                </div>
                <div className="contact-meta-row">
                  <span className="mono">BASE</span>
                  <span className="v">South Lake Tahoe, CA</span>
                </div>
                <div className="contact-meta-row">
                  <span className="mono">CLIENTELE</span>
                  <span className="v">Online clients nationwide</span>
                </div>
                <div className="contact-meta-row">
                  <span className="mono">RESPONSE</span>
                  <span className="v">Within 24 hours</span>
                </div>
                <div className="contact-meta-row" style={{ borderBottom: "1px solid var(--hairline)" }}>
                  <span className="mono">SOCIAL</span>
                  <span className="v">
                    <a href="https://instagram.com/mb_movebetter" target="_blank" rel="noopener" style={{ color: "var(--gold)", borderBottom: "1px solid var(--hairline-gold)" }}>@mb_movebetter</a>
                    <span style={{ color: "var(--white-faint)" }}> · </span>
                    <a href="https://www.facebook.com/profile.php?id=61564562967173" target="_blank" rel="noopener" style={{ color: "var(--gold)", borderBottom: "1px solid var(--hairline-gold)" }}>Facebook</a>
                  </span>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Contact = Contact;