frontend/apps/dm/app/(base-layout)/pages/wrOverview/page.tsx

import Image from "next/image";

export default function WrOverviewPage() {
  return (
    <div className="bg-[#F2F2F2]">
        <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
          {/* 카드 1 - 물재이용 사업 추진 절차 */}
          <div className="card-wrap mb-24" id="card1">
            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
              물재이용 사업 추진 절차 
            </h2>
            <div className="bg-white border border-gray-300 rounded-xl p-[60px] py-[50px]">
              <table className="table-fixed w-full text-center text-sm">
                <caption className="sr-only">물 재이용 추진 절차 상세 표</caption>
                <colgroup>
                  <col style={{ width: "28%" }} />
                  <col style={{ width: "2%" }} />
                  <col style={{ width: "35%" }} />
                  <col style={{ width: "5%" }} />
                  <col style={{ width: "30%" }} />
                </colgroup>
                <tbody>
                  {/* 1단계 */}
                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">타당성 조사</td><td></td><td></td></tr>
                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
                  {/* 2단계 */}
                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">매칭시스템 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">사업계획(안) 수립</td><td></td><td></td></tr>
                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
                  {/* 3단계 */}
                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">하수도정보시스템 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">국고지원 신청</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
                  {/* 4단계 */}
                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">국고지원 확정 통보</td><td></td><td></td></tr>
                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
                  {/* 5단계 */}
                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">사업계획 수립(실시설계)</td><td></td><td></td></tr>
                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
                  {/* 6단계 */}
                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">재원협의(지방환경관서장)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
                  {/* 7단계 */}
                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">설치승인(시도지사)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
                  {/* 8단계 */}
                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">공사시행</td><td></td><td></td></tr>
                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
                  {/* 9단계 */}
                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">준공(국고정산)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* 카드 2 - 물재이용 매칭 시스템 */}
          <div className="mt-36 card-wrap mb-24" id="card2">
            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
              물재이용 매칭 시스템이란?
            </h2>
            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
              {/* 개요 */}
              <section>
                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">개요</h2>
                <p className="font-NotoSansKR text-2xl font-bold text-gray-800 leading-relaxed">
                  기후변화 및 지자체의 개발속도 차이에 따라 물 자원의 수요-공급 불균형이 발생하여 빗물, 중수도, 하수처리 재처리수 등의 공급 여유가 있는 지자체의 재이용수를 부족한 지자체 수요처에 공급하여 불균형 해소를 통한 수자원 절약 및 물 자원 순환
                </p>
              </section>

              {/* 구성 */}
              <section className="mt-8">
                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">구성</h2>
                <ul className=" font-NotoSansKR list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2">
                  <li>공급자: 하수처리장, 빗물이용시설, 중수도 등</li>
                  <li>수요자: 산업체(냉각수), 공공시설(조경, 도로청소), 농민(농업용수) 등</li>
                  <li>시스템: 수질, 수량, 거리 기반 매칭, 중개</li>
                  <li>운영주체: 한국환경공단</li>
                </ul>
              </section>

              {/* 절차 */}
              <section className="mt-8">
                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
                <p className="font-NotoSansKR text-2xl font-bold text-gray-800 leading-relaxed">
                  ① 공급자 등록 → ② 수요자 조건 입력 → ③ 매칭 검토 → ④ 시스템 매칭 → ⑤ 계약·공급 이행
                </p>
              </section>

              {/* 기대효과 */}
              <section className="mt-8">
                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">기대효과</h2>
                <ul className="font-NotoSansKR list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2">
                  <li>물 자원 수요-공급 조정을 통한 효율적 분배</li>
                  <li>물 재이용시설 데이터 수집으로 체계적 관리</li>
                  <li>지자체, 사업시행자 등 재이용 정보 획득 용이</li>
                </ul>
                <div className="text-center my-6">
                  <Image 
                    src="/img/wrOverview/img_ov_01_1.png" 
                    alt="하수 재이용 시스템 흐름도. 저장탱크에서 재처리된 물이 손 씻기, 수도, 세정 등에 공급되며 재이용 활성화를 통해 최적의 물공급 방안이 마련되는 과정을 시각화함." 
                    width={650}
                    height={500}
                    className="h-[500px] mx-auto mb-4 rounded" 
                  />
                  <p className="font-NotoSansKR text-2xl font-bold text-gray-800 mt-10">(하수 재이용 시스템 개요도)</p>
                </div>
              </section>
              </div>
        </div>
      </div>
    </div>
  );
}