import React, { useState } from 'react';
import businessItems from "@/data/business";
import type { BusinessItem } from "@/data/business";
import DarkOverlay from "@/components/common/DarkOverlay";


const Landmarks = () => {
  const [selectedItem, setSelectedItem] = useState<BusinessItem | null>(null);

  return (
    <div className="relative h-[1453px] px-6 py-10 flex-col">
      <div className="relative grid grid-cols-5 gap-2 w-7xl mx-auto h-44 bg-white">
        {businessItems.map((item, index) => (
          <div
            key={index}
            className="relative bg-gray-100 bg-cover bg-center cursor-pointer"
            style={{backgroundImage: `url(${item.image})`}}
            onClick={() => setSelectedItem(item)}
          >
            <DarkOverlay/>
            <div className="relative p-2">
              <div className="text-white text-lg font-semibold font-['Inter']">{item.label}</div>
            </div>
          </div>
        ))}
      </div>


      {selectedItem && (
        <>
          {/* 타이틀 */}
          <div className="h-60 flex flex-col my-10 justify-center items-center gap-9">
            <div
              className="text-center justify-center text-neutral-800 text-5xl font-extrabold font-['Inter'] leading-10">{selectedItem?.label}</div>
            <div
              className="text-center justify-center text-neutral-800 text-2xl font-medium font-['Inter'] leading-10 whitespace-pre-line">{selectedItem?.description}</div>
          </div>

          {/* 그림 및 설명 */}
          <div className="max-w-7xl mx-auto h-96 bg-zinc-300/75 flex">
            <div className="w-1/2 h-full">
              <img
                className="w-full h-full object-cover"
                src={selectedItem.image}
                alt="image"
              />
            </div>
            <div className="w-1/2 flex items-center justify-center px-4">
              <div className="text-black text-xl font-light font-['Noto_Sans_KR'] leading-9 whitespace-pre-line">
                {selectedItem?.description2}
              </div>
            </div>
          </div>

          {/* 중간 타이틀 */}
          <div className="h-28 flex flex-col justify-center my-10 items-center gap-9">
            <div
              className="text-center justify-center text-neutral-800 text-2xl font-medium font-['Inter'] leading-10">대표공사실적
            </div>
          </div>

          {/* 그외 밑에 */}
          <div className="relative max-w-7xl mx-auto h-128 justify-start items-start">
            <div className="flex items-end w-full h-full px-4 py-3 bg-gradient-to-b from-white/0 to-black/80 gap-0.5">
              <div className="text-white text-2xl font-bold font-['Inter']">
                BNK 경남은행 전산 & 데이터센터
              </div>
            </div>

            {/* 왼쪽 화살표 */}
            <div className="absolute left-10 top-1/2 -translate-y-1/2 w-24 h-24 flex items-center justify-center">
              <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
                <span className="text-black text-lg font-thin font-['Inter']">{'<'}</span>
              </div>
            </div>

            {/* 오른쪽 화살표 */}
            <div className="absolute right-10 top-1/2 -translate-y-1/2 w-24 h-24 flex items-center justify-center">
              <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
                <span className="text-black text-lg font-thin font-['Inter']">{'>'}</span>
              </div>
            </div>

            {/* 인디케이터 */}
            <div className="py-10 flex justify-center items-center gap-2">
              <div className="w-2 h-2 relative bg-blue-900 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
              <div className="w-2 h-2 relative bg-blue-900/20 rounded"/>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default Landmarks;
