import ScrollReveal from "./ScrollReveal";

const partners = [
  { name: "THOR Broadcast", logo: "/images/clients/thor-logo.png", width: 140, height: 30 },
  { name: "Ross Video", logo: "/images/clients/ross-video.png", width: 140, height: 56 },
  { name: "Grass Valley", logo: "/images/clients/grass-valley.png", width: 150, height: 32 },
  { name: "vMix by Studio Coast", logo: "/images/clients/vmix.png", width: 130, height: 53 },
  { name: "RED Digital Cinema", logo: "/images/partners/red-digital.png", width: 60, height: 60 },
];

export default function Partners() {
  return (
    <section className="py-14 bg-surface-elevated 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/30 text-center mb-10">
            Technology Partners
          </p>
          <div className="flex flex-wrap justify-center items-center gap-x-16 gap-y-8">
            {partners.map((partner) => (
              <div
                key={partner.name}
                className="opacity-35 hover:opacity-80 transition-all duration-500"
                title={partner.name}
              >
                <img
                  src={partner.logo}
                  alt={partner.name}
                  width={partner.width}
                  height={partner.height}
                  loading="lazy"
                  className="logo-silhouette max-h-10 w-auto object-contain"
                  style={{ filter: "brightness(0) invert(1)" }}
                />
              </div>
            ))}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
}