/* Contact — meeting invite + email + form */

function Contact() {
  const [state, setState] = React.useState({ name: "", email: "", company: "", role: "", engagement: "build", msg: "" });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const onChange = (k) => (e) => setState(s => ({ ...s, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(state),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to send");
      setSent(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setSending(false);
    }
  };

  return (
    <section id="contact">
      <div className="container">
        <div className="contact">
          <Reveal>
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>Let's talk</div>
              <div className="contact-lead">
                Tell us what you're trying to become — and we'll tell you if we can help.
              </div>
              <p style={{ color: "var(--fg-dim)", fontSize: 17, lineHeight: 1.55, marginTop: 28, maxWidth: "48ch" }}>
                Most calls end in 20 minutes with a clear yes or no. If it's a yes, you'll have a scoping
                doc in your inbox within 48 hours.
              </p>
              <div className="contact-availability" role="status" aria-label="1 of 2 client seats open this quarter">
                <span className="dot" aria-hidden="true" />
                <span>We take only 2 clients at a time. One seat left.</span>
              </div>
            </div>
          </Reveal>

          <Reveal delay={1}>
            <div className="contact-side">
              <div className="contact-card">
                <h4>Book a 30-min intro call</h4>
                <p>A live conversation with both founders. We'll talk through your team, your stack, and whether we're a fit.</p>
                <a href="https://cal.com/foundersnurtureaxis/30min" target="_blank" rel="noopener noreferrer">
                  Pick a time <Arrow/>
                </a>
              </div>
              <div className="contact-card">
                <h4>Or email us directly</h4>
                <p>Short note is fine. We read every message and reply within one business day.</p>
                <a href="mailto:founders@nurtureaxis.com">
                  founders@nurtureaxis.com <Arrow/>
                </a>
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={2}>
          <form className="contact-form" onSubmit={submit} style={{ marginTop: 72, maxWidth: 820 }}>
            {sent ? (
              <div style={{
                padding: "40px", border: "1px solid var(--accent-line)", borderRadius: "var(--r-lg)",
                background: "var(--accent-soft)", color: "var(--fg)"
              }}>
                <div className="kicker" style={{ marginBottom: 12 }}>Received · thank you</div>
                <div style={{ fontFamily: "var(--display)", fontSize: 28, letterSpacing: "-0.01em" }}>
                  We'll be in touch within one business day.
                </div>
              </div>
            ) : (
              <>
                <div className="contact-row">
                  <div className="contact-field">
                    <label>Your name</label>
                    <input required value={state.name} onChange={onChange("name")} placeholder="Jane Doe"/>
                  </div>
                  <div className="contact-field">
                    <label>Work email</label>
                    <input required type="email" value={state.email} onChange={onChange("email")} placeholder="jane@company.com"/>
                  </div>
                </div>
                <div className="contact-row">
                  <div className="contact-field">
                    <label>Company</label>
                    <input value={state.company} onChange={onChange("company")} placeholder="Company name"/>
                  </div>
                  <div className="contact-field">
                    <label>Your role</label>
                    <input value={state.role} onChange={onChange("role")} placeholder="CEO, COO, Head of Ops…"/>
                  </div>
                </div>
                <div className="contact-field">
                  <label>Which engagement are you curious about?</label>
                  <select value={state.engagement} onChange={onChange("engagement")}>
                    <option value="consult">AI-Native Consulting — $2,500/mo</option>
                    <option value="build">Build With You — $4,000/mo</option>
                    <option value="unsure">Not sure yet — let's talk</option>
                  </select>
                </div>
                <div className="contact-field">
                  <label>What are you trying to do?</label>
                  <textarea value={state.msg} onChange={onChange("msg")} placeholder="A few lines on your team, your current bottleneck, and where you'd like to be in 90 days."/>
                </div>
                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 8 }}>
                  {error && <span style={{ color: "#ff453a", fontSize: 14, alignSelf: "center" }}>{error}</span>}
                  <button type="submit" className="btn btn-primary" disabled={sending}>
                    {sending ? "Sending…" : "Send & get scoping doc"} <Arrow/>
                  </button>
                </div>
              </>
            )}
          </form>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });