Team Grid

const members = [
  { name: "Nadia Bello", role: "Co-founder & CEO" },
  { name: "Théo Marchand", role: "Co-founder & CTO" },
  { name: "Ines Kaddour", role: "Design lead" },
  { name: "Sam Whitfield", role: "Staff engineer" },
  { name: "Aiko Mori", role: "Product engineer" },
  { name: "Diego Ferrer", role: "Developer relations" },
  { name: "Maya Osei", role: "Support engineer" },
  { name: "Lucas Brandt", role: "Infrastructure" },
];

function initials(name: string) {
  return name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .toUpperCase();
}

export default function TeamGrid() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-6xl px-6 py-20 sm:py-24">
        <div className="mb-12 text-center">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            The people behind the product
          </h2>
          <p className="mt-2 text-muted-foreground">
            Eight humans, five countries, one very active group chat.
          </p>
        </div>

        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
          {members.map((member) => (
            <div
              key={member.name}
              className="rounded-xl border border-border/60 bg-card p-5 text-center"
            >
              <span className="mx-auto flex size-14 items-center justify-center rounded-full bg-muted font-mono text-sm font-semibold tracking-wide text-muted-foreground">
                {initials(member.name)}
              </span>
              <h3 className="mt-4 text-sm font-medium">{member.name}</h3>
              <p className="mt-0.5 text-xs text-muted-foreground">
                {member.role}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}