function ContactPage() {
  const [sent, setSent] = React.useState(false);
  const [status, setStatus] = React.useState("idle"); // idle | sending | error
  const [error, setError] = React.useState("");

  const submit = async (event) => {
    event.preventDefault();
    if (status === "sending") return;
    const form = event.currentTarget;
    const data = Object.fromEntries(new FormData(form).entries());
    data.source = "contact";
    data.updates = form.elements.updates && form.elements.updates.checked ? "1" : "";
    setStatus("sending");
    setError("");
    try {
      const res = await fetch("/api/lead", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(data),
      });
      const result = await res.json().catch(() => ({}));
      if (res.ok && result.ok) {
        form.reset();
        setSent(true);
        setStatus("idle");
      } else {
        setStatus("error");
        setError(result.error || "Something went wrong. Please try again.");
      }
    } catch {
      setStatus("error");
      setError("We couldn't reach the server. Please check your connection and try again.");
    }
  };
  const info = [
    { icon: "phone", label: "Call us", value: "(555) 200-1480", sub: "Mon-Fri, 8am-6pm" },
    { icon: "mail", label: "Email", value: "hello@bloomwelltherapy.org", sub: "We reply within a day" },
    { icon: "map-pin", label: "Visit", value: "14470 S LaGrange Rd", sub: "Orland Park, IL 60462" },
  ];
  return (
    <React.Fragment>
      <PageHero eyebrow="Get in touch" tone="sky"
        title="Let's start the conversation"
        lead="Tell us a little about your child and what's on your mind. Our care team will reach out to schedule your free consultation." />

      <section className="bw-page-section" style={{ maxWidth: 1080, margin: "0 auto", padding: "56px 28px" }}>
        <div className="bw-contact__grid">
          {/* Left: info */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {info.map((c) => (
              <Card key={c.label} style={{ display: "flex", gap: 14, alignItems: "center" }}>
                <span style={{ flex: "none", width: 46, height: 46, borderRadius: "var(--radius-md)", background: "var(--sky-100)", color: "var(--sky-600)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={c.icon} size={22} />
                </span>
                <div>
                  <div style={{ fontSize: 12.5, color: "var(--text-subtle)", fontFamily: "var(--font-display)", fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase" }}>{c.label}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16.5, color: "var(--text-strong)" }}>{c.value}</div>
                  <div style={{ fontSize: 13.5, color: "var(--text-muted)" }}>{c.sub}</div>
                </div>
              </Card>
            ))}
            <Card soft style={{ background: "var(--sage-50)" }}>
              <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 6 }}>
                <Icon name="shield-check" size={19} color="var(--sage-600)" />
                <strong style={{ fontFamily: "var(--font-display)", color: "var(--sage-700)" }}>Your privacy matters</strong>
              </div>
              <p style={{ margin: 0, fontSize: 14, color: "var(--text-muted)", lineHeight: 1.55 }}>
                Everything you share is confidential and used only to help your family get started.
              </p>
            </Card>
          </div>

          {/* Right: form */}
          <Card raised style={{ padding: 30 }}>
            {sent ? (
              <div style={{ textAlign: "center", padding: "36px 12px" }}>
                <span style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--sage-100)", color: "var(--sage-600)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="check" size={32} stroke={2.4} />
                </span>
                <h2 style={{ fontSize: 24, margin: "16px 0 6px" }}>Thank you, we've got it!</h2>
                <p style={{ color: "var(--text-muted)", margin: "0 auto 22px", maxWidth: "40ch" }}>A member of our care team will reach out within one business day to find a time that works for your family.</p>
                <Button variant="outline" onClick={() => setSent(false)}>Send another message</Button>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <h2 style={{ fontSize: 23, margin: "0 0 4px" }}>Request your free consultation</h2>
                <p style={{ color: "var(--text-muted)", margin: "0 0 22px", fontSize: 15 }}>Fields marked with an asterisk are required.</p>
                <div className="bw-form-grid" style={{ gap: 16 }}>
                  <Input label="Your name" name="name" required placeholder="Jordan Rivera" />
                  <Input label="Child's first name" name="child" placeholder="Avery" />
                  <Input label="Email" name="email" required type="email" placeholder="you@example.com" />
                  <Input label="Phone" name="phone" type="tel" placeholder="(555) 000-0000" />
                </div>
                <div style={{ marginTop: 16 }}>
                  <Select label="Area of interest" name="interest" defaultValue="" options={[
                    { value: "", label: "Select a service…" },
                    { value: "st", label: "Speech therapy" },
                    { value: "ot", label: "Occupational therapy" },
                    { value: "pt", label: "Physical therapy" },
                    { value: "ft", label: "Feeding therapy" },
                    { value: "bx", label: "Behavioral support" },
                    { value: "ns", label: "Not sure yet, help me decide" },
                  ]} />
                </div>
                <div style={{ marginTop: 16 }}>
                  <Textarea label="How can we help?" name="message" placeholder="Share a little about your child and what you're hoping to work on…" rows={4} />
                </div>
                <div style={{ marginTop: 16 }}>
                  <Checkbox name="updates" label="I'd like to receive occasional tips and updates by email." />
                </div>
                <input type="text" name="company" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />
                {status === "error" && (
                  <p role="alert" style={{ margin: "16px 0 0", color: "var(--rose-600, #c0405b)", fontSize: 14 }}>{error}</p>
                )}
                <Button type="submit" variant="primary" size="lg" block disabled={status === "sending"} style={{ marginTop: 20 }} trailingIcon={<Icon name="arrow-right" size={18} />}>
                  {status === "sending" ? "Sending…" : "Request my consultation"}
                </Button>
              </form>
            )}
          </Card>
        </div>
      </section>
    </React.Fragment>
  );
}
window.ContactPage = ContactPage;