// TeamGrid — Clinicians §8. Photo + name + role + short bio grid.
// Mirrors clinicians/team-05.

function TeamGrid({ scheme = "scheme-2", title = "Meet the team", lede, members }) {
  return (
    <Section scheme={scheme}>
      <SectionHeader eyebrow="Our team" title={title} lede={lede} />
      <div className="kl-cols-4" style={{ gap: 32 }}>
        {members.map((m) => (
          <div key={m.name}>
            <img src={m.image} alt={m.name} style={{ width: "100%", aspectRatio: "1 / 1", objectFit: "cover", display: "block", marginBottom: 16, borderRadius: "var(--kl-radius-card)" }} />
            <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 4 }}>{m.name}</h3>
            <p style={{ fontWeight: 600, fontSize: "var(--kl-text-small)", color: "var(--kl-plum)", marginBottom: 12 }}>{m.role}</p>
            <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, color: "var(--kl-fg-2)" }}>{m.bio}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

window.TeamGrid = TeamGrid;