Logos — trusted by, with counter

// 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" },
];

// Template number — use your real customer count.
const count = { value: "12,400", label: "studios, clinics and small agencies send their invoices with Fernbill" };

export function LogosCounter() {
  const shown = [logos[0], logos[1], logos[2], logos[4], logos[5], logos[7]];
  return (
    <section aria-labelledby="logos-title" className="bg-bg font-sans">
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-7 px-4 py-16 text-center sm:px-6 lg:py-20">
        <h2 id="logos-title" className="max-w-[34ch] text-balance text-lg font-medium tracking-tight text-fg-muted sm:text-2xl">
          <span className="mb-1 block text-5xl font-semibold leading-none tracking-[-0.05em] tabular-nums text-fg sm:text-6xl">
            {count.value}<span className="text-primary">+</span>
          </span>
          {count.label}
        </h2>
        <ul className="grid w-full grid-cols-3 overflow-hidden rounded-xl border border-border bg-surface md:flex">
          {shown.map((l, i) => (
            <li
              key={l.name}
              className={[
                "flex h-[84px] flex-1 items-center justify-center px-3 text-fg-muted",
                i % 3 !== 0 ? "border-l border-border" : "",
                i >= 3 ? "border-t border-border md:border-t-0" : "",
                i === 3 ? "md:border-l" : "",
              ].join(" ")}
            >
              <span className={"whitespace-nowrap text-sm leading-none sm:text-[17px] " + l.className}>{l.name}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}