"use client";

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}`} />;
}

type SupplyRow = {
  facility: string;
  usage: string;
  amount: string;
};

function SupplyTable({ rows }: { rows: SupplyRow[] }) {
  return (
    <div className="mt-8 px-10">
      <table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
        <thead>
          <tr>
            <th className="border border-[#D8DDE3] bg-[#14A9D9] px-4 py-2 text-[18px] font-medium text-white">
              시설명
            </th>
            <th className="border border-[#D8DDE3] bg-[#40B5A5] px-4 py-2 text-[18px] font-medium text-white">
              이용용도
            </th>
            <th className="border border-[#D8DDE3] bg-[#73BF4B] px-4 py-2 text-[18px] font-medium text-white">
              공급량(㎥)
            </th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row, index) => (
            <tr key={`${row.facility}-${index}`}>
              <td className="border border-[#D8DDE3] bg-white px-4 py-2 text-[16px] text-[#4F4F4F]">
                {row.facility}
              </td>
              <td className="border border-[#D8DDE3] bg-white px-4 py-2 text-[16px] text-[#4F4F4F]">
                {row.usage}
              </td>
              <td className="border border-[#D8DDE3] bg-white px-4 py-2 text-[16px] text-[#4F4F4F]">
                {row.amount}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function InfoList({
  projectName,
  purpose,
  totalCost,
  treatment,
}: {
  projectName: string;
  purpose: string;
  totalCost: string;
  treatment: string;
}) {
  return (
    <div className="mt-10 space-y-10 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]">
          <li>총사업비 : {totalCost}</li>
          <li>처리공법 : {treatment}</li>
        </ul>
      </div>

      <div>
        <BlockTitle>사업량</BlockTitle>
      </div>
    </div>
  );
}

export default function GreywaterExampleSection() {
  const title = "중수 재이용 사례";
  return (
    <div className="bg-white">
      {/* 상단 타이틀 */}
      <div className="inline-block">
        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
            <span className="relative z-10">{title}</span>
            <span className="absolute left-0 bottom-[-4px] 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-greywater-ansan" className="scroll-mt-[120px]">
            <SectionTitle>경기도 안산시</SectionTitle>

            <InfoList
            projectName="안산시 중수도 설치사업"
            purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
            totalCost="81억원"
            treatment="MBLM공법"
            />

            <SupplyTable
            rows={[
                { facility: "경기테크노파크", usage: "청소·화장실용수", amount: "40㎥/일" },
                { facility: "올림픽수영장", usage: "청소·화장실/세척·살수용수", amount: "35㎥/일" },
                { facility: "와스타디움", usage: "청소·화장실/조경용수", amount: "90㎥/일" },
                { facility: "호수실내수영장", usage: "청소·화장실/조경/세척·살수용수", amount: "50㎥/일" },
                { facility: "한양대학교 에리카캠퍼스", usage: "청소·화장실용수", amount: "370㎥/일" },
            ]}
            />
        </section>

        <Hr className="my-20" />

        <section id="example-greywater-yongin" className="scroll-mt-[120px]">
            <SectionTitle>경기도 용인시</SectionTitle>

            <InfoList
            projectName="용인시 중수도 설치사업"
            purpose="물 부족 등의 비상상황에 대한 대비, 하수라도 사용할 집결 등 수자원의 효율적 활용"
            totalCost="40억원"
            treatment="MBLM공법"
            />

            <SupplyTable
            rows={[
                { facility: "여성회관", usage: "청소·화장실용수", amount: "35㎥/일" },
                { facility: "수지아르피아", usage: "청소·화장실용수", amount: "35㎥/일" },
                { facility: "지상작전사령부", usage: "청소·화장실/조경/세척·살수용수", amount: "53㎥/일" },
            ]}
            />
        </section>

        <Hr className="my-20" />

        <section id="example-greywater-pyeongtaek" className="scroll-mt-[120px]">
            <SectionTitle>경기도 평택시</SectionTitle>

            <InfoList
            projectName="평택시 중수도 설치사업"
            purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
            totalCost="21억원"
            treatment="MBLM공법"
            />

            <SupplyTable
            rows={[
                {
                facility: "평택대학교",
                usage: "청소·화장실용수",
                amount: "50㎥/일",
                },
            ]}
            />
        </section>
      </div>
    </div>
  );
}