import React, {useState, useEffect} from 'react';
import DarkOverlay from "@/components/common/DarkOverlay.jsx";
import {IMAGE_PREFIX} from "@/constants";
import IndicatorDots from "@/components/common/IndicatorDots";
import {useScrollAnimation} from "@/hooks/useScrollAnimation";

const images = [
    `${IMAGE_PREFIX}/hero.jpg`,
    // '/hero2.png',
    `${IMAGE_PREFIX}/hero.jpg`,
];

const Hero = () => {
    const [currentImageIndex, setCurrentImageIndex] = useState(0);
    const { ref, isVisible } = useScrollAnimation({ threshold: 0.2 });

    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentImageIndex((prevIndex) =>
                prevIndex === images.length - 1 ? 0 : prevIndex + 1
            );
        }, 5000);

        return () => clearInterval(timer);
    }, [currentImageIndex]);

    const handleDotClick = (index: number) => {
        setCurrentImageIndex(index);
    };

    return (
        <div
            ref={ref}
            style={{ backgroundImage: `url(${images[currentImageIndex]})` }}
            className="relative w-full h-screen bg-cover bg-center inline-flex justify-center items-center"
        >
            <DarkOverlay />

            {/* 🔹 콘텐츠 */}
            <div className={`relative flex flex-col mt-15 gap-6 lg:gap-10 px-4 lg:px-0 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                <div className="text-center justify-center text-white text-3xl sm:text-3xl md:text-4xl lg:text-6xl font-semibold font-['Noto_Sans_KR']">
                    <div className="flex flex-col sm:flex-row justify-center items-center gap-1 sm:gap-2">
                        <span>스마트 네트워크 리더</span>
                        <span>반도산전</span>
                    </div>
                </div>
                <div className="self-stretch text-center justify-start text-zinc-100 font-normal font-['Noto_Sans_KR'] px-4 lg:px-0 space-y-2">
                    <div className="text-sm sm:text-base lg:text-lg xl:text-xl">부·울·경 시공능력평가 1위를 넘어</div>
                    <div className="text-sm sm:text-base lg:text-lg xl:text-xl">대한민국 시공능력평가 1위로 도약합니다.</div>
                    <div className="text-sm sm:text-base lg:text-lg xl:text-xl">고객의 스마트 네트워크 산업을</div>
                    <div className="text-sm sm:text-base lg:text-lg xl:text-xl">더욱 가치있게 만들어 나갑니다.</div>
                </div>
                <div className="self-stretch p-2.5 inline-flex justify-center items-center gap-4 overflow-hidden">
                    <div className="flex w-32 sm:w-36 lg:w-44 px-6 lg:px-8 py-3 outline outline-offset-[-0.5px] outline-white justify-center items-center overflow-hidden hover:bg-white group transition-all duration-300 cursor-pointer">
                        <div className="text-center justify-start text-white text-sm lg:text-base font-semibold font-['Noto_Sans_KR'] group-hover:text-blue-700">
                            ABOUT
                        </div>
                    </div>
                </div>
            </div>

            {/* 인디케이터 */}
            <div className="absolute bottom-[12vh]">
                <IndicatorDots
                  count={images.length}
                  activeIndex={currentImageIndex}
                  onClick={handleDotClick}
                />
            </div>
        </div>
    );
};

export default Hero;
