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

const Business = () => {
    return (
        <div className="px-[2vw] py-[4vw] space-y-[5vw]">
            {/* 주요 사업 */}
            <div>
                {/* 텍스트 영역 */}
                <div className="space-y-2 mb-4">
                    <div className="text-blue-900 text-5xl font-bold font-['Inter']">반도산전 Business Solution</div>
                    <div className="text-zinc-500 text-lg font-bold font-['Inter']">반도산전이 선도하는 힘</div>
                </div>

                {/* 이미지 영역 */}
                <div className="bg-white flex flex-wrap gap-[0.3vw] w-full">
                    {businessItems.map((item, index) => (
                        <a
                            key={index}
                            href={item.url}
                            className="relative flex-[0_0_calc((100%-24px)/5)] bg-cover bg-center aspect-[16/10] cursor-pointer"
                            style={{backgroundImage: `url(${item.image})`}}
                        >
                            <DarkOverlay />
                            
                            <div className="relative p-4">
                                <div className="text-white text-xl font-bold font-['Inter'] whitespace-pre-line">{item.label}</div>
                                <div className="text-white text-lg font-bold font-['Inter']">→</div>
                            </div>
                        </a>
                    ))}
                </div>
            </div>
            
            {/* 반도산전은 */}
            <div>
                {/* 텍스트 영역 */}
                <div className="space-y-2 mb-2.5 pb-10">
                    <div className="text-5xl text-blue-900 font-bold font-['Inter']">반도산전은</div>
                </div>
                <div>
                    <div className="text-center">
                        <span className="text-zinc-600 text-2xl font-semibold font-['Inter'] leading-[70px]">1997년부터 2025년까지 </span>
                        <span className="text-blue-900 text-5xl font-semibold font-['Inter'] leading-[70px]">27</span>
                        <span className="text-zinc-600 text-2xl font-semibold font-['Inter'] leading-[70px]">년간 축적된 기술력과 신뢰를 바탕으로,<br/>부산  ·  울산  ·  경남 시공능력평가 </span>
                        <span className="text-blue-900 text-5xl font-semibold font-['Inter'] leading-[70px]">1</span>
                        <span className="text-zinc-600 text-2xl font-semibold font-['Inter'] leading-[70px]">위를 달성하였으며,<br/></span>
                        <span className="text-blue-900 text-5xl font-semibold font-['Inter'] leading-[70px]">947</span>
                        <span className="text-zinc-600 text-2xl font-semibold font-['Inter'] leading-[70px]">억 매출을 달성한 외감법인입니다.</span>
                    </div>
                    <div className="flex h-60 items-center">
                        <div className="flex-1 flex justify-center">
                            <div className="w-80 space-y-2 inline-flex flex-col">
                                <div className="h-7 relative">
                                    <div className="w-36 left-[84px] top-0 absolute text-center justify-start text-black/40 text-2xl font-medium font-['Inter']">전기공사</div>
                                </div>
                                <div className="self-stretch inline-flex justify-start items-start">
                                    <div className="flex-1 h-16 text-center justify-end text-black/40 text-3xl font-medium font-['Inter']">지역</div>
                                    <div className="flex-1 self-stretch text-center justify-center text-blue-900 text-6xl font-semibold font-['Inter']">15위</div>
                                </div>
                                <div className="self-stretch inline-flex justify-start items-start">
                                    <div className="flex-1 h-16 text-center justify-end text-black/40 text-3xl font-medium font-['Inter']">상위</div>
                                    <div className="flex-1 self-stretch text-center justify-center text-blue-900 text-6xl font-bold font-['Inter']">5%</div>
                                </div>
                            </div>
                        </div>
                        <div className="flex-1 flex justify-center">
                            <div className="p-2.5">
                                <div className="w-24 h-24 relative overflow-hidden">
                                    <div className="w-12 h-10 left-[40.83px] top-[4.08px] absolute bg-blue-900" />
                                    <div className="w-12 h-10 left-[8.17px] top-[4.08px] absolute bg-blue-900" />
                                    <div className="w-14 h-14 left-[20.42px] top-[36.75px] absolute bg-slate-200" />
                                </div>
                            </div>
                            <div className="w-80 inline-flex flex-col">
                                <div className="self-stretch h-7 relative">
                                    <div className="w-36 left-[84px] top-0 absolute text-center justify-start text-black/40 text-2xl font-medium font-['Inter']">통신공사</div>
                                </div>
                                <div className="self-stretch inline-flex justify-start items-start">
                                    <div className="flex-1 h-16 text-center justify-end text-black/40 text-3xl font-medium font-['Inter']">지역</div>
                                    <div className="flex-1 self-stretch text-center justify-center text-blue-900 text-6xl font-bold font-['Inter']">1위</div>
                                </div>
                                <div className="self-stretch inline-flex justify-start items-start">
                                    <div className="flex-1 h-16 text-center justify-end text-black/40 text-3xl font-medium font-['Inter']">상위</div>
                                    <div className="flex-1 self-stretch text-center justify-center text-blue-900 text-6xl font-bold font-['Inter']">1%</div>
                                </div>
                            </div>
                        </div>
                        <div className="flex-1 flex justify-center">
                            <div className="w-80 self-stretch inline-flex flex-col justify-start items-start">
                                <div className="self-stretch h-7 relative">
                                    <div className="w-36 left-[84px] top-0 absolute text-center justify-start text-black/40 text-2xl font-medium font-['Inter']">전기공사</div>
                                </div>
                                <div className="self-stretch inline-flex justify-start items-start">
                                    <div className="flex-1 h-16 text-center justify-end text-black/40 text-3xl font-medium font-['Inter']">지역</div>
                                    <div className="flex-1 self-stretch text-center justify-center text-blue-900 text-6xl font-semibold font-['Inter']">9위</div>
                                </div>
                                <div className="self-stretch inline-flex justify-start items-start">
                                    <div className="flex-1 h-16 text-center justify-end text-black/40 text-3xl font-medium font-['Inter']">상위</div>
                                    <div className="flex-1 self-stretch text-center justify-center text-blue-900 text-6xl font-semibold font-['Inter']">2%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Business;