// Contact — Formspree-backed form

const FORMSPREE_ENDPOINT = "https://formspree.io/f/xqenepyq";

function CTA() {
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error
  const [errMsg, setErrMsg] = React.useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    setErrMsg("");
    const form = e.currentTarget;
    const data = new FormData(form);
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: "POST",
        body: data,
        headers: { Accept: "application/json" }
      });
      if (res.ok) {
        setStatus("sent");
        form.reset();
      } else {
        const j = await res.json().catch(() => ({}));
        setErrMsg(j?.errors?.[0]?.message || "Something went wrong. Please email us directly.");
        setStatus("error");
      }
    } catch (err) {
      setErrMsg("Network error. Please email us directly.");
      setStatus("error");
    }
  }

  return (
    <section className="section" id="contact">
      <div className="wrap">
        <div className="cta cta--simple">
          <span className="eyebrow">
            <span className="dot" aria-hidden="true"></span>
            <span className="num">009</span>
            <span>Contact</span>
          </span>
          <h2 className="h2 cta--simple__title">
            Want to see Nephros<br />in your <em style={{ color: 'var(--accent)' }}>OR?</em>
          </h2>
          <p className="cta--simple__lede">
            Tell us a little about your program. We'll get back within two business days.
          </p>

          {status === "sent" ?
          <div className="cta-form__success" role="status">
              <div className="cta-form__success-mark">✓</div>
              <h4>Thank you</h4>
              <p>Your note is in. We'll be in touch shortly at the email you provided.</p>
            </div> :

          <form className="cta-form" onSubmit={handleSubmit} noValidate>
              <div className="cta-form__row">
                <label className="cta-form__field">
                  <span>Name</span>
                  <input name="name" type="text" required autoComplete="name" />
                </label>
                <label className="cta-form__field">
                  <span>Email</span>
                  <input name="email" type="email" required autoComplete="email" />
                </label>
              </div>
              <div className="cta-form__row">
                <label className="cta-form__field">
                  <span>Role</span>
                  <select name="role" defaultValue="">
                    <option value="" disabled>Select…</option>
                    <option>Cardiac surgeon</option>
                    <option>Perfusionist</option>
                    <option>OR / cardiac program leadership</option>
                    <option>Industry / partnership</option>
                    <option>Investor</option>
                    <option>Press</option>
                    <option>Other</option>
                  </select>
                </label>
                <label className="cta-form__field">
                  <span>Institution</span>
                  <input name="institution" type="text" autoComplete="organization" />
                </label>
              </div>
              <label className="cta-form__field cta-form__field--full">
                <span>Message <em className="cta-form__optional">(optional)</em></span>
                <textarea name="message" rows="4" placeholder="What would you like to know?"></textarea>
              </label>

              {/* Honeypot for bots */}
              <input type="text" name="_gotcha" style={{ display: "none" }} tabIndex="-1" autoComplete="off" />
              <input type="hidden" name="_subject" value="Nephros: new contact form submission" />

              <div className="cta-form__actions">
                <button type="submit" className="btn btn--primary" disabled={status === "sending"}>
                  {status === "sending" ? "Sending…" : <>Send <span className="arrow">→</span></>}
                </button>
                <a href="mailto:blakedenison@nephratech.com" className="cta--simple__email">

              </a>
              </div>

              {status === "error" &&
            <div className="cta-form__error" role="alert">{errMsg}</div>
            }
            </form>
          }

          <p className="cta--simple__legal">
            NephraTech, Inc. · Austin, Texas · Investigational. Not for sale.
          </p>
        </div>
      </div>
    </section>);

}

window.CTA = CTA;