Team — list with roles and links

import { ArrowRight, Linkedin, MapPin, Twitter } from "lucide-react";

const people = [
  { name: "Maya Okonkwo", role: "Co-founder, CEO", location: "Lisbon", linkedin: "#", x: "#" },
  { name: "Felix Navarro", role: "Co-founder, engineering", location: "Valencia", linkedin: "#", x: "#" },
  { name: "Ingrid Solberg", role: "Head of design", location: "Oslo", linkedin: "#", x: "#" },
  { name: "Samir Haddad", role: "Payments lead", location: "Remote", linkedin: "#", x: "#" },
  { name: "Chloé Martin", role: "Customer support", location: "Lyon", linkedin: "#", x: "#" },
  { name: "Dev Malhotra", role: "Product engineer", location: "Pune", linkedin: "#", x: "#" },
];

const initials = (name: string) => name.split(" ").map((w) => w[0]).join("").slice(0, 2);

export function TeamList() {
  return (
    <section aria-labelledby="team-list-title" className="bg-surface px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[0.8fr_1.7fr] lg:gap-16">
        <div className="lg:sticky lg:top-6 lg:self-start">
          <h2 id="team-list-title" className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Who you’ll be talking to</h2>
          <p className="mt-4 text-base text-fg-muted sm:text-lg">Tallybook is built and supported by a small team. Here’s everyone, and where to find them.</p>
          <a href="/careers" className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">We’re hiring <ArrowRight className="size-4" aria-hidden /></a>
        </div>

        <ul className="divide-y divide-border border-y border-border">
          {people.map((p) => (
            <li key={p.name} className="grid grid-cols-[auto_1fr_auto] items-center gap-3.5 py-4 sm:grid-cols-[auto_1.2fr_1fr_auto]">
              <span className="grid size-9 place-items-center rounded-full bg-primary-soft text-[13px] font-medium text-primary-soft-fg" aria-hidden>{initials(p.name)}</span>
              <div>
                <p className="text-[14.5px] font-semibold text-fg">{p.name}</p>
                <p className="text-[13px] text-fg-muted">{p.role}</p>
              </div>
              <span className="hidden items-center gap-1.5 text-[13px] text-fg-subtle sm:inline-flex"><MapPin className="size-3.5" aria-hidden />{p.location}</span>
              <div className="flex gap-1">
                <a href={p.linkedin} aria-label={p.name + " on LinkedIn"} className="grid size-8 place-items-center rounded text-fg-subtle transition hover:bg-surface-2 hover:text-fg"><Linkedin className="size-4" aria-hidden /></a>
                <a href={p.x} aria-label={p.name + " on X"} className="grid size-8 place-items-center rounded text-fg-subtle transition hover:bg-surface-2 hover:text-fg"><Twitter className="size-4" aria-hidden /></a>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}