/* ====================================================
 * Partners & Clients Sections
 * Auto-scrolling logo carousels
 * ==================================================== */

'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';
import SectionHeader from '@/components/common/SectionHeader';
import ScrollReveal from '@/components/common/ScrollReveal';
import { Partner, Certification } from '@/types/api';

/* === Partners Section === */
export function PartnersSection({ initialPartners = [] }: { initialPartners?: Partner[] }) {
  if (!initialPartners || initialPartners.length === 0) return null;
  return (
    <section className="py-12 bg-white border-y border-surface-200">
      <div className="container-custom">
        <h3 className="text-center text-sm font-semibold text-dark-400 uppercase tracking-wider mb-8">
          Đối tác chiến lược
        </h3>
        <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
          {initialPartners.map((partner, index) => (
            <motion.div
              key={partner.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1 }}
              className="w-32 h-16 relative flex items-center justify-center hover:scale-110 transition-transform cursor-pointer"
            >
              {partner.link ? (
                <a href={partner.link} target="_blank" rel="noopener noreferrer">
                  {partner.logo ? (
                    <Image src={partner.logo} alt={partner.name} fill className="object-contain" />
                  ) : (
                    <span className="text-lg font-bold text-dark-600">{partner.name}</span>
                  )}
                </a>
              ) : (
                partner.logo ? (
                  <Image src={partner.logo} alt={partner.name} fill className="object-contain" />
                ) : (
                  <span className="text-lg font-bold text-dark-600">{partner.name}</span>
                )
              )}
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === Featured Clients === */
export function FeaturedClients({ initialClients = [] }: { initialClients?: Partner[] }) {
  if (!initialClients || initialClients.length === 0) return null;
  return (
    <section className="section-padding bg-white">
      <div className="container-custom">
        <SectionHeader
          subtitle="Khách hàng"
          title="Khách hàng tiêu biểu"
          description="Hàng nghìn bệnh viện, nhà thuốc và phòng khám trên toàn quốc đã tin tưởng lựa chọn sản phẩm của Vitalist Pharma."
        />

        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {initialClients.map((client, index) => (
            <ScrollReveal key={client.id} animation="scaleIn" delay={index * 0.1}>
              <div className="aspect-video bg-surface-50 rounded-2xl p-6 flex items-center justify-center hover:shadow-card hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-primary-100 group">
                <div className="relative w-full h-full opacity-60 group-hover:opacity-100 transition-opacity">
                  {client.logo ? (
                    <Image src={client.logo} alt={client.name} fill className="object-contain filter grayscale group-hover:grayscale-0 transition-all duration-300" />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-lg font-bold text-dark-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">{client.name}</div>
                  )}
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === Certifications Section === */
export function CertificationsSection({ initialCertifications = [] }: { initialCertifications?: Certification[] }) {
  if (!initialCertifications || initialCertifications.length === 0) return null;
  return (
    <section className="section-padding bg-surface-50">
      <div className="container-custom">
        <SectionHeader
          subtitle="Chứng nhận"
          title="Giải thưởng & Chứng nhận"
          description="Những thành tựu và chứng nhận chất lượng là minh chứng cho sự nỗ lực không ngừng của Vitalist Pharma."
        />

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {initialCertifications.map((cert, index) => (
            <ScrollReveal key={cert.id} animation="fadeUp" delay={index * 0.1}>
              <div className="bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-card transition-all duration-300 border border-surface-200">
                <div className="w-24 h-24 mx-auto mb-6 relative">
                  {cert.image ? (
                    <Image src={cert.image} alt={cert.title} fill className="object-contain" />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-4xl bg-surface-100 rounded-full">🏆</div>
                  )}
                </div>
                <div className="text-primary-600 font-bold mb-2">{cert.year}</div>
                <h3 className="text-lg font-semibold text-dark-800">{cert.title}</h3>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}