"use client";

import { FadeInUp, StaggerContainer, StaggerItem } from "@/components/ui/motion";
import type { Client } from "@/generated/prisma/client";

export function PartnersSection({ clients }: { clients: Client[] }) {
  if (!clients || clients.length === 0) return null;

  const partners = clients.map((c) => ({ name: c.name, logo: c.logoUrl }));

  return (
    <section className="bg-bg-light py-24 relative z-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <FadeInUp className="mb-12">
          <h2 className="text-3xl md:text-5xl font-extrabold text-slate-900 tracking-tight mb-4">
            Klien & Mitra
          </h2>
          <p className="text-base md:text-lg text-slate-500">
            Dipercaya oleh berbagai maskapai, hotel, dan mitra perjalanan kelas dunia.
          </p>
        </FadeInUp>

        <StaggerContainer className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
          {partners.map((partner, index) => (
            <StaggerItem
              key={index}
              className="bg-white rounded-2xl border border-gray-100 p-6 flex flex-col items-center justify-center min-h-[120px] shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group"
            >
              {partner.logo ? (
                <img
                  src={partner.logo}
                  alt={`Logo ${partner.name}`}
                  className="h-12 w-auto object-contain grayscale opacity-60 transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 mb-3"
                  onError={(e) => {
                    (e.target as HTMLImageElement).style.display = "none";
                    (e.target as HTMLImageElement).nextElementSibling?.classList.remove("hidden");
                  }}
                />
              ) : null}
              <div className={`${partner.logo ? "hidden" : "flex"} w-10 h-10 mb-2 rounded-full bg-red-50 text-[#7a0f0f] font-bold text-lg items-center justify-center`}>
                {partner.name.charAt(0)}
              </div>
              <p className="text-sm font-semibold text-slate-700 text-center transition-colors group-hover:text-[#7a0f0f]">
                {partner.name}
              </p>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </div>
    </section>
  );
}