Logos Grid

const brands = [
  { name: "Northwind", style: "font-serif italic" },
  { name: "VERTEX", style: "font-mono tracking-widest" },
  { name: "Bloom&Co", style: "font-semibold tracking-tight" },
  { name: "helios", style: "font-light lowercase tracking-wide" },
  { name: "PARALLAX", style: "font-black tracking-tighter" },
  { name: "Quill", style: "font-serif" },
  { name: "syntax_", style: "font-mono font-semibold" },
  { name: "Meridian", style: "font-medium tracking-wide" },
];

export default function LogosGrid() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-5xl px-6 py-16 sm:py-20">
        <p className="text-center text-sm text-muted-foreground">
          Powering product teams at
        </p>
        <div className="mt-8 grid grid-cols-2 overflow-hidden rounded-xl border border-border/60 sm:grid-cols-4">
          {brands.map((brand, index) => (
            <div
              key={brand.name}
              className={[
                "flex h-24 items-center justify-center bg-card text-lg text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground",
                index % 2 === 1 ? "border-l border-border/60" : "",
                index >= 2 ? "max-sm:border-t max-sm:border-border/60" : "",
                index % 4 !== 0 ? "sm:border-l sm:border-border/60" : "",
                index >= 4 ? "sm:border-t sm:border-border/60" : "",
              ].join(" ")}
            >
              <span className={brand.style}>{brand.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}