import ScrollReveal from "./ScrollReveal";

const clients = [
  { name: "Washington Commanders", logo: "/images/clients/commanders.png", width: 160, height: 88 },
  { name: "CVS / Aetna", logo: "/images/clients/cvs.png", width: 140, height: 17 },
  { name: "UBS", logo: "/images/clients/ubs.png", width: 120, height: 44 },
  { name: "BetMGM", logo: "/images/clients/betmgm.png", width: 160, height: 40 },
  { name: "Intuit", logo: "/images/clients/intuit.png", width: 130, height: 28 },
  { name: "Monumental Sports", logo: "/images/clients/monumental.svg", width: 150, height: 40 },
  { name: "COSM", logo: "/images/clients/cosm.svg", width: 120, height: 35 },
  { name: "Red Sands", logo: "/images/clients/redsands.svg", width: 130, height: 35 },
];

export default function Clients() {
  return (
    <section id="clients" className="py-20 bg-surface border-t border-border">
      <div className="max-w-6xl mx-auto px-6">
        <ScrollReveal>
          <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-white/35 text-center mb-12">
            Trusted By Industry Leaders
          </p>
          <div className="flex flex-wrap justify-center items-center gap-x-14 gap-y-10">
            {clients.map((client) => (
              <div
                key={client.name}
                className="opacity-40 hover:opacity-85 transition-all duration-500"
                title={client.name}
              >
                <img
                  src={client.logo}
                  alt={client.name}
                  width={client.width}
                  height={client.height}
                  loading="lazy"
                  className="logo-silhouette max-h-12 w-auto object-contain"
                  style={{ filter: "brightness(0) invert(1)" }}
                />
              </div>
            ))}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
}