function ServiceDetail({ s, flip }) {
  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)" };
  const media = (
    <div className="bw-service-detail__media">
      <PhotoPlaceholder label={s.photo} tone={s.tone} style={{ aspectRatio: "4 / 3.4", boxShadow: "var(--shadow-md)" }} />
    </div>
  );
  return (
    <div className={`bw-service-detail${flip ? " bw-service-detail--flip" : ""}`}>
      {media}
      <div style={{ flex: 1 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
          <span style={{ width: 50, height: 50, borderRadius: "var(--radius-md)", background: toneBg[s.tone], color: toneFg[s.tone], display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name={s.icon} size={25} />
          </span>
          <Badge color={s.tone === "blush" ? "blush" : s.tone}>{s.ages}</Badge>
        </div>
        <h2 style={{ fontSize: 30, margin: "0 0 8px", letterSpacing: "-0.02em" }}>{s.name}</h2>
        <p style={{ fontSize: 16.5, color: "var(--text-muted)", margin: "0 0 18px", lineHeight: 1.6, maxWidth: "52ch" }}>{s.desc}</p>
        <div className="bw-points-grid" style={{ gap: "10px 20px" }}>
          {s.points.map((p) => (
            <div key={p} style={{ display: "flex", gap: 9, alignItems: "flex-start" }}>
              <span style={{ color: toneFg[s.tone], marginTop: 2 }}><Icon name="check" size={17} stroke={2.6} /></span>
              <span style={{ fontSize: 14.5, color: "var(--text-body)" }}>{p}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ServicesPage({ onBook, navigate }) {
  const services = [
    { name: "Speech Therapy", icon: "messages-square", tone: "sky", ages: "Ages 1-18", photo: "Speech session",
      desc: "From first words to confident conversations. Our speech-language pathologists support articulation, expressive and receptive language, fluency, AAC, and social communication.",
      points: ["Articulation & phonology", "Expressive & receptive language", "Social & pragmatic skills", "Fluency & stuttering", "AAC & assistive devices", "Early language stimulation"] },
    { name: "Occupational Therapy", icon: "puzzle", tone: "sage", ages: "Ages 1-18", photo: "OT session",
      desc: "Building the everyday skills of childhood. OT helps with fine motor control, sensory processing, handwriting, and the self-care routines that bring independence and confidence.",
      points: ["Fine & visual motor skills", "Sensory integration", "Handwriting & school readiness", "Self-care & daily routines", "Emotional regulation", "Play & social participation"] },
    { name: "Physical Therapy", icon: "footprints", tone: "honey", ages: "Ages 0-18", photo: "PT session",
      desc: "Helping kids move with strength and confidence. Our physical therapists support gross motor development, balance, coordination, and mobility so children can keep up and join in.",
      points: ["Gross motor development", "Strength & endurance", "Balance & coordination", "Gait & mobility", "Torticollis & early intervention", "Post-injury recovery"] },
    { name: "Feeding Therapy", icon: "utensils", tone: "blush", ages: "Ages 0-12", photo: "Feeding session",
      desc: "Pressure-free support for happier mealtimes. We help children expand textures and food variety, build oral-motor skills, and turn eating into a positive, low-stress experience.",
      points: ["Picky & selective eating", "Texture & sensory aversions", "Oral-motor skills", "Mealtime routines", "Bottle & cup transitions", "Family mealtime coaching"] },
    { name: "Behavioral Support", icon: "puzzle", tone: "sky", ages: "Ages 2-18", photo: "Behavioral support",
      desc: "ABA-informed, compassionate, and strengths-based. We help children build communication, routines, and emotional-regulation skills while coaching families with practical strategies.",
      points: ["Skill-building & routines", "Emotional regulation", "Positive behavior support", "Parent & caregiver coaching", "School collaboration", "Social skills groups"] },
  ];
  return (
    <React.Fragment>
      <PageHero eyebrow="Our Programs" tone="sky"
        title="Therapy tailored to your child"
        lead="Five specialties, one collaborative team. Every program starts with a thorough evaluation and a plan built around your child's specific strengths, needs, and goals." />
      <section className="bw-page-section" style={{ maxWidth: 1180, margin: "0 auto", padding: "64px 28px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 64 }}>
          {services.map((s, i) => <ServiceDetail key={s.name} s={s} flip={i % 2 === 1} />)}
        </div>
      </section>
      <section style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", padding: "56px 28px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28, flexWrap: "wrap" }}>
          <div>
            <h2 style={{ fontSize: 28, margin: "0 0 6px" }}>Not sure which program fits?</h2>
            <p style={{ fontSize: 16.5, color: "var(--text-muted)", margin: 0, maxWidth: "48ch" }}>That's exactly what our free consultation is for. We'll listen, ask questions, and point you toward the right next step.</p>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={onBook}>Schedule a consultation</Button>
            <Button variant="outline" size="lg" onClick={() => navigate("getting-started")}>See how it works</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.ServicesPage = ServicesPage;