export function PullRequestCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-lg rounded-lg border border-[#1111111A] bg-white overflow-hidden hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-shadow">
        <div className="px-5 pt-5">
          <div className="flex items-start gap-3">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-[#1F883D] text-white px-2.5 py-1 text-[10.5px] font-mono uppercase tracking-[0.14em]">
              ◆ Open
            </span>
            <h3 className="text-[15px] font-medium leading-snug">
              feat(auth): PKCE callback fallback to token_hash + verifyOtp
            </h3>
          </div>
          <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px] text-[#6B6B66]">
            <span><span className="font-mono">#142</span> opened 3 hours ago by</span>
            <span className="inline-flex items-center gap-1.5">
              <span
                className="grid h-4 w-4 place-items-center rounded-full text-white text-[8px] font-mono"
                style={{ background: "linear-gradient(135deg, #2A3D2F, #5E7F66)" }}
              >
                D
              </span>
              <span className="text-[#111111] font-medium">elena-marchetti</span>
            </span>
            <span aria-hidden>·</span>
            <span className="inline-flex items-center gap-1 font-mono">
              <span>⎇</span> auth-flow → main
            </span>
          </div>

          {/* Labels */}
          <div className="mt-3 flex flex-wrap items-center gap-1.5">
            <Label color="#0E8A6A" text="bug" />
            <Label color="#5E60CE" text="auth" />
            <Label color="#D97706" text="needs-review" />
          </div>

          {/* Checks */}
          <ul className="mt-4 space-y-1.5 border-t border-[#1111111A] pt-4">
            <Check ok label="lint" detail="passed in 14s" />
            <Check ok label="unit tests" detail="312 passed, 0 skipped" />
            <Check label="e2e — auth" detail="running… 02:14 elapsed" running />
          </ul>
        </div>

        {/* Footer */}
        <div className="mt-5 flex items-center justify-between border-t border-[#1111111A] bg-[#FBFAF6] px-5 py-3 text-[11.5px]">
          <div className="flex items-center gap-1">
            <Reviewer initial="M" color="#2A3D2F" />
            <Reviewer initial="A" color="#5E60CE" />
            <Reviewer initial="K" color="#D97706" />
            <span className="ml-2 text-[#6B6B66] font-mono text-[10.5px]">2 approvals · 1 pending</span>
          </div>
          <div className="font-mono text-[11px]">
            <span className="text-emerald-700">+612</span>{" "}
            <span className="text-rose-700">−248</span>
          </div>
        </div>
      </article>
    </div>
  );
}

function Label({ color, text }: { color: string; text: string }) {
  return (
    <span
      className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10.5px] font-mono"
      style={{ background: `${color}18`, color }}
    >
      <span className="h-1.5 w-1.5 rounded-full" style={{ background: color }} />
      {text}
    </span>
  );
}

function Check({
  ok,
  running,
  label,
  detail,
}: {
  ok?: boolean;
  running?: boolean;
  label: string;
  detail: string;
}) {
  return (
    <li className="flex items-center gap-3 text-[12.5px]">
      <span
        className={`grid h-4 w-4 place-items-center rounded-full text-white text-[9px] ${
          ok ? "bg-emerald-600" : running ? "bg-amber-500" : "bg-[#1111111A]"
        }`}
      >
        {ok ? "✓" : running ? "·" : ""}
      </span>
      <span className="font-medium">{label}</span>
      <span className="text-[#6B6B66] font-mono text-[11px]">{detail}</span>
      {running && (
        <span className="ml-auto inline-flex h-2 w-2 rounded-full bg-amber-500 animate-pulse" aria-hidden />
      )}
    </li>
  );
}

function Reviewer({ initial, color }: { initial: string; color: string }) {
  return (
    <span
      className="grid h-6 w-6 -ml-1.5 first:ml-0 place-items-center rounded-full text-white text-[10px] font-mono ring-2 ring-[#FBFAF6]"
      style={{ background: color }}
    >
      {initial}
    </span>
  );
}
Pull Request Card

feat(auth): PKCE callback fallback to token_hash + verifyOtp
