import React from 'react';
import DarkOverlay from "@/componenets/DarkOverlay.jsx";
import partnerList from '@/data/partnersList.json';

const Partners = () => {
    return (
        <div
            className="relative flex-col justify-items-center w-full
             pt-10 pb-20 bg-cover bg-center gap-5 px-[2vw]"
            style={{backgroundImage: 'url(/partners-bg.jpg)'}}
        >
            <DarkOverlay/>

            <div className="w-full 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="relative w-[70%] grid grid-cols-5 justify-items-center gap-y-15">
                {partnerList.map((partner, index) => (
                    <div key={index} className="w-36 h-16">
                        <div
                            className="flex-1 self-stretch bg-white inline-flex flex-col justify-center items-center gap-2.5">
                            <div className="self-stretch flex-1 p-2.5 flex flex-col justify-start items-start gap-2.5">
                                <img className="self-stretch flex-1" src="https://placehold.co/130x50"/>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default Partners;