Team — tall portrait grid

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

type Member = { name: string; role: string; photo?: string; linkedin?: string };

const team: Member[] = [
  { name: "Maya Okonkwo", role: "Co-founder, CEO", photo: "/team/maya.jpg", linkedin: "#" },
  { name: "Felix Navarro", role: "Co-founder, engineering", photo: "/team/felix.jpg", linkedin: "#" },
  { name: "Ingrid Solberg", role: "Head of design", linkedin: "#" },
  { name: "Samir Haddad", role: "Payments lead", linkedin: "#" },
  { name: "Chloé Martin", role: "Customer support", linkedin: "#" },
  { name: "Dev Malhotra", role: "Product engineer", linkedin: "#" },
  { name: "Hana Sato", role: "Growth", linkedin: "#" },
];

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

export function TeamPortraits() {
  return (
    <section aria-labelledby="team-portraits-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="flex flex-wrap items-end justify-between gap-5">
          <div>
            <p className="text-[13px] font-medium text-primary">The team</p>
            <h2 id="team-portraits-title" className="mt-3 text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Seven people, four countries, one inbox</h2>
          </div>
          <p className="max-w-[40ch] text-sm leading-relaxed text-fg-muted">We’re small on purpose. Write to support and one of us will answer, usually the person who built the thing.</p>
        </div>

        <ul className="mt-10 grid grid-cols-2 gap-4 md:grid-cols-4">
          {team.map((m) => (
            <li key={m.name}>
              <figure className="relative grid aspect-[3/4] place-items-center overflow-hidden rounded-lg bg-gradient-to-b from-primary-soft to-surface-2">
                {m.photo
                  ? <img src={m.photo} alt="" className="absolute inset-0 size-full object-cover" />
                  : <span className="mb-[30%] text-5xl font-semibold tracking-tighter text-primary-soft-fg/60" aria-hidden>{initials(m.name)}</span>}
                <figcaption className="absolute inset-x-2.5 bottom-2.5 flex items-center justify-between gap-2 rounded bg-bg/90 px-3 py-2.5 text-[13px] backdrop-blur">
                  <div className="min-w-0">
                    <p className="truncate font-semibold text-fg">{m.name}</p>
                    <p className="truncate text-xs text-fg-muted">{m.role}</p>
                  </div>
                  {m.linkedin && (
                    <a href={m.linkedin} aria-label={m.name + " on LinkedIn"} className="shrink-0 text-fg-subtle hover:text-fg">
                      <Linkedin className="size-4" aria-hidden />
                    </a>
                  )}
                </figcaption>
              </figure>
            </li>
          ))}
          <li className="grid aspect-[3/4] content-end gap-2 rounded-lg border border-dashed border-border-strong p-5">
            <span className="w-fit rounded-full bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">2 open roles</span>
            <h3 className="text-base font-semibold text-fg">Join us</h3>
            <p className="text-[13px] text-fg-subtle">Remote-friendly, four-day weeks in August.</p>
            <a href="/careers" className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">See open roles <ArrowRight className="size-3.5" aria-hidden /></a>
          </li>
        </ul>
      </div>
    </section>
  );
}