// app/main/_sections/Hero.tsx
import styles from "../../reuse.module.css";

export default function Hero() {
  return (
    <section id="main" className={styles.hero}>
      <div className={styles.heroBg} aria-hidden />
      <div className={styles.heroOverlay} aria-hidden />

      <div className="absolute inset-0 z-10 flex items-center justify-center">
        <div className="flex flex-col items-center justify-items-center gap-[40px] mx-auto max-w-[1520px] px-6 text-center text-white">
          <h1 className="text-5xl font-bold tracking-tight">물 재이용</h1>
          <p className="text-xl font-medium leading-6 text-white/85 max-w-[720px] mx-auto">
            빗물, 오수, 하수처리수, 폐수처리수, 발전소 온배수를 재이용처리하여<br />
            생활, 공업, 농업, 조경, 하천유지 등의 용도로 재이용합니다.
          </p>
          <p className="text-lg leading-6 text-white/85 max-w-[720px] mx-auto">
            전국 하수 재이용률 15.6%(2024년 통계 기준),<br />
            물재이용 활성화를 위한 재이용 수요신청, 매칭을 추진하고 있습니다.
          </p>
        </div>
      </div>
      <div className="absolute inset-x-0 bottom-[120px] flex flex-col items-center justify-items-center gap-2 mt-10">
        <img src="/images/landing/scroll_down.svg" alt="" className="w-[26px] h-[40px]" />
        <span className="text-white/80 text-base tracking-[.25em]">scroll down</span>
      </div>
    </section>
  );
}