"use client";

import CaseImageSlider from "@/components/CaseImageSlider";

type SewageCase = {
  id: string;
  title: string;
  slides: {
    src: string;
    alt: string;
  }[];
  projectName: string;
  purpose: string[];
  method?: string[];
  details: string[];
  note?: string[];
};

function SectionTitle({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex items-center gap-3">
      <span className="h-5 w-[3px] bg-sky-500" />
      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
    </div>
  );
}

function BlockTitle({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex items-center gap-2">
      <span className="relative inline-block h-[16px] w-[27px] align-middle">
        <span className="absolute left-0 top-0 h-[16px] w-[16px] rounded-full bg-[#01ACE5]/40" />
        <span className="absolute left-[7px] top-0 h-[16px] w-[16px] rounded-full bg-[#6DBB4F]/40" />
      </span>
      <h4 className="text-[20px] font-semibold text-[#1A1A1A]">{children}</h4>
    </div>
  );
}

function Hr({ className = "" }: { className?: string }) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
}

function InfoBlock({
  title,
  items,
}: {
  title: string;
  items?: string[];
}) {
  if (!items || items.length === 0) return null;

  return (
    <div>
      <BlockTitle>{title}</BlockTitle>
      <ul className="mt-4 list-disc space-y-2 pl-8 text-[16px] leading-[1.8] text-[#4F4F4F]">
        {items.map((item, index) => (
          <li key={`${title}-${index}`}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

function InfoList({ item }: { item: SewageCase }) {
  return (
    <div className="mt-10 space-y-9 px-10">
      <InfoBlock title="사업명" items={[item.projectName]} />
      <InfoBlock title="사업목적" items={item.purpose} />
      <InfoBlock title="사업방식" items={item.method} />
      <InfoBlock title="사업 주요 내용" items={item.details} />
      <InfoBlock title="특이사항" items={item.note} />
    </div>
  );
}

const sewageCases: SewageCase[] = [
  {
    id: "example-sewage-guri",
    title: "경기도 구리시",
    slides: [
      {
        src: "/images/landing/business/sewage/guri_01.png",
        alt: "구리시 도로자동청소시스템",
      },
      {
        src: "/images/landing/business/sewage/guri_02.png",
        alt: "구리시 도로자동청소시스템 위치도",
      },
      {
        src: "/images/landing/business/sewage/guri_03.png",
        alt: "구리시 도로자동청소시스템 위치도2",
      },
      {
        src: "/images/landing/business/sewage/guri_04.png",
        alt: "구리시 도로자동청소시스템 원리",
      },
    ],
    projectName: "구리시 도로자동청소시스템 설치사업",
    purpose: [
      "고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염 취약성 완화",
    ],
    details: [
      "총사업비 : 61억원",
      "위치 : 구리시 경춘로 및 갈매중앙로 일대 등",
      "관로 : 5.8km",
      "공급량 : 178㎥/일",
    ],
  },
  {
    id: "example-sewage-bucheon",
    title: "경기도 부천시",
    slides: [
      {
        src: "/images/landing/business/sewage/bucheon_01.png",
        alt: "부천시 하수 재이용수 생산시설",
      },
      {
        src: "/images/landing/business/sewage/bucheon_02.png",
        alt: "부천시 하수처리수 재이용 사례",
      },
    ],
    projectName: "부천시 하수 재이용수 생산시설 설치 운영",
    purpose: [
      "굴포하수처리시설 하수처리수 재이용수 생산시설 설치 운영을 통해 여월천 등 부천 관내 하천의 건천화 방지, 하천 생태계 보존 및 주민들에게 친수 공간 제공",
    ],
    details: [
      "총사업비 : 212억원",
      "위치 : 부천시 여월천, 삼정천, 심곡천 및 시민의 강",
      "관로 : 23.6km",
      "공급량 : 50,000㎥/일",
    ],
  },
  {
    id: "example-sewage-suwon",
    title: "경기도 수원시",
    slides: [
      {
        src: "/images/landing/business/sewage/suwon_01.png",
        alt: "수원시 황구지천1",
      },
      {
        src: "/images/landing/business/sewage/suwon_02.png",
        alt: "수원시 황구지천2",
      },
      {
        src: "/images/landing/business/sewage/suwon_03.png",
        alt: "수원시 황구지천 지도",
      },
    ],
    projectName: "수원시 황구지천 하수처리수 재이용사업",
    purpose: [
      "황구지천 공공하수처리시설 하수처리수 재이용사업으로 황구 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전",
    ],
    details: [
      "총사업비 : 110억원",
      "위치 : 수원시 권선구 호매실천, 금곡천",
      "관로 : 3.9km",
      "공급량 : 25,000㎥/일(하수처리시설 용량 : 45,000㎥/일)",
    ],
  },
  {
    id: "example-sewage-paju",
    title: "경기도 파주시",
    slides: [
      {
        src: "/images/landing/business/sewage/paju_01.png",
        alt: "파주시 하수처리수 시설 전경1",
      },
      {
        src: "/images/landing/business/sewage/paju_02.png",
        alt: "파주시 하수처리수 시설 전경2",
      },
    ],
    projectName: "파주시 하수처리수 재이용사업",
    purpose: [
      "운정 및 금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주LCD산업단지 내 3개 업체에 공업용수를 공급(LG디스플레이, 희성전자, 엔비텍)",
      "하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례",
    ],
    method: ["민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)"],
    details: [
      "총사업비 : 651억원",
      "위치 : 파주시 금촌동 714번지 일원",
      "관로 : 13.6km",
      "공급량 : 40,000㎥/일(시설용량 : 41,200㎥/일)",
    ],
  },
  {
    id: "example-sewage-pohang",
    title: "경상북도 포항시",
    slides: [
      {
        src: "/images/landing/business/sewage/pohang_01.png",
        alt: "포항시 하수처리수 전경1",
      },
      {
        src: "/images/landing/business/sewage/pohang_02.png",
        alt: "포항시 하수처리수 전경2",
      },
      {
        src: "/images/landing/business/sewage/pohang_03.png",
        alt: "포항시 하수처리수 재이용 공급계통",
      },
    ],
    projectName: "포항시 하수처리수 재이용사업",
    purpose: [
      "포항시 내 공단 개발 확대로 지속적이고 안정적인 공업용수 공급 추진(포스코, 동국산업 등)",
    ],
    method: ["민간투자사업(운영사 : ㈜포웰, 한국수자원공사)"],
    details: [
      "총사업비 : 1,400억원",
      "위치 : 포항시 남구 상도동 125번지 일원",
      "관로 : 11.7km",
      "공급량 : 100,000㎥/일(시설용량 : 100,000㎥/일)",
      "처리공법 : 전처리시설(U/F) + 주처리시설(R/O)",
    ],
  },
  {
    id: "example-sewage-ulsan",
    title: "울산광역시",
    slides: [
      {
        src: "/images/landing/business/sewage/ulsan_01.png",
        alt: "울산광역시 폐수처리수 전경1",
      },
      {
        src: "/images/landing/business/sewage/ulsan_02.png",
        alt: "울산광역시 폐수처리수 전경2",
      },
      {
        src: "/images/landing/business/sewage/ulsan_03.png",
        alt: "울산광역시 폐수처리수 시설1",
      },
      {
        src: "/images/landing/business/sewage/ulsan_04.png",
        alt: "울산광역시 폐수처리수 시설2",
      },
    ],
    projectName: "울산광역시 폐수처리수 재이용사업",
    purpose: [
      "’18년 갈수기시 낙동강 수질 악화로 울산석유화학단지 용수 공급 부족을 해소하기 위해 미포산단 내 한화케미칼 등 8개사 공업용수 공급",
    ],
    method: ["민간투자사업(시행사 :울산화이텍워터(주))"],
    details: [
      "총사업비 : 1,729억원",
      "위치 : 울산광역시 울주군 청량읍 상개로 14 일원",
      "관로 : 11.7km",
      "공급량 : 17,000㎥/일(시설용량 : 86,000㎥/일)",
      "처리공법 : 전처리시설(U/F) + 주처리시설(R/O, EDI)",
    ],
  },
  {
    id: "example-sewage-yeosu",
    title: "전라남도 여수시",
    slides: [
      {
        src: "/images/landing/business/sewage/yeosu_01.png",
        alt: "여수시 하수처리수 재이용시설1",
      },
      {
        src: "/images/landing/business/sewage/yeosu_02.png",
        alt: "여수시 하수처리수 재이용시설2",
      },
    ],
    projectName: "여수시 하수처리수 재이용사업",
    purpose: [
      "수요자가 원하는 양질의 공업용수를 저렴하게 공급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선을 위한 여수국가산단 내 공업용수 공급(GS칼텍스, YNCC 등)",
    ],
    method: ["민간투자사업(시행사 : 여수그린허브(주), 운영사 : 테크로스)"],
    details: [
      "총사업비 : 750억원",
      "위치 : 여수시 신월로 284 일원",
      "관로 : 18.6km",
      "공급량 : 50,000㎥/일(시설용량 : 50,000㎥/일)",
      "처리공법 : 전처리시설(U/F) + 주처리시설(R/O)",
    ],
  },
  {
    id: "example-sewage-boryeong",
    title: "충청남도 보령시",
    slides: [
      {
        src: "/images/landing/business/sewage/boryeong_01.png",
        alt: "보령시 하수처리수 재이용시설1",
      },
      {
        src: "/images/landing/business/sewage/boryeong_02.png",
        alt: "보령시 하수처리수 재이용시설2",
      },
    ],
    projectName: "보령시 하수처리수 재이용사업",
    purpose: [
      "한국중부발전(주)의 보령 및 신보령화력발전소에 10,000㎥/일의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진",
      "국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(기후에너지환경부, 충청남도, 보령시, 한국중부발전(주))를 바탕으로 추진되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모",
    ],
    method: ["재정사업(2017년 한국환경공단과 사업대행 위·수탁협약 체결)"],
    details: [
      "총사업비 : 315억원",
      "위치 : 보령시 대천방조제로 322 일원",
      "관로 : 8.7km",
      "공급량 : 10,000㎥/일(시설용량 : 10,000㎥/일)",
      "처리공법 : 전처리시설(U/F) + 주처리시설(R/O)",
    ],
    note: [
      "국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모",
    ],
  },
  {
    id: "example-sewage-asan",
    title: "충청남도 아산시",
    slides: [
      {
        src: "/images/landing/business/sewage/asan_01.png",
        alt: "아산시 하수처리수 재이용시설",
      },
      {
        src: "/images/landing/business/sewage/asan_02.png",
        alt: "아산시 하수처리수 재이용 공정도",
      },
    ],
    projectName: "아산시 하수처리수 재이용사업",
    purpose: [
      "신도시 개발에 따른 인구 급증으로 발생하는 하수를 재처리하여 탕정산업단지(삼성디스플레이)에 공업용수를 안정적으로 공급함으로써 지역기반 및 활성화를 도모",
    ],
    method: ["민간투자사업(시행사 : 아산스마트원터, 운영사 : 한국수자원공사)"],
    details: [
      "총사업비 : 297억원",
      "위치 : 아산시 탕정면 갈산리 807 일원",
      "관로 : 4.2km",
      "공급량 : 27,000㎥/일(시설용량 : 45,000㎥/일)",
      "처리공법 : 전처리시설(U/F) + 주처리시설(R/O)",
    ],
  },
];

export default function SewageExampleSection() {
  const title = "하수처리 재이용 사례";

  return (
    <div className="bg-white">
      <div className="inline-block">
        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
          <span className="relative z-10">{title}</span>
          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
        </h2>
      </div>

      <div className="mt-10 pb-[120px]">
        {sewageCases.map((item, index) => (
          <section key={item.id} id={item.id} className="scroll-mt-[120px]">
            <SectionTitle>{item.title}</SectionTitle>

            <CaseImageSlider
              className="mt-8"
              maxWidthClassName="max-w-[1240px]"
              slides={item.slides}
            />

            <InfoList item={item} />

            {index !== sewageCases.length - 1 && <Hr className="my-20" />}
          </section>
        ))}
      </div>
    </div>
  );
}