import React from 'react';
import DarkOverlay from "@/components/common/DarkOverlay.jsx";
import businessItems from '@/data/business';

const RankBox = (title: string, rank: string, topPercent: string) => (
    <div className="w-80 inline-flex flex-col">
        <div className="h-7 mb-10 relative">
            <div className="w-36 left-[84px] top-0 absolute text-center justify-start text-black/40 text-2xl font-medium font-['Inter']">
                {title}
            </div>
        </div>
        <div className="inline-flex">
            <div className="flex-1 h-16 flex items-center justify-center text-black/40 text-3xl font-medium font-['Inter']">
                지역
            </div>
            <div className="flex-1 h-16 flex items-center justify-center text-blue-900 text-6xl font-semibold font-['Inter']">
                {rank}
            </div>
        </div>
        <div className="inline-flex">
            <div className="flex-1 h-16 flex items-center justify-center text-black/40 text-3xl font-medium font-['Inter']">
                상위
            </div>
            <div className="flex-1 h-16 flex items-center justify-center text-blue-900 text-6xl font-bold font-['Inter']">
                {topPercent}
            </div>
        </div>
    </div>
);


const Business = () => {
    return (
        <div className="max-w-7xl mx-auto px-[2vw] py-[4vw] space-y-[5vw]">
            {/* 주요 사업 */}
            <div>
                {/* 텍스트 영역 */}
                <div className="space-y-3 mb-8">
                    <div className="text-blue-900 text-4xl font-bold font-['Inter']">반도산전 Business Solution</div>
                    <div className="text-zinc-500 text-md 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-md font-bold font-['Inter'] whitespace-pre-line">{item.label}</div>
                                <div className="text-white text-sm font-bold font-['Inter']">→</div>
                            </div>
                        </a>
                    ))}
                </div>
            </div>
            
            {/* 반도산전은 */}
            <div>
                {/* 텍스트 영역 */}
                <div className="space-y-2 mb-2.5 pb-10">
                    <div className="text-4xl text-blue-900 font-bold font-['Inter']">반도산전은</div>
                </div>
                <div>
                    <div className="text-center mb-15">
                        <span className="text-zinc-600 font-semibold font-['Inter'] leading-[60px] text-xl">1997년부터 2025년까지 </span>
                        <span className="text-blue-900 font-semibold font-['Inter'] leading-[60px] text-4xl">27</span>
                        <span className="text-zinc-600 font-semibold font-['Inter'] leading-[60px] text-xl">년간 축적된 기술력과 신뢰를 바탕으로,<br/>부산  ·  울산  ·  경남 시공능력평가 </span>
                        <span className="text-blue-900 font-semibold font-['Inter'] leading-[60px] text-4xl">1</span>
                        <span className="text-zinc-600 font-semibold font-['Inter'] leading-[60px] text-xl">위를 달성하였으며,<br/></span>
                        <span className="text-blue-900 font-semibold font-['Inter'] leading-[60px] text-4xl">947</span>
                        <span className="text-zinc-600 font-semibold font-['Inter'] leading-[60px] text-xl">억 매출을 달성한 외감법인입니다.</span>
                    </div>
                    <div className="flex h-60 items-center">
                        <div className="flex-1 flex justify-center">
                            {RankBox("전기공사", "15위", "5%")}
                        </div>
                        <div className="border-x-2 border-gray-300 mx-8 flex-1 flex justify-center items-center">
                            <div className="pl-4 inline-flex justify-start items-center">
                                <svg width="98" height="99" viewBox="0 0 98 99" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M40.8333 45.4166H65.3333L89.7925 4.58325H65.2925L40.8333 45.4166Z" fill="#1E3A8A"/>
                                    <path d="M57.1258 45.4166H32.6258L8.16666 4.58325H32.6667L57.1258 45.4166Z" fill="#1E3A8A"/>
                                    <path d="M49 94.4167C64.7862 94.4167 77.5833 81.6195 77.5833 65.8333C77.5833 50.0472 64.7862 37.25 49 37.25C33.2139 37.25 20.4167 50.0472 20.4167 65.8333C20.4167 81.6195 33.2139 94.4167 49 94.4167Z" fill="#E7ECEF"/>
                                </svg>
                            </div>
                            {RankBox("통신공사", "1위", "1%")}
                        </div>
                        <div className="flex-1 flex justify-center">
                            {RankBox("전기공사", "9위", "2%")}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Business;