'use client'

import Image from 'next/image'
import { motion } from 'framer-motion'

export default function CertificationsSection() {
    const certifications = [
        {
            id: 1,
            name: "FSSAI",
            image: "/certifications/Frame-1000003749.png",
        },
        {
            id: 2,
            name: "ISO",
            image: "/certifications/Frame-1000003750.png",
        },
        {
            id: 3,
            name: "GMP",
            image: "/certifications/Frame-1000003751.png",
        },
        {
            id: 4,
            name: "HACCP",
            image: "/certifications/image-371-1.png",
        },
        {
            id: 5,
            name: "FDA",
            image: "/certifications/image-375-1.png",
        },
        {
            id: 6,
            name: "BRC",
            image: "/certifications/image-377-2.png",
        },
        {
            id: 7,
            name: "Quality",
            image: "/certifications/image-92.png",
        }
    ]

    return (
        <section className="relative py-12 md:py-16 overflow-hidden bg-white">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                {/* Section Header */}
                <motion.div 
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6 }}
                    className="text-center mb-8 md:mb-12"
                >
                    <h2 className="text-2xl md:text-3xl font-bold text-slate-900 mb-2">
                        <span className="text-transparent bg-gradient-to-r from-red-600 via-red-500 to-orange-500 bg-clip-text">
                            Certified By
                        </span>
                    </h2>
                    <p className="text-slate-600 max-w-2xl mx-auto">
                        Our commitment to quality is validated by prestigious international certifications
                    </p>
                </motion.div>

                {/* Certifications Row */}
                <motion.div
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6, delay: 0.2 }}
                    className="flex flex-wrap justify-center items-center gap-6 md:gap-8 lg:gap-12"
                >
                    {certifications.map((cert, index) => (
                        <motion.div
                            key={cert.id}
                            initial={{ opacity: 0, scale: 0.8 }}
                            whileInView={{ opacity: 1, scale: 1 }}
                            viewport={{ once: true }}
                            transition={{ duration: 0.4, delay: index * 0.1 }}
                            whileHover={{ scale: 1.05 }}
                            className="group cursor-pointer"
                        >
                            <div className="relative w-20 h-20 md:w-24 md:h-24 lg:w-28 lg:h-28 bg-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 group-hover:border-gray-200 flex items-center justify-center p-3">
                                <Image
                                    src={cert.image}
                                    alt={cert.name}
                                    fill
                                    className="object-contain p-2 group-hover:scale-110 transition-transform duration-300"
                                    sizes="(max-width: 768px) 80px, (max-width: 1024px) 96px, 112px"
                                />
                            </div>
                            <p className="text-center text-xs md:text-sm font-medium text-gray-600 mt-2 group-hover:text-gray-900 transition-colors">
                                {cert.name}
                            </p>
                        </motion.div>
                    ))}
                </motion.div>

                {/* Bottom Text */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6, delay: 0.5 }}
                    className="text-center mt-8 md:mt-12"
                >
                    <p className="text-sm text-gray-500 max-w-xl mx-auto">
                        Trusted by industry leaders worldwide for our commitment to quality, safety, and excellence in food production.
                    </p>
                </motion.div>
            </div>
        </section>
    )
}