Logos — bordered grid

import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

// Made-up names — replace with your customers' logos (SVG), with their permission.
const logos = [
  { name: "Northwind", className: "font-bold tracking-[-0.05em]" },
  { name: "Blue Pine", className: "font-medium tracking-wide" },
  { name: "Kaveri", className: "text-[22px] font-semibold italic tracking-tight" },
  { name: "LUMEN", className: "text-base tracking-[0.24em]" },
  { name: "Orbit", className: "font-extrabold tracking-tight" },
  { name: "Halcyon", className: "font-medium" },
  { name: "tessera", className: "text-[22px] font-bold tracking-[-0.06em]" },
  { name: "Marigold", className: "font-semibold lowercase" },
];

export function LogosGrid() {
  const shown = logos.slice(0, 7);
  return (
    <section aria-labelledby="logos-title" className="bg-bg font-sans">
      <div className="mx-auto grid max-w-6xl items-center gap-7 px-4 py-16 sm:px-6 lg:grid-cols-[0.8fr_1.6fr] lg:gap-12 lg:py-20">
        <div className="flex flex-col items-start gap-3.5">
          <h2 id="logos-title" className="text-balance text-2xl font-semibold tracking-tight text-fg sm:text-3xl">Built for teams who bill every week</h2>
          <p className="text-pretty text-[14.5px] leading-relaxed text-fg-muted">
            From two-person studios to agencies with forty clients, the people behind these names send their invoices with Fernbill.
          </p>
          <a href="/customers" className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
            Read their stories <ArrowRight className="size-4" aria-hidden />
          </a>
        </div>
        <ul className="grid grid-cols-2 sm:grid-cols-4">
          {[...shown.map((l) => l.name), "you"].map((name, i) => {
            const l = shown[i];
            return (
              <li
                key={name}
                className={cn(
                  "flex h-24 items-center justify-center border-dashed border-border-strong px-2.5 text-fg-muted transition hover:bg-surface hover:text-fg",
                  // dashed lines only between cells: 2 columns on phones, 4 from sm
                  i % 2 === 0 && "border-r",
                  i % 4 === 3 ? "sm:border-r-0" : "sm:border-r",
                  i < 6 && "border-b",
                  i < 4 ? "sm:border-b" : "sm:border-b-0",
                )}
              >
                {l ? (
                  <span className={"whitespace-nowrap text-[17px] leading-none " + l.className}>{l.name}</span>
                ) : (
                  <a href="/signup" className="inline-flex items-center gap-1.5 text-[13px] font-medium text-primary">
                    Your studio? <ArrowRight className="size-3.5" aria-hidden />
                  </a>
                )}
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}