"use client";

import CaseImageSlider from "@/components/CaseImageSlider";

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 InfoList({
  projectName,
  purpose,
  details,
}: {
  projectName: string;
  purpose: string;
  details: string[];
}) {
  return (
    <div className="mt-10 space-y-9 px-10">
      <div>
        <BlockTitle>사업명</BlockTitle>
        <ul className="mt-4 list-disc pl-8 text-[16px] leading-[1.8] text-[#4F4F4F]">
          <li>{projectName}</li>
        </ul>
      </div>

      <div>
        <BlockTitle>사업목적</BlockTitle>
        <ul className="mt-4 list-disc pl-8 text-[16px] leading-[1.8] text-[#4F4F4F]">
          <li>{purpose}</li>
        </ul>
      </div>

      <div>
        <BlockTitle>사업 주요 내용</BlockTitle>
        <ul className="mt-4 list-disc pl-8 text-[16px] leading-[1.8] text-[#4F4F4F]">
          {details.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

type RainTableRow = {
  facility: string;
  storage: string;
  supply: string;
  pipe: string;
};

function RainTable({ rows }: { rows: RainTableRow[] }) {
  return (
    <div className="mt-8 overflow-x-auto">
      <table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
        <thead>
          <tr>
            <th className="border border-[#D8DDE3] bg-[#14A9D9] px-4 py-3 text-[18px] font-medium text-white">
              시설명
            </th>
            <th className="border border-[#D8DDE3] bg-[#39B2BD] px-4 py-3 text-[18px] font-medium text-white">
              저류조용량(㎥)
            </th>
            <th className="border border-[#D8DDE3] bg-[#58B99A] px-4 py-3 text-[18px] font-medium text-white">
              빗물공급기
            </th>
            <th className="border border-[#D8DDE3] bg-[#70BF4B] px-4 py-3 text-[18px] font-medium text-white">
              빗물분사장치(m)
            </th>
          </tr>
        </thead>

        <tbody>
          {rows.map((row, index) => (
            <tr key={`${row.facility}-${index}`}>
              <td className="border border-[#D8DDE3] bg-white px-4 py-3 text-[16px] text-[#4F4F4F]">
                {row.facility}
              </td>
              <td className="border border-[#D8DDE3] bg-white px-4 py-3 text-[16px] text-[#4F4F4F]">
                {row.storage}
              </td>

              {index === 0 && (
                <td
                  rowSpan={rows.length}
                  className="border border-[#D8DDE3] bg-white px-4 py-3 text-[16px] text-[#4F4F4F]"
                >
                  {row.supply}
                </td>
              )}

              <td className="border border-[#D8DDE3] bg-white px-4 py-3 text-[16px] text-[#4F4F4F]">
                {row.pipe}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default function RainExampleSection() {
  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]">
        <section id="example-rain-suwon" className="scroll-mt-[120px]">
          <SectionTitle>경기도 수원시</SectionTitle>

          <CaseImageSlider
            className="mt-8"
            maxWidthClassName="max-w-[1240px]"
            slides={[
              { src: "/images/landing/business/rain/suwon_01.png", alt: "수원시 빗물이용시설 사례 1" },
              { src: "/images/landing/business/rain/suwon_02.png", alt: "수원시 빗물이용시설 사례 2" },
              { src: "/images/landing/business/rain/suwon_03.png", alt: "수원시 빗물이용시설 사례 3" },
              { src: "/images/landing/business/rain/suwon_04.png", alt: "수원시 빗물이용시설 사례 4" },
              { src: "/images/landing/business/rain/suwon_05.png", alt: "수원시 빗물이용시설 사례 5" },
            ]}
          />

          <InfoList
            projectName="수원시 빗물이용시설 설치사업"
            purpose="월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물공급기를 설치하여 축서기 도시 열섬효과 및 도로 비산먼지 저감"
            details={[
              "총사업비 : 20억원",
              "위치 : 수원시 영통구, 팔달구 및 장안구 일원",
            ]}
          />

          <div className="mt-9 px-10">
            <BlockTitle>사업량</BlockTitle>

            <RainTable
              rows={[
                {
                  facility: "광교중학교",
                  storage: "4,500",
                  supply: "1대",
                  pipe: "160",
                },
                {
                  facility: "수원월드컵경기장",
                  storage: "12,000",
                  supply: "1대",
                  pipe: "451",
                },
                {
                  facility: "수원종합운동장",
                  storage: "10,000",
                  supply: "1대",
                  pipe: "231",
                },
                {
                  facility: "수원컨벤션센터",
                  storage: "3,600",
                  supply: "1대",
                  pipe: "460",
                },
              ]}
            />
          </div>
        </section>

        <Hr className="my-20" />

        <section id="example-rain-jeju" className="scroll-mt-[120px]">
          <SectionTitle>제주특별자치도</SectionTitle>

          <CaseImageSlider
            className="mt-8"
            maxWidthClassName="max-w-[1240px]"
            slides={[
              { src: "/images/landing/business/rain/jeju_01.png", alt: "제주특별자치도 빗물이용시설 사례 1" },
              { src: "/images/landing/business/rain/jeju_02.png", alt: "제주특별자치도 빗물이용시설 사례 2" },
              { src: "/images/landing/business/rain/jeju_03.png", alt: "제주특별자치도 빗물이용시설 사례 3" },
            ]}
          />

          <InfoList
            projectName="제주특별자치도 중규모 빗물이용시설 설치사업"
            purpose="강우시 비닐하우스에서 발생하는 대체수자원인 빗물을 순환 활용하고자 하는 사업으로, 지하수 사용 저감과 집중호우시 도로와 농경지 침수피해 예방"
            details={[
              "총사업비 : 278억원",
              "위치 : 제주특별자치도 서귀포시 남원읍 위미리 일원",
              "사업량 : 저류조 7,000㎥, 배수갑 500㎡, 관로 21.7km",
              "사업기간 : 2024. 5. ~ 2028. 12.",
            ]}
          />
        </section>
      </div>
    </div>
  );
}