"use client";

import { useEffect, useRef } from "react";

export default function SewageExampleSection() {
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;

    const cleanups: Array<() => void> = [];
    const sliders = Array.from(root.querySelectorAll(".image-slider"));

    sliders.forEach((sliderElement) => {
      const slider = sliderElement as HTMLElement;
      const viewport = slider.querySelector(
        ".image-slider-viewport",
      ) as HTMLElement | null;
      const track = slider.querySelector(".image-slider-track") as HTMLElement | null;
      const dotsWrap = slider.querySelector(
        ".image-slider-dots",
      ) as HTMLElement | null;
      const pages = Array.from(
        slider.querySelectorAll(".image-slider-page"),
      ) as HTMLElement[];

      if (!viewport || !track || !dotsWrap || pages.length === 0) return;

      let page = 0;
      let dragging = false;
      let isHover = false;
      let startX = 0;
      let deltaX = 0;
      let timer: number | null = null;

      const autoPlayMs = Number(slider.dataset.autoplay ?? "4500");
      const canSlide = pages.length > 1;

      if (!canSlide) {
        dotsWrap.style.display = "none";
      } else {
        dotsWrap.style.display = "";
      }

      const render = () => {
        track.style.transform = `translateX(-${page * 100}%)`;

        Array.from(dotsWrap.querySelectorAll("button")).forEach((dot, index) => {
          dot.classList.toggle("is-active", index === page);
        });
      };

      const goTo = (nextPage: number) => {
        if (!canSlide) return;

        if (nextPage < 0) page = pages.length - 1;
        else if (nextPage >= pages.length) page = 0;
        else page = nextPage;

        render();
      };

      const stopTimer = () => {
        if (timer !== null) {
          window.clearInterval(timer);
          timer = null;
        }
      };

      const startTimer = () => {
        stopTimer();
        if (!canSlide || dragging || isHover) return;

        timer = window.setInterval(() => {
          page = page + 1 >= pages.length ? 0 : page + 1;
          render();
        }, autoPlayMs);
      };

      const dotButtons = pages.map((_, index) => {
        const button = document.createElement("button");
        button.type = "button";
        button.className = "image-slider-dot";

        const onClick = () => {
          goTo(index);
          startTimer();
        };

        button.addEventListener("click", onClick);
        dotsWrap.appendChild(button);

        cleanups.push(() => {
          button.removeEventListener("click", onClick);
        });

        return button;
      });

      const onMouseEnter = () => {
        isHover = true;
        stopTimer();
      };

      const onMouseLeave = () => {
        isHover = false;
        startTimer();
      };

      const onPointerDown = (event: PointerEvent) => {
        if (!canSlide) return;

        dragging = true;
        startX = event.clientX;
        deltaX = 0;
        viewport.setPointerCapture(event.pointerId);
      };

      const onPointerMove = (event: PointerEvent) => {
        if (!dragging) return;
        deltaX = event.clientX - startX;
      };

      const onPointerUp = () => {
        if (!dragging) return;

        dragging = false;

        if (deltaX > 50) goTo(page - 1);
        if (deltaX < -50) goTo(page + 1);

        deltaX = 0;
        startTimer();
      };

      viewport.addEventListener("mouseenter", onMouseEnter);
      viewport.addEventListener("mouseleave", onMouseLeave);
      viewport.addEventListener("pointerdown", onPointerDown);
      viewport.addEventListener("pointermove", onPointerMove);
      viewport.addEventListener("pointerup", onPointerUp);
      viewport.addEventListener("pointercancel", onPointerUp);

      cleanups.push(() => {
        stopTimer();
        viewport.removeEventListener("mouseenter", onMouseEnter);
        viewport.removeEventListener("mouseleave", onMouseLeave);
        viewport.removeEventListener("pointerdown", onPointerDown);
        viewport.removeEventListener("pointermove", onPointerMove);
        viewport.removeEventListener("pointerup", onPointerUp);
        viewport.removeEventListener("pointercancel", onPointerUp);
        dotButtons.forEach((button) => button.remove());
      });

      render();
      startTimer();
    });

    return () => {
      cleanups.forEach((cleanup) => cleanup());
    };
  }, []);

  const contentsHtml = `
    <div class="contents-page">
      <div class="page-title">
        <h2>
          <span class="title-text">하수처리수 재이용 사례</span>
          <span class="title-bg">&nbsp;</span>
        </h2>
      </div>

      <div class="sections sewage-example-sections">
        <section id="example-sewage-guri" class="section first">
          <div class="section-title">
            <span class="section-bar">&nbsp;</span>
            <h3>경기도 구리시</h3>
          </div>

          <div class="image-slider" data-autoplay="4500">
            <div class="image-slider-inner">
              <div class="image-slider-viewport">
                <div class="image-slider-track">
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/guri_01.png" alt="구리시 도로자동청소시스템" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/guri_02.png" alt="구리시 도로자동청소시스템 위치도" /></div>
                  </div>
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/guri_03.png" alt="구리시 도로자동청소시스템 위치도2" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/guri_04.png" alt="구리시 도로자동청소시스템 원리" /></div>
                  </div>
                </div>
              </div>
              <div class="image-slider-dots"></div>
            </div>
          </div>

          <div class="content-group">
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
              <ul class="bullet-list"><li>구리시 도로자동청소시스템 설치사업</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
              <ul class="bullet-list"><li>고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염 취약성 완화</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
              <ul class="bullet-list">
                <li>총사업비 : 61억원</li>
                <li>위치 : 구리시 경춘로 및 갈매중앙로 일대 등</li>
                <li>관로 : 5.8km</li>
                <li>공급량 : 178㎥/일</li>
              </ul>
            </div>
          </div>
        </section>

        <div class="divider"></div>

        <section id="example-sewage-bucheon" class="section">
          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>경기도 부천시</h3></div>
          <div class="image-slider" data-autoplay="4500">
            <div class="image-slider-inner">
              <div class="image-slider-viewport">
                <div class="image-slider-track">
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/bucheon_01.png" alt="부천시 하수 재이용수 생산시설" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/bucheon_02.png" alt="부천시 하수처리수 재이용 사례" /></div>
                  </div>
                </div>
              </div>
              <div class="image-slider-dots"></div>
            </div>
          </div>
          <div class="content-group">
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
              <ul class="bullet-list"><li>부천시 하수 재이용수 생산시설 설치 운영</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
              <ul class="bullet-list"><li>굴포하수처리시설 하수처리수 재이용수 생산시설 설치 운영을 통해 여월천 등 부천 관내 하천의 건천화 방지, 하천 생태계 보존 및 주민들에게 친수 공간 제공</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
              <ul class="bullet-list">
                <li>총사업비 : 212억원</li>
                <li>위치 : 부천시 여월천, 삼정천, 심곡천 및 시민의 강</li>
                <li>관로 : 23.6km</li>
                <li>공급량 : 50,000㎥/일</li>
              </ul>
            </div>
          </div>
        </section>

        <div class="divider"></div>

        <section id="example-sewage-suwon" class="section">
          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>경기도 수원시</h3></div>
          <div class="image-slider" data-autoplay="4500">
            <div class="image-slider-inner">
              <div class="image-slider-viewport">
                <div class="image-slider-track">
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/suwon_01.png" alt="수원시 황구지천1" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/suwon_02.png" alt="수원시 황구지천2" /></div>
                  </div>
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/suwon_03.png" alt="수원시 황구지천 지도" /></div>
                  </div>
                </div>
              </div>
              <div class="image-slider-dots"></div>
            </div>
          </div>
          <div class="content-group">
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
              <ul class="bullet-list"><li>수원시 황구지천 하수처리수 재이용사업</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
              <ul class="bullet-list"><li>황구지천 공공하수처리시설 하수처리수 재이용사업으로 황구 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
              <ul class="bullet-list">
                <li>총사업비 : 110억원</li>
                <li>위치 : 수원시 권선구 호매실천, 금곡천</li>
                <li>관로 : 3.9km</li>
                <li>공급량 : 25,000㎥/일(하수처리시설 용량 : 45,000㎥/일)</li>
              </ul>
            </div>
          </div>
        </section>

        <div class="divider"></div>

        <section id="example-sewage-paju" class="section">
          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>경기도 파주시</h3></div>
          <div class="image-slider" data-autoplay="4500">
            <div class="image-slider-inner">
              <div class="image-slider-viewport">
                <div class="image-slider-track">
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/paju_01.png" alt="파주시 하수처리수 시설 전경1" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/paju_02.png" alt="파주시 하수처리수 시설 전경2" /></div>
                  </div>
                </div>
              </div>
              <div class="image-slider-dots"></div>
            </div>
          </div>
          <div class="content-group">
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
              <ul class="bullet-list"><li>파주시 하수처리수 재이용사업</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
              <ul class="bullet-list">
                <li>운정 및 금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주LCD산업단지 내 3개 업체에 공업용수를 공급(LG디스플레이, 희성전자, 엔비텍)</li>
                <li>하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례</li>
              </ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
              <ul class="bullet-list"><li>민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
              <ul class="bullet-list">
                <li>총사업비 : 651억원</li>
                <li>위치 : 파주시 금촌동 714번지 일원</li>
                <li>관로 : 13.6km</li>
                <li>공급량 : 40,000㎥/일(시설용량 : 41,200㎥/일)</li>
              </ul>
            </div>
          </div>
        </section>

        <div class="divider"></div>

        <section id="example-sewage-pohang" class="section">
          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>경상북도 포항시</h3></div>
          <div class="image-slider" data-autoplay="4500">
            <div class="image-slider-inner">
              <div class="image-slider-viewport">
                <div class="image-slider-track">
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/pohang_01.png" alt="포항시 하수처리수 전경1" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/pohang_02.png" alt="포항시 하수처리수 전경2" /></div>
                  </div>
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/pohang_03.png" alt="포항시 하수처리수 재이용 공급계통" /></div>
                  </div>
                </div>
              </div>
              <div class="image-slider-dots"></div>
            </div>
          </div>
          <div class="content-group">
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
              <ul class="bullet-list"><li>포항시 하수처리수 재이용사업</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
              <ul class="bullet-list"><li>포항시 내 공단 개발 확대로 지속적이고 안정적인 공업용수 공급 추진(포스코, 동국산업 등)</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
              <ul class="bullet-list"><li>민간투자사업(운영사 : ㈜포웰, 한국수자원공사)</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
              <ul class="bullet-list">
                <li>총사업비 : 1,400억원</li>
                <li>위치 : 포항시 남구 상도동 125번지 일원</li>
                <li>관로 : 11.7km</li>
                <li>공급량 : 100,000㎥/일(시설용량 : 100,000㎥/일)</li>
                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
              </ul>
            </div>
          </div>
        </section>

        <div class="divider"></div>

        <section id="example-sewage-ulsan" class="section">
          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>울산광역시</h3></div>
          <div class="image-slider" data-autoplay="4500">
            <div class="image-slider-inner">
              <div class="image-slider-viewport">
                <div class="image-slider-track">
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/ulsan_01.png" alt="울산광역시 폐수처리수 전경1" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/ulsan_02.png" alt="울산광역시 폐수처리수 전경2" /></div>
                  </div>
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/ulsan_03.png" alt="울산광역시 폐수처리수 시설1" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/ulsan_04.png" alt="울산광역시 폐수처리수 시설2" /></div>
                  </div>
                </div>
              </div>
              <div class="image-slider-dots"></div>
            </div>
          </div>
          <div class="content-group">
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
              <ul class="bullet-list"><li>울산광역시 폐수처리수 재이용사업</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
              <ul class="bullet-list"><li>’18년 갈수기시 낙동강 수질 악화로 울산석유화학단지 용수 공급 부족을 해소하기 위해 미포산단 내 한화케미칼 등 8개사 공업용수 공급</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
              <ul class="bullet-list"><li>민간투자사업(시행사 :울산화이텍워터(주))</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
              <ul class="bullet-list">
                <li>총사업비 : 1,729억원</li>
                <li>위치 : 울산광역시 울주군 청량읍 상개로 14 일원</li>
                <li>관로 : 11.7km</li>
                <li>공급량 : 17,000㎥/일(시설용량 : 86,000㎥/일)</li>
                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O, EDI)</li>
              </ul>
            </div>
          </div>
        </section>

        <div class="divider"></div>

        <section id="example-sewage-yeosu" class="section">
          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>전라남도 여수시</h3></div>
          <div class="image-slider" data-autoplay="4500">
            <div class="image-slider-inner">
              <div class="image-slider-viewport">
                <div class="image-slider-track">
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/yeosu_01.png" alt="여수시 하수처리수 재이용시설1" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/yeosu_02.png" alt="여수시 하수처리수 재이용시설2" /></div>
                  </div>
                </div>
              </div>
              <div class="image-slider-dots"></div>
            </div>
          </div>
          <div class="content-group">
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
              <ul class="bullet-list"><li>여수시 하수처리수 재이용사업</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
              <ul class="bullet-list"><li>수요자가 원하는 양질의 공업용수를 저렴하게 공급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선을 위한 여수국가산단 내 공업용수 공급(GS칼텍스, YNCC 등)</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
              <ul class="bullet-list"><li>민간투자사업(시행사 : 여수그린허브(주), 운영사 : 테크로스)</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
              <ul class="bullet-list">
                <li>총사업비 : 750억원</li>
                <li>위치 : 여수시 신월로 284 일원</li>
                <li>관로 : 18.6km</li>
                <li>공급량 : 50,000㎥/일(시설용량 : 50,000㎥/일)</li>
                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
              </ul>
            </div>
          </div>
        </section>

        <div class="divider"></div>

        <section id="example-sewage-boryeong" class="section">
          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>충청남도 보령시</h3></div>
          <div class="image-slider" data-autoplay="4500">
            <div class="image-slider-inner">
              <div class="image-slider-viewport">
                <div class="image-slider-track">
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/boryeong_01.png" alt="보령시 하수처리수 재이용시설1" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/boryeong_02.png" alt="보령시 하수처리수 재이용시설2" /></div>
                  </div>
                </div>
              </div>
              <div class="image-slider-dots"></div>
            </div>
          </div>
          <div class="content-group">
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
              <ul class="bullet-list"><li>보령시 하수처리수 재이용사업</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
              <ul class="bullet-list">
                <li>한국중부발전(주)의 보령 및 신보령화력발전소에 10,000㎥/일의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진</li>
                <li>국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(기후에너지환경부, 충청남도, 보령시, 한국중부발전(주))를 바탕으로 추진되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모</li>
              </ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
              <ul class="bullet-list"><li>재정사업(2017년 한국환경공단과 사업대행 위·수탁협약 체결)</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
              <ul class="bullet-list">
                <li>총사업비 : 315억원</li>
                <li>위치 : 보령시 대천방조제로 322 일원</li>
                <li>관로 : 8.7km</li>
                <li>공급량 : 10,000㎥/일(시설용량 : 10,000㎥/일)</li>
                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
              </ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>특이사항</h4></div>
              <ul class="bullet-list"><li>국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모</li></ul>
            </div>
          </div>
        </section>

        <div class="divider"></div>

        <section id="example-sewage-asan" class="section">
          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>충청남도 아산시</h3></div>
          <div class="image-slider" data-autoplay="4500">
            <div class="image-slider-inner">
              <div class="image-slider-viewport">
                <div class="image-slider-track">
                  <div class="image-slider-page">
                    <div class="image-slide"><img src="/images/landing/business/sewage/asan_01.png" alt="아산시 하수처리수 재이용시설" /></div>
                    <div class="image-slide"><img src="/images/landing/business/sewage/asan_02.png" alt="아산시 하수처리수 재이용 공정도" /></div>
                  </div>
                </div>
              </div>
              <div class="image-slider-dots"></div>
            </div>
          </div>
          <div class="content-group">
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
              <ul class="bullet-list"><li>아산시 하수처리수 재이용사업</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
              <ul class="bullet-list"><li>신도시 개발에 따른 인구 급증으로 발생하는 하수를 재처리하여 탕정산업단지(삼성디스플레이)에 공업용수를 안정적으로 공급함으로써 지역기반 및 활성화를 도모</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
              <ul class="bullet-list"><li>민간투자사업(시행사 : 아산스마트원터, 운영사 : 한국수자원공사)</li></ul>
            </div>
            <div class="content-block">
              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
              <ul class="bullet-list">
                <li>총사업비 : 297억원</li>
                <li>위치 : 아산시 탕정면 갈산리 807 일원</li>
                <li>관로 : 4.2km</li>
                <li>공급량 : 27,000㎥/일(시설용량 : 45,000㎥/일)</li>
                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
              </ul>
            </div>
          </div>
        </section>
      </div>
    </div>
  `;

  return (
    <div
      ref={rootRef}
      className="bg-white"
      dangerouslySetInnerHTML={{ __html: contentsHtml }}
    />
  );
}