export function TeamMemberCard() {
  return (
    <div className="bg-[#F2F1EC] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group relative w-full max-w-sm rounded-2xl border border-[#1111111A] bg-white p-6 transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_30px_60px_-30px_rgba(17,17,17,0.25)]">
        {/* Cover swatch */}
        <div
          className="absolute inset-x-0 top-0 h-20 rounded-t-2xl overflow-hidden"
          style={{
            background:
              "linear-gradient(120deg, #2A3D2F 0%, #5E7F66 50%, #D9C8A3 100%)",
          }}
          aria-hidden
        />

        <div className="relative pt-12">
          <div className="relative inline-block">
            <div
              className="h-20 w-20 rounded-full ring-4 ring-white grid place-items-center text-white font-mono text-[22px]"
              style={{ background: "linear-gradient(135deg, #1A1A18, #6B6B66)" }}
            >
              MK
            </div>
            <span
              className="absolute bottom-1 right-1 h-4 w-4 rounded-full bg-emerald-500 ring-[3px] ring-white"
              aria-label="Online"
            >
              <span className="absolute inset-0 rounded-full bg-emerald-400 animate-ping opacity-70" />
            </span>
          </div>

          <h3 className="mt-4 text-[18px] font-medium tracking-tight">
            Maya Kovač
          </h3>
          <p className="text-[12.5px] text-[#6B6B66]">
            Senior Design Engineer · <span className="font-mono">she/her</span>
          </p>

          <p className="mt-3 text-[13px] leading-relaxed text-[#3B3B36]">
            Shipping interfaces with restraint — currently rewriting our
            component library and onboarding two designers.
          </p>

          {/* Stat row */}
          <div className="mt-4 flex items-center gap-4 border-t border-[#1111111A] pt-4">
            <Stat n="142" l="Shipped" />
            <span className="h-8 w-px bg-[#1111111A]" />
            <Stat n="06" l="Reviews" />
            <span className="h-8 w-px bg-[#1111111A]" />
            <Stat n="4 yr" l="Tenure" />
          </div>

          {/* Actions */}
          <div className="mt-5 flex items-center gap-2">
            <button
              type="button"
              className="flex-1 rounded-full bg-[#111111] text-white py-2 text-[12.5px] font-medium hover:bg-[#1F1F1D] transition-colors"
            >
              Message
            </button>
            <button
              type="button"
              aria-label="View profile"
              className="grid h-9 w-9 place-items-center rounded-full border border-[#1111111A] hover:bg-[#F7F6F2] transition-colors"
            >
              ↗
            </button>
            <button
              type="button"
              aria-label="More"
              className="grid h-9 w-9 place-items-center rounded-full border border-[#1111111A] hover:bg-[#F7F6F2] transition-colors"
            >
              ⋯
            </button>
          </div>
        </div>
      </article>
    </div>
  );
}

function Stat({ n, l }: { n: string; l: string }) {
  return (
    <div className="text-center flex-1">
      <div
        className="text-[18px] leading-none"
        style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
      >
        {n}
      </div>
      <div className="mt-0.5 font-mono text-[10px] uppercase tracking-[0.14em] text-[#6B6B66]">
        {l}
      </div>
    </div>
  );
}
Team Member Card

Maya Kovač
