function GettingStartedPage({ onBook, navigate }) {
  const steps = [
    { n: "1", icon: "phone-call", tone: "sky", title: "Initial contact", time: "15 minutes",
      desc: "Reach out by phone or our quick form. We'll answer your questions, talk through your concerns, and gather a few details about your child.",
      points: ["No referral needed to start", "We verify your insurance & benefits", "Warm, no-pressure conversation"] },
    { n: "2", icon: "clipboard-list", tone: "sage", title: "Comprehensive evaluation", time: "60-90 minutes",
      desc: "Your child meets our specialists for a thorough, play-based assessment. We look at communication, motor skills, sensory needs, and more.",
      points: ["Holistic, play-based assessment", "Multiple specialties collaborate", "You're in the room, every step"] },
    { n: "3", icon: "map", tone: "honey", title: "Personalized care plan",  time: "Ongoing",
      desc: "We build a tailored plan with clear, measurable goals and walk you through every part of it. Then the fun begins.",
      points: ["Clear, measurable goals", "One coordinated team & plan", "Strategies you can use at home"] },
  ];
  const toneBg = { sky: "var(--sky-100)", sage: "var(--sage-100)", honey: "var(--honey-100)" };
  const toneFg = { sky: "var(--sky-600)", sage: "var(--sage-600)", honey: "var(--honey-600)" };
  return (
    <React.Fragment>
      <PageHero eyebrow="Getting Started" tone="honey"
        title="A simple path, from hello to milestones"
        lead="Starting therapy should feel clear. Here's what to expect, with our team guiding you the whole way." />

      <section style={{ maxWidth: 1080, margin: "0 auto", padding: "64px 28px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{ position: "relative" }}>
              <Card raised style={{ display: "flex", gap: 26, alignItems: "flex-start", padding: "30px 30px" }}>
                <div style={{ flex: "none", display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 64, height: 64, borderRadius: "var(--radius-lg)", background: toneBg[s.tone], color: toneFg[s.tone], display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name={s.icon} size={30} />
                  </span>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13, color: "var(--text-subtle)", letterSpacing: "0.04em" }}>STEP {s.n}</span>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                    <h2 style={{ fontSize: 24, margin: 0, letterSpacing: "-0.01em" }}>{s.title}</h2>
                    <Badge color="neutral"><Icon name="clock" size={13} /> {s.time}</Badge>
                  </div>
                  <p style={{ fontSize: 16, color: "var(--text-muted)", margin: "8px 0 16px", lineHeight: 1.6, maxWidth: "62ch" }}>{s.desc}</p>
                  <div style={{ display: "flex", gap: 22, flexWrap: "wrap" }}>
                    {s.points.map((p) => (
                      <div key={p} style={{ display: "flex", gap: 8, alignItems: "center" }}>
                        <span style={{ color: toneFg[s.tone] }}><Icon name="circle-check-big" size={17} /></span>
                        <span style={{ fontSize: 14, color: "var(--text-body)", fontWeight: 600 }}>{p}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Card>
              {i < steps.length - 1 && (
                <div style={{ display: "flex", justifyContent: "center", padding: "10px 0 0", color: "var(--neutral-300)" }}>
                  <Icon name="chevron-down" size={26} />
                </div>
              )}
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: "var(--sky-800)", color: "#fff" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "56px 28px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <span style={{ width: 56, height: 56, borderRadius: "50%", background: "rgba(255,255,255,0.12)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--sky-200)", flex: "none" }}>
              <Icon name="calendar-heart" size={28} />
            </span>
            <div>
              <h2 style={{ fontSize: 26, margin: "0 0 4px", color: "#fff" }}>Ready for step one?</h2>
              <p style={{ margin: 0, color: "var(--sky-200)", fontSize: 16 }}>Book your free consultation today. Most families hear back within one business day.</p>
            </div>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="accent" size="lg" onClick={onBook}>Schedule a consultation</Button>
            <Button variant="outline" size="lg" onClick={() => navigate("contact")} style={{ background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,0.4)" }}>Contact us</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.GettingStartedPage = GettingStartedPage;