function AboutPage({ onBook, navigate }) {
  const values = [
    { icon: "flower-2", tone: "sage", title: "Whole-child care", desc: "We see the whole child, not a diagnosis. Communication, movement, sensory needs, and emotions are connected, so our team treats them together." },
    { icon: "users", tone: "sky", title: "Collaborative care", desc: "Your therapists talk to each other. One shared plan, one team around your child, with families as full partners in every decision." },
    { icon: "sparkles", tone: "honey", title: "Empowering families", desc: "Real progress happens between sessions. We coach you with practical strategies so confidence keeps growing at home." },
    { icon: "blocks", tone: "blush", title: "Fun, meaningful sessions", desc: "Therapy that feels like play, never rote drills. When kids are engaged and joyful, skills stick." },
  ];
  const toneBg = { sky: "var(--sky-100)", sage: "var(--sage-100)", honey: "var(--honey-100)", blush: "var(--blush-100)" };
  const toneFg = { sky: "var(--sky-600)", sage: "var(--sage-600)", honey: "var(--honey-600)", blush: "var(--blush-500)" };
  return (
    <React.Fragment>
      <PageHero eyebrow="About Bloom Well" tone="sage"
        title="Whole-child therapy, centered on your family"
        lead="We believe every child can flourish with warm support, clinical expertise, and a plan made just for them." />

      <section className="bw-page-section" style={{ maxWidth: 1180, margin: "0 auto", padding: "64px 28px" }}>
        <div className="bw-about__mission-grid" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 52, alignItems: "center" }}>
          <PhotoPlaceholder label="Our team & families" tone="mix" style={{ aspectRatio: "1 / 1", boxShadow: "var(--shadow-lg)" }} />
          <div>
            <Eyebrow color="var(--sage-600)">Our mission</Eyebrow>
            <h2 style={{ fontSize: 32, margin: "10px 0 14px", letterSpacing: "-0.02em" }}>Care that treats the whole child, together</h2>
            <p style={{ fontSize: 16.5, color: "var(--text-body)", lineHeight: 1.65, margin: "0 0 14px" }}>
              Bloom Well began with a simple belief: children do best when their care is coordinated, compassionate, and built around who they are. Too often, families are sent from clinic to clinic, repeating their story and stitching together a plan on their own.
            </p>
            <p style={{ fontSize: 16.5, color: "var(--text-muted)", lineHeight: 1.65, margin: 0 }}>
              We do it differently. Under one roof, a collaborative team of specialists builds a single holistic plan and partners with you at every step.
            </p>
          </div>
        </div>
      </section>

      <section style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
        <div className="bw-page-section" style={{ maxWidth: 1180, margin: "0 auto", padding: "68px 28px" }}>
          <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto 40px" }}>
            <Eyebrow color="var(--sage-600)">What guides us</Eyebrow>
            <h2 style={{ fontSize: 34, margin: "10px 0 0", letterSpacing: "-0.02em" }}>Our philosophy of care</h2>
          </div>
          <div className="bw-about__values-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            {values.map((v) => (
              <Card key={v.title} style={{ display: "flex", gap: 16 }}>
                <span style={{ flex: "none", width: 52, height: 52, borderRadius: "var(--radius-md)", background: toneBg[v.tone], color: toneFg[v.tone], display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={v.icon} size={25} />
                </span>
                <div>
                  <h3 style={{ fontSize: 19, margin: "2px 0 6px" }}>{v.title}</h3>
                  <p style={{ fontSize: 14.5, color: "var(--text-muted)", margin: 0, lineHeight: 1.55 }}>{v.desc}</p>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="bw-page-section" style={{ maxWidth: 1180, margin: "0 auto", padding: "64px 28px" }}>
        <div className="bw-about__stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, textAlign: "center" }}>
          {[
            { stat: "5", label: "Specialties under one roof" },
            { stat: "1:1", label: "Family-centered support" },
            { stat: "Whole", label: "Child-focused care" },
            { stat: "30 min", label: "Free first consultation" },
          ].map((s) => (
            <div key={s.label}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 40, letterSpacing: "-0.02em", color: "var(--sky-600)" }}>{s.stat}</div>
              <div style={{ color: "var(--text-muted)", fontSize: 15, marginTop: 4 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      <CTA onBook={onBook} />
    </React.Fragment>
  );
}
window.AboutPage = AboutPage;