export function ApiEndpointCard() {
  return (
    <div className="bg-[#0B0E16] antialiased px-10 py-14 grid place-items-center text-zinc-100 font-mono">
      <article className="group w-full max-w-md rounded-lg border border-white/10 bg-[#0F1320] overflow-hidden hover:border-cyan-400/40 transition-colors duration-300">
        {/* Header */}
        <div className="flex items-center gap-3 border-b border-white/10 px-4 py-3">
          <span className="inline-flex items-center rounded-md bg-emerald-500/15 text-emerald-300 px-2 py-0.5 text-[10.5px] font-bold tracking-[0.12em]">
            POST
          </span>
          <code className="text-[13px] text-zinc-200">/v1/users/<span className="text-cyan-300">:id</span>/invite</code>
          <button
            type="button"
            aria-label="Copy endpoint"
            className="ml-auto text-[11px] text-zinc-400 hover:text-zinc-100 opacity-0 group-hover:opacity-100 transition-opacity"
          >
            ⧉ copy
          </button>
        </div>

        {/* Body */}
        <div className="px-4 pt-4">
          <p className="text-[11.5px] uppercase tracking-[0.18em] text-zinc-500">◆ Description</p>
          <p className="mt-1.5 text-[12.5px] text-zinc-300 leading-relaxed font-sans">
            Send a workspace invite to the user identified by <code className="text-cyan-300">id</code>.
            Returns the created invitation token.
          </p>
        </div>

        {/* Code snippet */}
        <pre className="mx-4 mt-4 rounded-md border border-white/5 bg-black/40 p-3 text-[11.5px] leading-relaxed overflow-x-auto">
<span className="text-zinc-500">$ </span><span className="text-zinc-100">curl -X POST</span> <span className="text-amber-300">https://api.velyn.dev/v1/users/u_42/invite</span>{"\n"}
  <span className="text-zinc-500">-H</span> <span className="text-emerald-300">&quot;Authorization: Bearer $TOKEN&quot;</span>{"\n"}
  <span className="text-zinc-500">-d</span> <span className="text-emerald-300">{`'{"email":"a@b.co"}'`}</span>
        </pre>

        {/* Footer */}
        <div className="mt-4 grid grid-cols-3 border-t border-white/10 text-[10.5px] uppercase tracking-[0.16em]">
          <Stat label="auth" value="Bearer" />
          <Stat label="rate" value="120/min" border />
          <Stat label="p99" value="83 ms" />
        </div>
      </article>
    </div>
  );
}

function Stat({ label, value, border }: { label: string; value: string; border?: boolean }) {
  return (
    <div className={`px-4 py-3 ${border ? "border-x border-white/10" : ""}`}>
      <div className="text-zinc-500">{label}</div>
      <div className="mt-0.5 text-zinc-100">{value}</div>
    </div>
  );
}
API Endpoint Card
