import React from 'react';
import DarkOverlay from "@/components/common/DarkOverlay.jsx";
import partnerList from '@/data/partners';
import {IMAGE_PREFIX} from "@/constants";
import {useScrollAnimation} from "@/hooks/useScrollAnimation";

const Partners = () => {
    const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });

    return (
        <div
            ref={ref}
            className="relative w-full pt-8 sm:pt-10 pb-12 sm:pb-20 mb-[4vw] bg-cover bg-center"
            style={{backgroundImage: `url(${IMAGE_PREFIX}/partners-bg.jpg)`}}
        >
            <DarkOverlay/>
            <div className={`max-w-7xl mx-auto relative flex-col justify-items-center px-4 sm:px-0 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                <div className="w-full mb-6 sm:mb-8 lg:mb-12">
                    <div className="relative w-full space-y-2 text-center sm:text-left">
                        <div className="text-white text-3xl sm:text-4xl lg:text-5xl font-semibold font-['Noto_Sans_KR']">협력사</div>
                        <div className="text-white text-sm sm:text-base lg:text-lg font-semibold font-['Noto_Sans_KR']">50개가 넘는 신뢰받는 기업과 상생하고 있습니다.
                        </div>
                    </div>
                </div>

                <div className="mb-5 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 justify-items-center gap-x-4 sm:gap-x-8 lg:gap-x-20 gap-y-6 sm:gap-y-8 lg:gap-y-10">
                    {partnerList.map((partner, index) => (
                        <div key={index} className="w-28 sm:w-32 lg:w-36 h-12 sm:h-14 lg:h-16 bg-white flex items-center justify-center">
                            <img
                                src={partner.imageUrl}
                                alt={`Partner logo ${index}`}
                                className="max-w-full max-h-full object-contain"
                            />
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

export default Partners;