export function ClientLogoGrid() {
  const clientLogos = [
    "Vercel", "NEXT", "scale", "APOLLO", "Calcom", "Linear",
    "knock", "FLOX", "trunk", "Replay", "Graphite", "spiral",
    "haastes", "CURSOR", "KREA", "Harvey", "ElevenLabs", "Black Forest Labs",
    "Superplastic", "Triplicate", "SOLANA", "Basement", "MY BEAST", "EDGELORD",
    "VIRTUAL REALITY", "VIVID", "SHADCN", "KARMA", "G"
  ];

  return (
    <section className="py-8 bg-black">
      <div className="mx-auto max-w-[980px] px-4">
        <p className="mb-6 text-[10px] uppercase tracking-[0.2em] text-gray-400/80 text-center">
          Trusted by basement.
        </p>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-x-10 gap-y-5">
          {clientLogos.map((logo, index) => (
            <div
              key={index}
              className="w-full text-left text-slate-300/70 text-[11px] sm:text-xs md:text-sm hover:text-slate-200 transition-colors border border-gray-600/30 p-3 rounded-sm"
            >
              {logo}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}