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

const Partners = () => {
    return (
        <div
            className="relative w-full pt-10 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">
                <div className="w-full mb-5 h-25">
                    <div className="relative w-full space-y-2">
                        <div className="text-white text-5xl font-semibold font-['Inter']">협력사</div>
                        <div className="text-white text-lg font-semibold font-['Inter']">50개가 넘는 신뢰받는 기업과 상생하고 있습니다.
                        </div>
                    </div>
                </div>

                <div className="mb-5 grid grid-cols-5 justify-items-center gap-x-20 gap-y-10">
                    {partnerList.map((partner, index) => (
                        <div key={index} className="w-36 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;