// SupportAreas — sitemap §10. "Areas of Support" — intro + numbered list + 4-card grid.
// Replaces home/layout-351 (which the Relume export rendered as a horizontal accordion).
// Simplified here to a numbered service list + cards.

function SupportAreas() {
  const services = [
    "Individual therapy across early intervention, school years, and young adulthood",
    "Group programmes for sensory, social, and self-regulation goals",
    "School visits, classroom observation, and educator consultation",
    "Telehealth sessions for families outside the Mitcham catchment",
    "Parent coaching, sibling sessions, and family team meetings",
  ];
  const cards = [
    { i: "favorite",         h: "Individual therapy",  b: "1:1 sessions in clinic, in-school, or at home." },
    { i: "school",           h: "School services",     b: "Classroom inclusion and educator partnership." },
    { i: "psychology",       h: "Clinical supervision",b: "Structured, reflective practice for paediatric OTs." },
    { i: "handshake",        h: "Consulting & training", b: "Capacity-building for organisations and teams." },
  ];

  return (
    <Section scheme="scheme-3">
      <div className="kl-split" style={{ gap: 96, alignItems: "flex-start", marginBottom: 80 }}>
        <div>
          <p style={{ fontWeight: 600, marginBottom: 16 }}>Areas of support</p>
          <h2 style={{ fontSize: "var(--kl-text-h2)", lineHeight: 1.1 }}>
            Four ways Kid Link works for you
          </h2>
        </div>
        <div>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, marginBottom: 32, maxWidth: "44ch" }}>
            Our work sits across direct therapy, education, professional development, and consulting. Pick the path that fits your needs — we'll meet you there.
          </p>
          <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 0 }}>
            {services.map((s, i) => (
              <li key={s} style={{
                display: "grid",
                gridTemplateColumns: "48px 1fr",
                padding: "16px 0",
                borderBottom: "1px solid var(--kl-border)",
                fontSize: "var(--kl-text-medium)",
                lineHeight: 1.5,
              }}>
                <span style={{ fontFamily: "var(--kl-font-display)", fontWeight: 500, color: "var(--kl-plum)" }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span>{s}</span>
              </li>
            ))}
          </ol>
        </div>
      </div>

      <div className="kl-cols-4" style={{ gap: 24 }}>
        {cards.map((c) => (
          <Card key={c.h} style={{ background: "var(--kl-white)", padding: 32, minHeight: 220 }}>
            <div style={{ marginBottom: 24 }}><MIcon name={c.i} size={40} /></div>
            <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 12, lineHeight: 1.2 }}>{c.h}</h3>
            <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.5 }}>{c.b}</p>
          </Card>
        ))}
      </div>
    </Section>
  );
}

window.SupportAreas = SupportAreas;