Logo 4

"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

// Law firm logos/names
const lawFirms = [
  { hasLogo: true, id: "1", name: "MANNHEIMER\nSWARTLING" },
  { id: "2", name: "Pérez-Llorca", style: "serif" },
  { id: "3", name: "Bird&Bird", style: "ampersand" },
  { id: "4", name: "BORENIUS", style: "spaced" },
  { id: "5", name: "BORENIUS", style: "spaced" },
  { id: "6", name: "Bird&Bird", style: "ampersand" },
  { hasLogo: true, id: "7", name: "MANNHEIMER\nSWARTLING" },
  { id: "8", name: "Pérez-Llorca", style: "serif" },
];

function MannheimerLogo({ className }: { className?: string }) {
  return (
    <svg className={cn("h-8 w-8", className)} viewBox="0 0 40 40">
      <path
        d="M8 8h8v24H8V8zm16 0h8v24h-8V8zM16 12h8v4h-8v-4zm0 8h8v4h-8v-4zm0 8h8v4h-8v-4z"
        fill="currentColor"
      />
    </svg>
  );
}

function FirmLogo({ firm }: { firm: (typeof lawFirms)[0] }) {
  if (firm.hasLogo) {
    return (
      <div className="flex items-center gap-2">
        <MannheimerLogo className="text-neutral-700" />
        <span className="whitespace-pre-line font-semibold text-neutral-700 text-xs leading-tight">
          {firm.name}
        </span>
      </div>
    );
  }

  return (
    <span
      className={cn(
        "font-semibold text-neutral-700 text-xl",
        firm.style === "serif" && "font-serif",
        firm.style === "spaced" && "text-lg tracking-[0.25em]",
        firm.style === "ampersand" && "font-serif",
      )}
    >
      {firm.name}
    </span>
  );
}

export function Logo4() {
  return (
    <section className="w-full bg-[#f4f7f9] py-16 md:py-24">
      <div className="mx-auto w-full max-w-6xl px-6">
        {/* Header */}
        <div className="mb-10">
          <Badge
            className="mb-6 rounded-full border-blue-200 bg-white px-4 py-1 text-blue-600"
            variant="outline"
          >
            Logo
          </Badge>
          <h2 className="font-normal text-3xl text-gray-900 leading-tight md:text-4xl lg:text-5xl dark:text-gray-100">
            <span className="text-blue-500">50+</span> companies use Echo
          </h2>
        </div>

        {/* Logo Grid - 4x2 */}
        <div className="mb-12 grid grid-cols-2 gap-4 md:grid-cols-4">
          {lawFirms.map((firm) => (
            <div
              className="flex h-24 items-center justify-center rounded-2xl border-2 border-gray-200 border-dashed bg-white transition-colors hover:border-neutral-300 md:h-28 dark:border-neutral-700"
              key={firm.id}
            >
              <FirmLogo firm={firm} />
            </div>
          ))}
        </div>

        {/* Footer */}
        <div className="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center">
          <Button className="h-11 rounded-xl bg-neutral-900 px-6 text-white hover:bg-neutral-800">
            View case study
          </Button>
          <p className="max-w-md text-gray-600 text-sm md:text-right dark:text-gray-400">
            Echo is a perfect partner for businesses in digital compliance and
            workforce management.
          </p>
        </div>
      </div>
    </section>
  );
}

export default Logo4;