/* Shared contact form — used on homepage and /call page */

function ContactForm() {
  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);
    }
  };

  if (sent) {
    return (
      <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>
    );
  }

  return (
    <form className="contact-form" onSubmit={submit}>
      <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", marginRight: 16 }}>{error}</span>}
        <button type="submit" className="btn btn-primary" disabled={sending}>
          {sending ? "Sending…" : "Send & get scoping doc"} <Arrow/>
        </button>
      </div>
    </form>
  );
}

Object.assign(window, { ContactForm });