function ContactPage({ onGo }) {
  const [form, setForm] = useState({ name: "", email: "", company: "", budget: "", req: "", type: "Growth Consulting" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  function setField(k, v) {
    setForm((f) => ({ ...f, [k]: v }));
    setErrors((e) => ({ ...e, [k]: null }));
  }
  function validate() {
    const e = {};
    if (!form.name.trim()) e.name = "Required";
    if (!form.email.match(/^[^@\s]+@[^@\s]+\.[^@\s]+$/)) e.email = "Valid email required";
    if (!form.req.trim()) e.req = "Tell me a bit about what you're working on";
    return e;
  }
  function submit(ev) {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) setSent(true);
  }

  return (
    <>
      <section className="wrap">
        <div className="contact">
          <div>
            <Reveal><span className="hero__kicker">Contact · say hi</span></Reveal>
            <Reveal delay={80}>
              <h1 className="contact__title" style={{ marginTop: 24 }}>
                Tell me what you're <em>building</em>.
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="contact__lede">
                A few lines is enough. I read every message and reply within 24 hours, IST working days.
                If it's a fit, we'll jump on a 30-minute call — no obligation, no sales deck.
              </p>
            </Reveal>
            <Reveal delay={220}>
              <dl className="contact__list">
                <div>
                  <dt>Email</dt>
                  <dd>hello@stanzin.me</dd>
                </div>
                <div>
                  <dt>Calendly</dt>
                  <dd><a style={{ borderBottom: "1px solid", cursor: "pointer" }}>cal.com/stanzin/30min</a></dd>
                </div>
                <div>
                  <dt>Elsewhere</dt>
                  <dd>LinkedIn · X · Substack</dd>
                </div>
                <div>
                  <dt>Reply time</dt>
                  <dd>Within 24h, IST working days</dd>
                </div>
              </dl>
            </Reveal>
          </div>

          <Reveal delay={260}>
            {sent ?
            <div className="form__sent">
                <h3>Message sent.</h3>
                <p>I'll get back to you within 24 hours. Meanwhile, check <a onClick={() => onGo("insights")} style={{ borderBottom: "1px solid var(--accent)", color: "var(--accent)", cursor: "pointer" }}>Insights</a>.</p>
              </div> :

            <form className="form" onSubmit={submit} noValidate>
                <div className={"field" + (errors.name ? " field--error" : "")}>
                  <label>Name</label>
                  <input value={form.name} onChange={(e) => setField("name", e.target.value)} placeholder="Your full name" />
                  {errors.name && <span className="field__err">{errors.name}</span>}
                </div>
                <div className={"field" + (errors.email ? " field--error" : "")}>
                  <label>Email</label>
                  <input type="email" value={form.email} onChange={(e) => setField("email", e.target.value)} placeholder="you@company.com" />
                  {errors.email && <span className="field__err">{errors.email}</span>}
                </div>
                <div className="field">
                  <label>Company (optional)</label>
                  <input value={form.company} onChange={(e) => setField("company", e.target.value)} placeholder="Your brand or company" />
                </div>
                <div className="field">
                  <label>What do you need help with?</label>
                  <div className="chips">
                    {["Growth Consulting", "Performance Marketing", "Funnel Optimization", "SEO Strategy", "Hiring"].map((t) =>
                  <button type="button" key={t} className={form.type === t ? "is-active" : ""} onClick={() => setField("type", t)}>{t}</button>
                  )}
                  </div>
                </div>
                <div className="field">
                  <label>Monthly budget (optional)</label>
                  <div className="chips">
                    {["< ₹1L", "₹1–3L", "₹3–6L", "₹6L+", "Not sure"].map((t) =>
                  <button type="button" key={t} className={form.budget === t ? "is-active" : ""} onClick={() => setField("budget", t)}>{t}</button>
                  )}
                  </div>
                </div>
                <div className={"field" + (errors.req ? " field--error" : "")}>
                  <label>Tell me about it</label>
                  <textarea value={form.req} onChange={(e) => setField("req", e.target.value)} placeholder="The problem, the context, the timeline. Bullet points are fine." />
                  {errors.req && <span className="field__err">{errors.req}</span>}
                </div>
                <button className="btn btn--accent form__submit" type="submit">
                  Send message <span className="arr">↗</span>
                </button>
              </form>
            }
          </Reveal>
        </div>
      </section>

      <section className="cta-big" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="wrap">
          <Reveal><h2 className="cta-big__title" style={{ fontSize: "clamp(36px, 5vw, 72px)" }}>Prefer a <em>call?</em></h2></Reveal>
          <Reveal delay={100}>
            <div className="cta-big__row">
              <button className="btn btn--primary" onClick={() => alert("Calendly placeholder")}>Book 30 min ↗</button>
              <button className="btn btn--ghost" onClick={() => alert("Resume placeholder")}>Download resume ↓</button>
            </div>
          </Reveal>
        </div>
      </section>
    </>);

}

window.ContactPage = ContactPage;