"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { partners, type Partner } from "@/constants";

// Renders a single partner logo - clean without borders
function PartnerLogo({ partner }: { partner: Partner }) {
  const [failed, setFailed] = useState(false);
  if (!partner.image || failed) return null;

  return (
    <motion.div
      className="flex items-center justify-center"
      whileHover={{ scale: 1.05 }}
      transition={{ duration: 0.2 }}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={partner.image}
        alt={`${partner.name} logo`}
        loading="lazy"
        onError={() => setFailed(true)}
        className="h-12 md:h-16 w-auto max-w-full opacity-60 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300"
      />
    </motion.div>
  );
}

export default function Partners() {
  return (
    <section
      id="partners"
      className="bg-white py-16"
    >
      {/* Header */}
      <div className="container-x mb-10 text-center">
        <motion.p
          className="text-sm font-semibold uppercase tracking-[0.2em] text-gold-600"
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
        >
          Trusted partners
        </motion.p>
      </div>

      {/* Static grid layout - clean logos only */}
      <div className="container-x">
        <div className="flex flex-wrap justify-center items-center gap-12 md:gap-20">
          {partners.map((partner, index) => (
            <motion.div
              key={partner.name}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1, duration: 0.4 }}
            >
              <PartnerLogo partner={partner} />
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}