// ProjectsGrid — Organisations §6. Partner case-study cards.
// Mirrors organisations/layout-239 with partner / project / org name / description.

function ProjectsGrid({ scheme = "scheme-2", projects }) {
  return (
    <Section scheme={scheme}>
      <SectionHeader
        eyebrow="Previous projects"
        title="A small selection of partner work"
        lede="Recent engagements across accessibility consulting, resource development, expert media, and policy advisory."
      />
      <div className="kl-cols-3" style={{ gap: 32 }}>
        {projects.map((p) => (
          <Card key={p.title} style={{ background: "var(--kl-white)", border: "1px solid var(--kl-border)" }}>
            <img src={p.image} alt="" style={{ width: "100%", height: 220, objectFit: "cover", display: "block" }} />
            <div style={{ padding: 32 }}>
              <p style={{ fontWeight: 600, fontSize: "var(--kl-text-small)", color: "var(--kl-plum)", marginBottom: 12 }}>{p.org}</p>
              <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 16, lineHeight: 1.2 }}>{p.title}</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, marginBottom: 24, color: "var(--kl-fg-2)" }}>{p.body}</p>
              <Button variant="link" iconRight={<ChevronRight />}>Read case study</Button>
            </div>
          </Card>
        ))}
      </div>
    </Section>
  );
}

window.ProjectsGrid = ProjectsGrid;