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

const RankBox = (title: string, rank: string, topPercent: string) => (
    <div className="flex flex-col items-center justify-center w-full max-w-[280px] mx-auto">
        <div className="text-center text-black/40 text-xs sm:text-lg lg:text-2xl font-medium font-['Noto_Sans_KR'] mb-3 sm:mb-6 lg:mb-10">
            {title}
        </div>
        <div className="flex w-full justify-center items-center mb-2 sm:mb-4">
            <div className="text-black/40 text-sm sm:text-lg lg:text-3xl font-medium font-['Noto_Sans_KR'] mr-4 sm:mr-6">
                지역
            </div>
            <div className="text-blue-900 text-xl sm:text-3xl lg:text-6xl font-semibold font-['Noto_Sans_KR']">
                {rank}
            </div>
        </div>
        <div className="flex w-full justify-center items-center">
            <div className="text-black/40 text-sm sm:text-lg lg:text-3xl font-medium font-['Noto_Sans_KR'] mr-4 sm:mr-6">
                상위
            </div>
            <div className="text-blue-900 text-xl sm:text-3xl lg:text-6xl font-bold font-['Noto_Sans_KR']">
                {topPercent}
            </div>
        </div>
    </div>
);


const Business = () => {
    const { ref: businessRef, isVisible: businessVisible } = useScrollAnimation({ threshold: 0.1 });
    const { ref: rankRef, isVisible: rankVisible } = useScrollAnimation({ threshold: 0.1 });

    return (
        <div className="max-w-7xl mx-auto px-[2vw] py-[4vw] space-y-[5vw]">
            {/* 주요 사업 */}
            <div ref={businessRef} className={`transition-all duration-1000 ${businessVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                {/* 텍스트 영역 */}
                <div className="space-y-3 mb-8">
                    <div className="text-blue-900 text-2xl sm:text-3xl lg:text-4xl font-bold font-['Noto_Sans_KR']">반도산전 Business Solution</div>
                    <div className="text-zinc-500 text-sm sm:text-md font-bold font-['Noto_Sans_KR']">반도산전이 선도하는 힘</div>
                </div>

                {/* 이미지 영역 */}
                <div className="bg-white flex flex-wrap gap-2 sm:gap-[0.3vw] w-full">
                    {businessItems.map((item, index) => (
                        <a
                            key={index}
                            href={item.url}
                            className="relative flex-[0_0_calc(50%-4px)] sm:flex-[0_0_calc(33.33%-8px)] lg: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-2 sm:p-4">
                                <div className="text-white text-xs sm:text-sm lg:text-md font-bold font-['Noto_Sans_KR'] whitespace-pre-line">{item.label}</div>
                                <div className="text-white text-xs sm:text-sm font-bold font-['Noto_Sans_KR']">→</div>
                            </div>
                        </a>
                    ))}
                </div>
            </div>
            
            {/* 반도산전은 */}
            <div ref={rankRef} className={`transition-all duration-1000 ${rankVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                {/* 텍스트 영역 */}
                <div className="space-y-2 mb-2.5 pb-6 sm:pb-10">
                    <div className="text-2xl sm:text-3xl lg:text-4xl text-blue-900 font-bold font-['Noto_Sans_KR']">반도산전은</div>
                </div>
                <div>
                    <div className="text-center mb-10 sm:mb-15 px-4">
                        <div className="text-zinc-600 font-semibold font-['Noto_Sans_KR'] leading-loose sm:leading-[60px] text-xs sm:text-sm lg:text-lg xl:text-xl">
                            1997년부터 2025년까지 <span className="text-blue-900 text-lg sm:text-xl lg:text-2xl xl:text-3xl">27</span>년간 축적된 기술력과 신뢰를 바탕으로,
                        </div>
                        <div className="text-zinc-600 font-semibold font-['Noto_Sans_KR'] leading-loose sm:leading-[60px] text-xs sm:text-sm lg:text-lg xl:text-xl">
                            부산 · 울산 · 경남 시공능력평가 <span className="text-blue-900 text-lg sm:text-xl lg:text-2xl xl:text-3xl">1</span>위를 달성하였으며,
                        </div>
                        <div className="text-zinc-600 font-semibold font-['Noto_Sans_KR'] leading-loose sm:leading-[60px] text-xs sm:text-sm lg:text-lg xl:text-xl">
                            <span className="text-blue-900 text-lg sm:text-xl lg:text-2xl xl:text-3xl">947</span>억 매출을 달성한 외감법인입니다.
                        </div>
                    </div>
                    <div className="flex justify-center items-center lg:h-60 gap-4 lg:gap-8">
                        <div className="flex justify-center">
                            {RankBox("전기공사", "15위", "5%")}
                        </div>
                        
                        <div className="w-px h-16 lg:h-24 bg-gray-200"></div>
                        
                        <div className="flex flex-col lg:flex-row items-center gap-4 lg:gap-8">
                            <div className="flex justify-center items-center">
                                <svg width="40" height="41" viewBox="0 0 98 99" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-10 h-10 lg:w-16 lg:h-16">
                                    <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>
                            <div className="flex justify-center">
                                {RankBox("통신공사", "1위", "1%")}
                            </div>
                        </div>
                        
                        <div className="w-px h-16 lg:h-24 bg-gray-200"></div>
                        
                        <div className="flex justify-center">
                            {RankBox("전기공사", "9위", "2%")}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Business;