function ContactPage() {
  const [sent, setSent] = React.useState(false);
  const info = [
    { icon: "phone", label: "Call us", value: "(555) 200-1480", sub: "Mon-Fri, 8am-6pm" },
    { icon: "mail", label: "Email", value: "hello@bloomwell.care", sub: "We reply within a day" },
    { icon: "map-pin", label: "Visit", value: "240 Meadow Lane, Suite 5", sub: "Riverside, CA 92501" },
  ];
  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>
            ) : (
              <React.Fragment>
                <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" required placeholder="Jordan Rivera" />
                  <Input label="Child's first name" placeholder="Avery" />
                  <Input label="Email" required type="email" placeholder="you@example.com" />
                  <Input label="Phone" type="tel" placeholder="(555) 000-0000" />
                </div>
                <div style={{ marginTop: 16 }}>
                  <Select label="Area of interest" 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?" placeholder="Share a little about your child and what you're hoping to work on…" rows={4} />
                </div>
                <div style={{ marginTop: 16 }}>
                  <Checkbox label="I'd like to receive occasional tips and updates by email." />
                </div>
                <Button variant="primary" size="lg" block onClick={() => setSent(true)} style={{ marginTop: 20 }} trailingIcon={<Icon name="arrow-right" size={18} />}>
                  Request my consultation
                </Button>
              </React.Fragment>
            )}
          </Card>
        </div>
      </section>
    </React.Fragment>
  );
}
window.ContactPage = ContactPage;