// apps/dm/app/(landing)/reuse/intro/law/page.tsx
"use client";

import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import lawTimeline from "@/public/images/landing/intro/law_timeline.png";
import performanceLeft from "@/public/images/landing/intro/performance_left.png";
import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
import relNote from "@/public/images/landing/intro/rel_note.png";
import linkage from "@/public/images/landing/intro/linkage.png";

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-[24px] font-bold text-neutral-900">{children}</h3>
    </div>
  );
}

type HrProps = {
  className?: string;
};

function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
}

type ImgCardProps = {
  src: StaticImageData;
  alt: string;
};

function ImgCard({ src, alt }: ImgCardProps) {
  return (
    <div className="w-full overflow-x-auto">
      <Image
        src={src}
        alt={alt}
        className="block mx-auto max-w-none"
        style={{ width: "auto", height: "auto" }}
      />
    </div>
  );
}

export default function WaterReuseLawPage() {
  return (
    <div className="bg-white">  
      <SubPageHeader
        title="물 재이용 법"
        crumbs={[
            { label: "Home", href: "/reuse" },
            { label: "물 재이용 소개", href: "/reuse/intro/law" },
            { label: "물 재이용 법" },
        ]}
        hideFooterLine
        hideGuideText
        wrapClassName="!pb-0"
      />

      <Hr className="my-7" />

      {/* 1) 법제도/계획 수립 타임라인 */}
      <section className="mt-6">
        <SectionTitle>법제도 · 계획 및 기본계획 수립</SectionTitle>
        <div className="mt-8">
          <ImgCard src={lawTimeline} alt="법제도 타임라인" />
        </div>
      </section>

      <Hr className="my-11" />

      {/* 2) 제2차 계획 대비 실적 현황 (2컬럼) */}
      <section>
        <SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
        <div className="mt-8">
          <ImgCard src={performanceLeft} alt="실적 현황 요약" />
        </div>
      </section>

      <Hr className="my-11" />

      {/* 3) 국내 관련 현황 */}
      <section>
        <SectionTitle>국내 관련 현황</SectionTitle>
        <div className="mt-8">
          <ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
        </div>
      </section>

      <Hr className="my-11" />

      {/* 4) 정책 변천 추이 */}
      <section>
        <SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
        <div className="mt-8">
          <ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
        </div>
      </section>

      <Hr className="my-11" />

      {/* 5) 타 법령과의 관계도 */}
      <section>
        <SectionTitle>타법령과의 관계도</SectionTitle>
        <div className="mt-8">
          <ImgCard src={relNote} alt="관계도 설명" />
        </div>
      </section>

      <Hr className="my-11" />

      {/* 6) 국내 연계 현황 */}
      <section className="pb-[200px]">
        <SectionTitle>국내 연계 현황</SectionTitle>
        <div className="mt-8">
          <div className="mx-[20px] mb-8">
            <p className="text-[24px] font-semibold mb-2">주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
            <p className="text-[#4F4F4F]">국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요<br />
                • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
            </p>
          </div>
          <ImgCard src={linkage} alt="국내 연계 현황" />
        </div>
      </section>
    </div>
  );
}