// ResourceGrid — sitemap §12. 3-card resource grid: family guide, educator article, podcast.
// Mirrors home/layout-237 (3-up centred icon cards).

function ResourceGrid() {
  const cards = [
    { i: "menu_book",   tag: "Family guide",     h: "A first month with Kid Link",          b: "What to expect across your first four sessions — from intake to your first goals review." },
    { i: "school",      tag: "Educator article", h: "Sensory needs in the classroom",       b: "Practical, no-equipment strategies for teachers supporting neurodivergent students." },
    { i: "podcasts",    tag: "Podcast",          h: "PipCast — paediatric OT in practice",  b: "Short conversations with clinicians on assessment, evidence, and the messy middle." },
  ];

  return (
    <Section scheme="scheme-1">
      <SectionHeader
        eyebrow="Resources"
        title="Read, watch, and listen"
        lede="A small library of guides, articles, and conversations for the people around a child."
      />
      <div className="kl-cols-3" style={{ gap: 48 }}>
        {cards.map((c) => (
          <div key={c.h} style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", maxWidth: 380, justifySelf: "center" }}>
            <div style={{ marginBottom: 24 }}><MIcon name={c.i} size={48} /></div>
            <p style={{ fontWeight: 600, fontSize: "var(--kl-text-small)", marginBottom: 8 }}>{c.tag}</p>
            <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 16, lineHeight: 1.15 }}>{c.h}</h3>
            <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55 }}>{c.b}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 64, display: "flex", justifyContent: "center", gap: 16 }}>
        <Button variant="alternate">Browse all</Button>
        <Button variant="link" iconRight={<ChevronRight />}>Subscribe</Button>
      </div>
    </Section>
  );
}

window.ResourceGrid = ResourceGrid;