Team grid

const team = [
  { name: "Dr. Meera Iyer", role: "Family medicine", days: "Mon – Fri", photo: "/team/meera.jpg" },
  { name: "Dr. Arjun Shetty", role: "Paediatrics", days: "Mon, Wed, Fri", photo: "/team/arjun.jpg" },
  { name: "Dr. Farah Siddiqui", role: "Dermatology", days: "Tue, Thu, Sat", photo: "/team/farah.jpg" },
  { name: "Dr. Karan Mehta", role: "ENT", days: "Wed, Sat", photo: "/team/karan.jpg" },
  { name: "Nisha Pillai", role: "Physiotherapy", days: "Mon – Sat" },
  { name: "Priya Das", role: "Nurse lead", days: "Mon – Sat" },
  { name: "Joseph Thomas", role: "Lab & diagnostics", days: "Mon – Sat" },
  { name: "Sana Rahman", role: "Front desk", days: "Mon – Sat" },
];

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

export function TeamGrid() {
  return (
    <section aria-labelledby="team-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6">
        <p className="text-[13px] font-medium text-primary">Our team</p>
        <h2 id="team-title" className="mt-3 text-3xl font-semibold tracking-tight text-fg">The people you’ll see at Kaveri</h2>
        <ul className="mt-10 grid grid-cols-2 gap-x-4 gap-y-8 md:grid-cols-4">
          {team.map((p) => (
            <li key={p.name}>
              {p.photo ? (
                <img src={p.photo} alt="" className="aspect-square w-full rounded-lg bg-surface-2 object-cover" />
              ) : (
                <div aria-hidden className="grid aspect-square place-items-center rounded-lg bg-primary-soft text-2xl font-semibold tracking-tight text-primary-soft-fg">
                  {initials(p.name)}
                </div>
              )}
              <p className="mt-3 text-sm font-semibold text-fg">{p.name}</p>
              <p className="text-sm text-fg-muted">{p.role}</p>
              <p className="mt-0.5 text-xs text-fg-subtle">{p.days}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}