export function PackageCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-md rounded-xl border border-[#1111111A] bg-white overflow-hidden hover:border-[#111111]/30 transition-all duration-300">
        <div className="p-5">
          <div className="flex items-start gap-3">
            <div
              className="grid h-12 w-12 shrink-0 place-items-center rounded-lg text-white font-bold text-[18px]"
              style={{ background: "linear-gradient(135deg, #CB3837, #8E1F1E)" }}
            >
              ⌘
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <h3 className="font-mono text-[15px] font-medium tracking-tight truncate">
                  @velynkit/auth
                </h3>
                <span className="text-[10.5px] font-mono uppercase tracking-[0.14em] text-[#6B6B66] bg-[#F2F1EC] border border-[#1111111A] rounded px-1.5 py-0.5">
                  v2.4.1
                </span>
              </div>
              <p className="mt-1 text-[12.5px] text-[#6B6B66] truncate">
                Drop-in PKCE auth helpers for Next.js + Supabase.
              </p>
            </div>
            <button
              type="button"
              aria-label="Copy install"
              className="ml-auto text-[#6B6B66] hover:text-[#111111] opacity-60 group-hover:opacity-100 transition-opacity"
            >
              ⧉
            </button>
          </div>

          {/* Install command */}
          <div className="mt-4 rounded-md bg-[#0F1320] text-zinc-100 font-mono text-[12px] px-3 py-2.5 flex items-center justify-between">
            <span><span className="text-zinc-500">$ </span>npm i @velynkit/auth</span>
            <span className="text-zinc-500 group-hover:text-cyan-300 transition-colors">⧉</span>
          </div>

          {/* Stats */}
          <div className="mt-4 grid grid-cols-4 gap-3 text-[11px]">
            <Stat label="Weekly" value="42.1k" />
            <Stat label="Stars" value="2.8k" />
            <Stat label="Deps" value="0" />
            <Stat label="License" value="MIT" />
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between border-t border-[#1111111A] bg-[#FBFAF6] px-5 py-3 text-[11px] text-[#6B6B66] font-mono">
          <span>Updated 2 days ago</span>
          <a href="#" className="inline-flex items-center gap-1 text-[#111111] hover:underline underline-offset-2">
            View on npm <span aria-hidden className="transition-transform group-hover:translate-x-0.5">→</span>
          </a>
        </div>
      </article>
    </div>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-[#6B6B66]">{label}</div>
      <div className="mt-0.5 text-[14px] font-medium">{value}</div>
    </div>
  );
}
Package / NPM Card

@velynkit/auth
