// apps/dm/app/(landing)/reuse/_sections/Cases.tsx
"use client";

import Image from "next/image";
import section03 from "@/public/images/landing/section_03.png";

export default function Cases() {
  return (
    <section id="cases" className="bg-[#EAF6F6]">
      <div className="mx-auto max-w-[1520px] px-6 h-[870px] flex items-center">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full">
          
          {/* 좌측 : 카피 영역 */}
          <div className="flex flex-col justify-center">
            <div className="pl-2 lg:pl-10">
                <p className="text-[32px] font-extrabold text-slate-900 tracking-[-0.02em]">
                    빗물+중수도+하수도
                </p>

                <h2 className="mt-6 leading-[1.1] tracking-[-0.03em]">
                    <span className="block text-[64px] font-extrabold text-slate-900">
                        데이터로 보는
                    </span>
                    <span className="mt-3 block text-[64px] font-extrabold text-[#004A94]">
                        물 재이용 현황
                    </span>
                </h2>

                <div className="mt-14">
                    <a
                        href="/reuse/cases/rain"
                        className="
                        inline-flex items-center justify-center gap-3
                        w-[260px] h-[52px]
                        bg-[#01ACE5] text-white
                        rounded-sm
                        hover:bg-[#0A78C0]
                        transition-colors
                        "
                    >
                        물 재이용 현황 보러가기
                        <span className="text-lg">→</span>
                    </a>
                </div>
            </div>
          </div>

          {/* 우측 : 이미지 카드 */}
          <div className="flex justify-center lg:justify-end">
            <div
              className="
                relative
                w-full max-w-[720px]
              "
            >
              <Image
                src={section03}
                alt="물 재이용 현황 데이터 테이블"
                className="w-full h-auto object-cover"
                style={{ width: "100%", height: "auto" }}
              />
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}