import { useEffect } from 'react';
import { motion } from 'framer-motion';
import { Card } from '../UI/Card';
import { ScrollDownArrow } from '../UI/ScrollDownArrow';

export default function Certificates() {
    useEffect(() => {
        // Ensure the scroll happens after the component is fully mounted
        const timer = setTimeout(() => {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        }, 100);

        return () => clearTimeout(timer);
    }, []);

    const certificates = [
        {
            id: 1,
            image: "/sertifikat1.jpg",
            alt: "Сертификат за акредитација",
            title: "Сертификат за акредитација",
            description: "Официјален сертификат за акредитација на нашата лабораторија"
        },
        {
            id: 2,
            image: "/sertifikat2.jpg",
            alt: "Сертификат за квалитет",
            title: "Сертификат за квалитет",
            description: "Потврда за нашиот систем за управување со квалитет"
        }
    ];

    return (
        <div className="min-h-screen bg-neutral-50">
            {/* Hero Section */}
            <section className="relative bg-gradient-to-br from-primary-900 to-primary-700">
                <div className="absolute inset-0 bg-black/20" />
                <div className="relative container-base h-screen flex items-center justify-center">
                    <div className="flex flex-col items-center">
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.8 }}
                            className="max-w-3xl mx-auto text-center"
                        >
                            <h1 className="text-4xl md:text-5xl font-display font-bold text-white mb-6">
                                Сертификати и Акредитации
                            </h1>
                            <div className="w-24 h-1 bg-white/30 mx-auto mb-8"></div>
                            <p className="text-xl text-neutral-100">
                                Нашата посветеност кон квалитет и професионалност е потврдена со меѓународно признати сертификати
                            </p>
                        </motion.div>

                        <ScrollDownArrow targetId="certificates-section" />
                    </div>
                </div>
            </section>

            {/* Certificates Section */}
            <section id="certificates-section" className="py-24">
                <div className="container-base">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                        {certificates.map((certificate, index) => (
                            <motion.div
                                key={certificate.id}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.5, delay: index * 0.2 }}
                            >
                                <Card className="h-full overflow-hidden hover:shadow-xl transition-all duration-300">
                                    <motion.div
                                        whileHover={{ scale: 1.02 }}
                                        transition={{ duration: 0.3 }}
                                        className="relative aspect-[4/3] overflow-hidden"
                                    >
                                        <img
                                            src={certificate.image}
                                            alt={certificate.alt}
                                            className="w-full h-full object-cover"
                                            loading="lazy"
                                        />
                                    </motion.div>
                                    <div className="p-6">
                                        <h2 className="text-xl font-display font-semibold text-neutral-900 mb-2">
                                            {certificate.title}
                                        </h2>
                                        <p className="text-neutral-600">
                                            {certificate.description}
                                        </p>
                                    </div>
                                </Card>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>
        </div>
    );
}