function Services({ navigate }) {
  const items = [
    { icon: "messages-square", tone: "sky",   name: "Speech Therapy", desc: "Helping kids find their voices, strengthen connections, and grow their communication skills." },
    { icon: "puzzle",          tone: "sage",  name: "Occupational Therapy", desc: "Everyday independence: fine motor skills, sensory processing, and self-care routines.", soon: true },
    { icon: "footprints",      tone: "honey", name: "Physical Therapy", desc: "Strength, balance, and coordination so kids can move, explore, and keep up at play.", soon: true },
    { icon: "utensils",        tone: "blush", name: "Feeding Therapy", desc: "Patient, pressure-free support for picky eating, textures, and mealtime confidence.", soon: true },
  ];
  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 (
    <section style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="bw-services__section" style={{ maxWidth: 1180, margin: "0 auto", padding: "72px 28px" }}>
        <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto 44px" }}>
          <Eyebrow>What we do</Eyebrow>
          <h2 style={{ fontSize: 38, margin: "10px 0 0", letterSpacing: "-0.02em" }}>Multidisciplinary specialized care, all under one roof</h2>
          <p style={{ fontSize: 17, color: "var(--text-muted)", margin: "12px 0 0" }}>One coordinated team across every area of your child's development. No running between clinics.</p>
        </div>
        <div className="bw-services__grid">
          {items.map((it) => (
            <Card key={it.name} interactive onClick={() => navigate && navigate("services")}>
              <span style={{ width: 50, height: 50, borderRadius: "var(--radius-md)", background: toneBg[it.tone], color: toneFg[it.tone], display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={it.icon} size={25} />
              </span>
              <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", margin: "15px 0 6px" }}>
                <h3 style={{ fontSize: 17.5, margin: 0 }}>{it.name}</h3>
                {it.soon && <span className="bw-soon">Coming soon</span>}
              </div>
              <p style={{ fontSize: 14, color: "var(--text-muted)", margin: 0, lineHeight: 1.5 }}>{it.desc}</p>
            </Card>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 32 }}>
          <Button variant="outline" onClick={() => navigate && navigate("services")} trailingIcon={<Icon name="arrow-right" size={17} />}>Explore all programs</Button>
        </div>
      </div>
    </section>
  );
}
window.Services = Services;