import React from 'react';
import projectList from '@/data/project';
import {useScrollAnimation} from "@/hooks/useScrollAnimation";

const Project = () => {
    const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });

    return (
        <div ref={ref} className="w-full py-8 sm:py-12 px-4 sm:px-10 bg-blue-900">
            <div className={`max-w-7xl mx-auto transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                <div className="pb-5">
                    <div className="text-white text-2xl sm:text-3xl lg:text-4xl font-semibold font-['Noto_Sans_KR']">주요 랜드마크 프로젝트 시공현장</div>
                </div>

                {/* cardList */}
                <div className="relative grid grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 lg:gap-x-8 gap-y-6 sm:gap-y-8 lg:gap-y-10 mt-6 sm:mt-8 lg:mt-10">
                    {projectList.map((project, index) => (
                        <div key={index} className="relative shadow-lg group cursor-pointer">
                            {/* 그라디언트 오버레이 */}
                            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60"/>

                            <img
                                src={project.imageUrl}
                                alt={project.title}
                                className="w-full aspect-[4/3] object-cover"
                            />

                            <div className="">
                                <h3 className='absolute z-10 left-3 sm:left-6 top-[77%] group-hover:top-[30%] transition-all duration-500 ease-in-out text-sm sm:text-base lg:text-lg text-white font-semibold'>
                                    {project.title}
                                </h3>
                                <div className="absolute z-10 left-3 sm:left-6 top-[85%] text-xs text-white leading-7">MORE +
                                </div>
                            </div>

                            <div className="absolute inset-0 bg-gradient-to-t from-black/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out flex flex-col justify-center">
                                {project.description && (
                                    <div className="absolute left-3 right-3 sm:left-6 sm:right-6 top-[60%] group-hover:top-[40%] transition-all duration-500 ease-in-out">
                                        <p className="text-sm text-white leading-8 whitespace-pre-line">
                                            발주처 : {project.client}
                                        </p>
                                        <p className="text-sm text-white leading-8 whitespace-pre-line">
                                            {project.description}
                                        </p>
                                        <p className="text-sm text-white leading-8 whitespace-pre-line">
                                            계약금액 : {project.contractAmount}
                                        </p>
                                    </div>
                                )}
                            </div>
                        </div>
                    ))}
                </div>

                <div className="flex justify-center items-center my-12 sm:my-16 lg:my-20">
                    <div className="w-32 sm:w-36 lg:w-44 px-6 lg:px-8 py-3 outline outline-white">
                        <div className="text-center text-white text-sm lg:text-base font-semibold font-['Noto_Sans_KR']">MORE</div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Project;