// HowItWorks — "How We Help" 4-step numbered journey.
// Mirrors home/layout-298_1 from the Relume export.

function HowItWorks() {
  const steps = [
    { n: "01", h: "Get in touch", b: "Send us a short enquiry. We'll respond within two business days with next steps." },
    { n: "02", h: "Intake conversation", b: "We talk through your goals, your child's strengths, and the kind of support that fits." },
    { n: "03", h: "Assessment & plan", b: "We complete a paediatric OT assessment and co-design a plan around your family's day." },
    { n: "04", h: "Ongoing support", b: "Sessions in-clinic, in-school or via telehealth — with check-ins and tweaks along the way." },
  ];

  return (
    <Section scheme="scheme-2">
      <SectionHeader
        eyebrow="How we help"
        title="From enquiry to ongoing support"
        lede="Four steps to start working with Kid Link. We move at your family's pace."
      />
      <div className="kl-cols-4" style={{ gap: 48 }}>
        {steps.map((s) => (
          <div key={s.n}>
            <div style={{
              fontFamily: "var(--kl-font-display)",
              fontWeight: 500,
              fontSize: "var(--kl-text-h3)",
              color: "var(--kl-plum)",
              marginBottom: 24,
              lineHeight: 1,
            }}>{s.n}</div>
            <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 16 }}>{s.h}</h3>
            <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55 }}>{s.b}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 64, display: "flex", justifyContent: "center", gap: 16 }}>
        <Button variant="alternate">Enquire Now</Button>
        <Button variant="link" iconRight={<ChevronRight />}>See full process</Button>
      </div>
    </Section>
  );
}

window.HowItWorks = HowItWorks;