import Image from "next/image";

const customers = [
  { name: "山河智能", logo: "/logo-sunward.png" },
  { name: "山河智能", logo: "/logo-sunward.png" },
  { name: "三一重工", logo: "/logo-sany.png" },
  { name: "山重建机", logo: "/logo-shanzhong.png" },
  { name: "上海振华重工", logo: "/logo-zpmc.png" },
  { name: "上海振华重工", logo: "/logo-zpmc.png" },
];

export function CustomerLogos() {
  return (
    <section className="relative isolate overflow-hidden bg-[#1d1d1d]">
      {/* Background */}
      <Image
        src="/customers-bg.png"
        alt=""
        fill
        className="object-cover"
        sizes="100vw"
        aria-hidden
      />
      <div className="absolute inset-0 bg-black/20" />

      <div className="relative z-10 mx-auto flex min-h-[400px] max-w-[1440px] items-center justify-center px-6 py-20 lg:px-[120px]">
        <div className="flex flex-wrap items-center justify-center gap-6 lg:gap-10">
          {customers.map((customer, index) => (
            <div
              key={`${customer.name}-${index}`}
              className="flex h-[120px] w-[120px] items-center justify-center bg-white p-4 [clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]"
            >
              <Image
                src={customer.logo}
                alt={customer.name}
                width={80}
                height={80}
                className="max-h-full max-w-full object-contain"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
