function Services({ navigate }) {
  const items = [
    { icon: "messages-square", tone: "sky",   name: "Speech Therapy", desc: "Confident communication through articulation, language, and social skills practice." },
    { icon: "puzzle",          tone: "sage",  name: "Occupational Therapy", desc: "Everyday independence: fine motor skills, sensory regulation, and self-care routines." },
    { icon: "footprints",      tone: "honey", name: "Physical Therapy", desc: "Strength, balance, and coordination so kids can move, explore, and keep up at play." },
    { icon: "utensils",        tone: "blush", name: "Feeding Therapy", desc: "Patient, pressure-free support for picky eating, textures, and mealtime confidence." },
    { icon: "puzzle",          tone: "sky",   name: "Behavioral Support", desc: "ABA-informed strategies that build skills, routines, and emotional regulation." },
  ];
  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" }}>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>
              <h3 style={{ fontSize: 17.5, margin: "15px 0 6px" }}>{it.name}</h3>
              <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;