frontend/apps/dm/app/(with-layout)/example/_components/SewageExampleSection.tsx

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

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 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">
        <section id="example-sewage-bolyeong" className="scroll-mt-[120px]">
            <SectionTitle>충청남도 보령시</SectionTitle>

            <CaseImageSlider
                className="mt-8"
                maxWidthClassName="max-w-[760px]"
                slides={[
                    {
                    src: "/images/landing/business/sewage/bolyeong_01.png",
                    alt: "보령시 하수 재이용 1",
                    },
                ]}
            />

            <section className="mt-6">
                <SectionTitle>사업명</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    충남 보령 하수재이용
                    <br />: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해
                    보령하수처리시설의 하수처리수 재이용 사업 추진
                </p>
            </section>

            <Hr className="my-11" />

            <section className="mt-6">
                <SectionTitle>사업 방식</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
                </p>
            </section>

            <section className="mt-6">
                <SectionTitle>사업 주요 내용</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    처리공정 : 전처리 UF + 후처리 RO
                    <br />
                    시설용량 : 1만m³/일
                    <br />
                    관로 : 8.7km
                    <br />
                    사업비 : 315억원
                    <br />
                    위치: 충청남도 보령시 대청방조제로 322 일원
                </p>
            </section>

            <Hr className="my-11" />

            <section>
                <SectionTitle>특이사항</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권
                    가뭄 시 지역사회 기여 차원에서 기관간 MOU를 바탕으로 추진
                </p>
            </section>
        </section>

        <Hr className="my-16" />

        <section id="example-sewage-cheongju" className="scroll-mt-[120px]">
            <SectionTitle>청주시</SectionTitle>

            <CaseImageSlider
                className="mt-8"
                maxWidthClassName="max-w-[760px]"
                slides={[
                    {
                    src: "/images/landing/business/sewage/cheongju_01.png",
                    alt: "청주시 하수 재이용 1",
                    },
                ]}
            />

            <section className="mt-6">
                <SectionTitle>사업명</SectionTitle>
                <p className="mt-8 text-base text-gray-600">청주시 하수 재이용 시설</p>
            </section>

            <Hr className="my-11" />

            <section>
                <SectionTitle>사업 주요 내용</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    청주시 하수처리수 재이용 민간투자사업(BTO)
                    <br />
                    공급량 : 35,000㎥/일
                    <br />
                    공급관로 : 8.3㎞
                    <br />
                    사업비 : 622억원
                    <br />
                    수요처 : SK하이닉스 등 일반산업단지
                    <br />
                    지역 : 충청북도 청주시 흥덕구 가락리 135-9번지 일원
                    <br />
                    적용기술 : 분리막 UF, RO
                </p>
            </section>
        </section>

        <Hr className="my-16" />

        <section id="example-sewage-guri" className="scroll-mt-[120px]">
            <SectionTitle>구리시 도로자동청소시스템</SectionTitle>

            <CaseImageSlider
                className="mt-8"
                maxWidthClassName="max-w-[760px]"
                slides={[
                    {
                    src: "/images/landing/business/sewage/guri_01.png",
                    alt: "구리시 도로자동청소시스템 1",
                    },
                    {
                    src: "/images/landing/business/sewage/guri_02.png",
                    alt: "구리시 도로자동청소시스템 2",
                    },
                ]}
            />

            <section className="mt-6">
                <SectionTitle>사업명</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    구리시 도로자동청소시스템 설치사업
                </p>
            </section>

            <Hr className="my-11" />

            <section className="mt-6">
                <SectionTitle>사업목적</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여
                    미세먼지 저감 및 폭염 취약성 완화
                </p>
            </section>
        </section>

        <Hr className="my-16" />

        <section id="example-sewage-hwanggu" className="scroll-mt-[120px]">
            <SectionTitle>수원시 황구지천</SectionTitle>

            <CaseImageSlider
                className="mt-8"
                maxWidthClassName="max-w-[760px]"
                slides={[
                    {
                    src: "/images/landing/business/sewage/hwanggu_01.png",
                    alt: "수원시 황구지천 하수 재이용 1",
                    },
                    {
                    src: "/images/landing/business/sewage/hwanggu_02.png",
                    alt: "수원시 황구지천 하수 재이용 2",
                    },
                    {
                    src: "/images/landing/business/sewage/hwanggu_03.png",
                    alt: "수원시 황구지천 하수 재이용 3",
                    },
                ]}
            />

            <section className="mt-6">
                <SectionTitle>사업명</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    수원시 황구지천 하수처리수 재이용사업
                </p>
            </section>
        </section>

        <Hr className="my-16" />

        <section id="example-sewage-paju" className="scroll-mt-[120px]">
            <SectionTitle>파주시</SectionTitle>

            <CaseImageSlider
                className="mt-8"
                maxWidthClassName="max-w-[760px]"
                slides={[
                    {
                    src: "/images/landing/business/sewage/paju_01.png",
                    alt: "파주시 하수 재이용 1",
                    },
                ]}
            />

            <section className="mt-6">
                <SectionTitle>사업명</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    경기도 파주시 하수재이용
                    <br />
                    운정·금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주 LCD
                    산업단지에 공업용수 공급
                </p>
            </section>
        </section>

        <Hr className="my-16" />

        <section id="example-sewage-yeosu" className="scroll-mt-[120px]">
            <SectionTitle>여수시</SectionTitle>

            <CaseImageSlider
                className="mt-8"
                maxWidthClassName="max-w-[760px]"
                slides={[
                    {
                    src: "/images/landing/business/sewage/yeosu_01.png",
                    alt: "여수시 하수 재이용 1",
                    },
                ]}
            />

            <section className="mt-6">
                <SectionTitle>사업명</SectionTitle>
                <p className="mt-8 text-base text-gray-600">
                    여수시 하수처리수 재이용 민간 투자사업(BTO)
                </p>
            </section>
        </section>
      </div>
    </div>
  );
}