// Contact.jsx — split inquiry: laboratory operators | referring physicians
function MsoInquiryForm({ context, ctaLabel }) {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [org, setOrg] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!name.trim() || !email.trim() || status === "sending") return;
    setStatus("sending");
    try {
      const fd = new FormData();
      fd.set("name", name);
      fd.set("email", email);
      fd.set("org", org);
      fd.set("context", context);
      const res = await fetch("/api/contact", { method: "POST", body: fd });
      const data = await res.json().catch(() => ({}));
      setStatus(res.ok && data.ok ? "sent" : "error");
    } catch {
      setStatus("error");
    }
  };

  if (status === "sent") {
    return (
      <div className="inquiry__success">
        Thank you, {name.split(" ")[0] || "—"}. A member of the operations team
        will reach out within two business days at {email}.
      </div>
    );
  }

  return (
    <form className="inquiry" onSubmit={onSubmit} aria-label={`${context} inquiry`}>
      <div className="inquiry__field inquiry__field--full">
        <label htmlFor={`${context}-name`}>Name</label>
        <input
          id={`${context}-name`}
          type="text"
          autoComplete="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Your full name"
          required
        />
      </div>
      <div className="inquiry__field">
        <label htmlFor={`${context}-org`}>Organization</label>
        <input
          id={`${context}-org`}
          type="text"
          autoComplete="organization"
          value={org}
          onChange={(e) => setOrg(e.target.value)}
          placeholder="Laboratory or practice"
        />
      </div>
      <div className="inquiry__field">
        <label htmlFor={`${context}-email`}>Email</label>
        <input
          id={`${context}-email`}
          type="email"
          autoComplete="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="you@laboratory.com"
          required
        />
      </div>
      {status === "error" && (
        <div className="inquiry__error">
          We couldn&rsquo;t send your message. Please email{" "}
          <a href="mailto:hello@altapath.health">hello@altapath.health</a> directly.
        </div>
      )}
      <button
        type="submit"
        className="btn btn--primary inquiry__submit"
        disabled={status === "sending"}
      >
        {status === "sending" ? "Sending…" : ctaLabel}
        <span className="arrow">→</span>
      </button>
    </form>
  );
}

function MsoContact() {
  return (
    <section id="contact" className="section">
      <div className="container">
        <div className="section__head">
          <div>
            <span className="eyebrow">Contact</span>
            <h2 style={{ marginTop: 14 }}>Two ways to start.</h2>
          </div>
          <p className="lede">
            Whether you&rsquo;re evaluating a single service or a full
            transition to the platform, the first conversation is the same
            &mdash; quiet, confidential, and informational.
          </p>
        </div>

        <div className="audiences">
          <div className="aud">
            <div className="aud__intro">
              <span className="eyebrow">Laboratory operators</span>
              <h3>You run the laboratory. We run everything else.</h3>
              <p className="text-muted" style={{ fontSize: 15 }}>
                For lab owners, executive directors, and pathologist-owners
                evaluating outsourced operations.
              </p>
              <ul>
                <li>Full-stack or single-discipline engagements.</li>
                <li>Written operational diagnostic before any contract.</li>
                <li>SLAs across billing, IT, and compliance.</li>
                <li>Continuity of clinical leadership and brand.</li>
              </ul>
            </div>
            <div className="aud__form-wrap">
              <MsoInquiryForm context="lab" ctaLabel="Request a diagnostic" />
            </div>
          </div>

          <div className="aud">
            <div className="aud__intro">
              <span className="eyebrow">Health systems & payers</span>
              <h3>Operating as one network on your contracts.</h3>
              <p className="text-muted" style={{ fontSize: 15 }}>
                For health systems, IDNs, and payers who prefer to contract
                with one operational counterparty across multiple
                laboratories.
              </p>
              <ul>
                <li>Single contracting & credentialing entity.</li>
                <li>Network-wide quality and reporting.</li>
                <li>Standardized SLAs and audit posture.</li>
                <li>References from active platform laboratories.</li>
              </ul>
            </div>
            <div className="aud__form-wrap">
              <MsoInquiryForm context="payer" ctaLabel="Open a contracting conversation" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MsoContact });