export function IssueTrackerCard() {
  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 p-4 hover:border-[#111111]/30 hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-all">
        <div className="flex items-start gap-3">
          <span
            className="grid h-6 w-6 shrink-0 place-items-center rounded-md text-[#A33A2B] bg-[#A33A2B]/10 text-[12px]"
            aria-hidden
            title="Bug"
          >
            ●
          </span>

          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <span className="font-mono text-[10.5px] text-[#6B6B66]">VEL-142</span>
              <span className="text-[11px] text-[#6B6B66]">·</span>
              <h3 className="text-[14px] font-medium leading-snug">
                Magic-link callback fails with otp_expired on second click
              </h3>
            </div>

            <div className="mt-2 flex flex-wrap items-center gap-1.5">
              <Tag color="#A33A2B" text="bug" />
              <Tag color="#5E60CE" text="auth" />
              <Tag color="#0E8A6A" text="P1" />
            </div>

            <p className="mt-2.5 text-[12.5px] text-[#6B6B66] leading-relaxed">
              Reproduces consistently when the same link is opened in two tabs.
              Suspected PKCE verifier mismatch.
            </p>

            <div className="mt-3 flex items-center justify-between">
              <div className="flex items-center gap-3 text-[11px] text-[#6B6B66]">
                <span className="inline-flex items-center gap-1">
                  <span
                    className="grid h-4 w-4 place-items-center rounded-full text-white text-[8px] font-mono"
                    style={{ background: "linear-gradient(135deg, #1A1A18, #6B6B66)" }}
                  >
                    M
                  </span>
                  Maya
                </span>
                <span className="font-mono">⌥ 02 comments</span>
                <span className="font-mono">◷ 3 d ago</span>
              </div>
              <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-50 text-amber-800 px-2 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.14em]">
                <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
                In progress
              </span>
            </div>
          </div>
        </div>

        {/* Priority bar */}
        <div
          aria-hidden
          className="mt-4 h-1 w-full rounded-full bg-[#1111111A] overflow-hidden"
        >
          <div
            className="h-full"
            style={{
              width: "62%",
              background: "linear-gradient(90deg, #A33A2B, #D97706)",
            }}
          />
        </div>
      </article>
    </div>
  );
}

function Tag({ color, text }: { color: string; text: string }) {
  return (
    <span
      className="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-mono uppercase tracking-[0.12em]"
      style={{ background: `${color}15`, color }}
    >
      <span className="h-1 w-1 rounded-full" style={{ background: color }} />
      {text}
    </span>
  );
}
Issue Tracker Card

Magic-link callback fails with otp_expired on second click
