import Image from "next/image";

export default function WrExamplePage() {
  return (
    <div className="bg-[#F2F2F2]">
      <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
        <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 rounded-full"></span>
          물 재이용사례
        </h2>
      </div>
      <div className="bg-[#F2F2F2] text-gray-800">
        <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>
              사업사례 1 
            </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-semibold text-gray-800 leading-relaxed">
                  경기권역 반도체 사업장 물 재이용 사업<br />
                  : 삼성전자 반도체 사업장 하수재이용수 공급(재이용시설 설치, 공급망 구축 등)
                </p>
              </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-semibold 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>
                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
                  1단계 사업[화성·오산(12만㎥/일) → 삼성 화성·기흥(29년 공급)]<br />
                  2단계 사업[수원(21만㎥/일) → 삼성 평택(30년 공급)]
                </p>
              </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-semibold text-gray-800 leading-relaxed">
                  본 사업은 광역 하수 재이용 공급망 구축의 첫 사업으로 초기 민관협의체를 구성·운영 후 관계기관(환경부, 경기도, 지자체, 공단, 수공, 삼성전자) 간 MOU 체결을 통해 사업을 추진하였으며, 반도체 사업장에 하수 재이용수를 공업용수로 공급하는 국내 첫 사업으로 위협부담 해소를 위해 사업을 단계별로 시행
                </p>
              </section>
              {/* 단계별 시각 정보 */}
              <section className="bg-white px-4 mt-8">
                <Image 
                  src="/img/wrExample/img_ex_01_1.png" 
                  alt="사업단계 설명" 
                  width={800}
                  height={400}
                  className="w-[100%] mx-auto mb-8" 
                />
              </section>
            </div>
          </div>

          {/* 카드2 */}
          <div className="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>
              사업사례 2
            </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-semibold text-gray-800 leading-relaxed">
                  경기도 파주시 하수재이용<br />
                  : 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급<br /><br />
                  *LG디스플레이(P10공장), 희성전자, 엔비텍 등
                </p>
              </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-semibold 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>
                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
                  처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
                  공급량 : 4만m³/일<br />
                  관로 : 13.6km<br />
                  사업비 : 651억원
                </p>
              </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-semibold text-gray-800 leading-relaxed">
                  하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
                </p>
                <div className="grid grid-cols-1 gap-0 items-start">
                  {/* 좌측 이미지 */}
                  <div>
                    <Image 
                      src="/img/wrExample/img_ex_02_1.png" 
                      alt="적용 성공사례 지도" 
                      width={1000}
                      height={1200}
                      className="w-[100%] mx-auto" 
                    />
                  </div>

                  {/* 우측 표 */}
                  <div className="space-y-3">
                    {/* 하수처리수 공급 */}
                    <div>
                      <table className="min-w-full h-[500px]text-center border border-black">
                        <colgroup>
                          <col style={{ width: "20%" }} />
                          <col style={{ width: "40%" }} />
                          <col style={{ width: "40%" }} />
                        </colgroup>
                        <tbody>
                          <tr>
                            <td colSpan={3} className="font-NotoSansKR bg-[#ffc000] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">하수처리수 공급</td>
                          </tr>
                          <tr className="text-xl h-[30px]">
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">위치</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">금촌하수</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">운정하수</td>
                          </tr>
                          <tr className="text-sm">
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">시설용량</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">44,000㎥/일</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">60,000㎥/일</td>
                          </tr>
                          <tr className="text-sm">
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입량</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">27,000㎥/일<br />자연유하</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">30,000㎥/일<br />이송펌프장</td>
                          </tr>
                        </tbody>
                      </table>
                      {/* 첫 화살표 (자연유하 / 관로이송) */}
                      <div className="flex h-[30px] justify-between items-center my-3 px-4">
                        <div className="flex text-xl items-center gap-1 text-orange-600 font-bold pl-6">
                          <span className="font-NotoSansKR">자연유하: 161m</span>
                          <Image 
                            src="/img/wrExample/img_arrow_down_1.png" 
                            alt="오른쪽 화살표" 
                            width={24}
                            height={24}
                            className="h-6 w-6" 
                          />
                        </div>
                        <div className="flex text-xl items-center gap-1 text-orange-600 font-bold">
                          <Image 
                            src="/img/wrExample/img_arrow_down_1.png" 
                            alt="왼쪽 화살표" 
                            width={24}
                            height={24}
                            className="h-6 w-6" 
                          />
                          <span className="font-NotoSansKR">관로이송: 3.2km</span>
                        </div>
                      </div>
                    </div>

                    {/* 물재이용 처리시설 */}
                    <div>
                      <table className="min-w-full text-center border border-black">
                        <colgroup>
                          <col style={{ width: "50%" }} />
                          <col style={{ width: "50%" }} />
                        </colgroup>
                        <tbody>
                          <tr>
                            <td colSpan={2} className="font-NotoSansKR bg-[#00b050] text-xl h-[30px] text-white font-semibold text-center pt-[6px] pb-[6px] px-0">물재이용 처리시설</td>
                          </tr>
                          <tr className="text-sm">
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입유량</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">57,000㎥/일</td>
                          </tr>
                          <tr className="text-sm">
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">재이용시설</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
                          </tr>
                          <tr className="text-sm">
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">농축폐수처리</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">17,000㎥/일</td>
                          </tr>
                        </tbody>
                      </table>
                      {/* 두 번째 화살표 (공급관로) */}
                      <div className="flex flex-col items-center my-3">
                        <div className="flex h-[30px] items-center gap-1 text-xl text-blue-600 font-semibold">
                          <span className="font-NotoSansKR">공급관로 L=10.4km</span>
                          <Image 
                            src="/img/wrExample/img_arrow_down_2.png" 
                            alt="아래 화살표" 
                            width={24}
                            height={24}
                            className="h-6 w-6" 
                          />
                        </div>
                      </div>
                    </div>

                    {/* 수요처 공급 */}
                    <div>
                      <table className="min-w-full text-center border border-black">
                        <colgroup>
                          <col style={{ width: "50%" }} />
                          <col style={{ width: "50%" }} />
                        </colgroup>
                        <tbody>
                          <tr>
                            <td colSpan={2} className="font-NotoSansKR bg-[#3399ff] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">수요처 공급</td>
                          </tr>
                          <tr className="text-sm">
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요처</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">LG디스플레이 외 2개사</td>
                          </tr>
                          <tr className="text-sm">
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요량</td>
                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>

          {/* 카드3 */}
          <div className="card-wrap mb-24" id="card3">
            <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>
              사업사례 3
            </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-semibold text-gray-800 leading-relaxed">
                  충남 보령 하수재이용<br />
                  : 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진
                </p>
              </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-semibold text-gray-800 leading-relaxed">
                  2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
                </p>
              </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-semibold text-gray-800 leading-relaxed">
                  처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
                  공급량 : 1만m3/일<br />
                  관로 : 8.7km<br />
                  사업비 : 315억원(국비 216억원, 재원협의(안))
                </p>
              </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-semibold text-gray-800 leading-relaxed">
                  국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU (환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕
                  으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모
                </p>
                <div className="p-2">
                  <Image 
                    src="/img/wrExample/img_ex_03_1.png" 
                    alt="국가전력 기반시설 설명" 
                    width={700}
                    height={350}
                    className="w-[100%] mx-auto" 
                  />
                </div>
              </section>
            </div>
          </div>

          {/* 카드4 */}
          <div className="card-wrap mb-24" id="card4">
            <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>
              사업사례 4
            </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-semibold 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>
                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
                  (빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감<br />
                  &nbsp;&nbsp;※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(21.7월, 수원시청).<br />
                  &nbsp;&nbsp;다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란<br /><br />
                  - (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원)
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-start p-2">
                  <div>
                    <Image 
                      src="/img/wrExample/img_ex_04_1.png" 
                      alt="월드컵경기장 인근도로 노면 살수 이미지" 
                      width={350}
                      height={250}
                      className="w-[100%] mx-auto" 
                    />
                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜월드컵경기장 인근도로 노면 살수＞</span>
                  </div>
                  <div>
                    <Image 
                      src="/img/wrExample/img_ex_04_2.png" 
                      alt="주유기 모양의 빗물 공급기 이미지" 
                      width={350}
                      height={250}
                      className="w-[100%] mx-auto" 
                    />
                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜주유기 모양의 빗물 공급기＞</span>
                  </div>
                  <div>
                    <Image 
                      src="/img/wrExample/img_ex_04_3.png" 
                      alt="빗물주유기에서 살수용수 공급 이미지" 
                      width={350}
                      height={250}
                      className="w-[100%] mx-auto" 
                    />
                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물주유기에서 살수용수 공급＞</span>
                  </div>
                  <div>
                    <Image 
                      src="/img/wrExample/img_ex_04_4.png" 
                      alt="빗물 공급기 및 빗물분사장치 위치" 
                      width={350}
                      height={250}
                      className="w-[100%] mx-auto" 
                    />
                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물 공급기 및 빗물분사장치 위치＞</span>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}