function Approach({ navigate }) {
  const steps = [
    { n: "01", icon: "clipboard-list", title: "Holistic assessment", desc: "We start by understanding the whole child across communication, movement, sensory needs, and play." },
    { n: "02", icon: "users", title: "Team collaboration", desc: "Your specialists share one plan and one set of goals, so care is connected, never fragmented." },
    { n: "03", icon: "blocks", title: "Play-based sessions", desc: "Therapy that feels like fun, with progress you can actually see and track. Never rote drills." },
    { n: "04", icon: "home", title: "All under one roof", desc: "Every service in one welcoming place, with strategies you carry home between visits." },
  ];
  return (
    <section className="bw-approach__section" style={{ maxWidth: 1180, margin: "0 auto", padding: "76px 28px" }}>
      <div className="bw-approach__grid">
        <div style={{ position: "relative" }}>
          <PhotoPlaceholder label="Therapist & child" tone="sage" style={{ aspectRatio: "1 / 1", boxShadow: "var(--shadow-lg)" }} />
        </div>
        <div>
          <Eyebrow color="var(--sage-600)">The Bloom Well approach</Eyebrow>
          <h2 style={{ fontSize: 38, margin: "10px 0 8px", letterSpacing: "-0.02em" }}>Customized, holistic care built around your child</h2>
          <p style={{ fontSize: 17, color: "var(--text-muted)", margin: "0 0 28px", maxWidth: "46ch" }}>No clinical maze and no running between clinics. One collaborative team assesses the whole child and builds a single plan you take together.</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {steps.map((s) => (
              <div key={s.n} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                <span style={{ flex: "none", width: 46, height: 46, borderRadius: "var(--radius-md)", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-xs)", color: "var(--sky-600)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={s.icon} size={22} />
                </span>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-subtle)" }}>{s.n}</span>
                    <h3 style={{ fontSize: 18, margin: 0 }}>{s.title}</h3>
                  </div>
                  <p style={{ fontSize: 14.5, color: "var(--text-muted)", margin: "3px 0 0", lineHeight: 1.5 }}>{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <Button variant="ghost" onClick={() => navigate && navigate("about")} trailingIcon={<Icon name="arrow-right" size={17} />} style={{ marginTop: 22, marginLeft: -8 }}>More about our philosophy</Button>
        </div>
      </div>
    </section>
  );
}
window.Approach = Approach;