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

import Link from "next/link";

type IntroCardItem = {
  title: string;
  desc: string;
  image: string;
  href: string;
};

const INTRO_CARDS: IntroCardItem[] = [
  {
    title: "물 재이용 법",
    desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.",
    image: "/images/landing/card_01.jpg",
    href: "/reuse/intro/law",
  },
  {
    title: "친환경 수자원 빗물",
    desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.",
    image: "/images/landing/card_02.jpg",
    href: "/reuse/intro/rain",
  },
  {
    title: "알뜰하게 재이용되는 중수",
    desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.",
    image: "/images/landing/card_03.jpg",
    href: "/reuse/intro/greywater",
  },
  {
    title: "하수처리수 재이용",
    desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.",
    image: "/images/landing/card_04.jpg",
    href: "/reuse/intro/treated",
  },
];

export default function IntroCards() {
  return (
    <section id="intro" className="bg-white">
      <div className="mx-auto max-w-[1520px] px-6 py-[90px] h-[870px]">
        <div className="text-center">
          <div className="inline-block"> 
            <h2 className="relative z-10 px-2 text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 소개</h2>
            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300"></div>
          </div>
          <p className="mt-5 text-xl text-gray-500">
            지속 가능한 미래를 위한 약속, 깨끗한 물의 새로운 순환을 시작합니다.
          </p>
        </div>

        <section className="mx-auto max-w-8xl px-4 py-12">
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
                {INTRO_CARDS.map((card, idx) => (
                <Link
                    key={idx}
                    href={card.href}
                    aria-label={`${card.title} 상세로 이동`}
                    className="group relative h-[280px] md:h-[320px] lg:h-[500px] overflow-hidden rounded-2xl cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-400/60"
                >
                    {/* 배경 이미지 (이미 그라디언트 포함) */}
                    <img
                    src={card.image}
                    alt={card.title}
                    className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
                    />

                    {/* 텍스트 영역 */}
                    <div className="absolute bottom-0 z-10 p-6 text-white">
                        <h3 className="text-lg font-semibold tracking-tight">
                            {card.title}
                        </h3>
                        <p className="mt-2 text-sm leading-relaxed text-white/90 line-clamp-3">
                            {card.desc}
                        </p>
                    </div>
                </Link>
                ))}
            </div>
        </section>
      </div>
    </section>
  );
}