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

import { useMemo } from "react";
import TopNav from "@/components/TopNav";
import SideIndicator from "./SideIndicator";
import { useScrollSpy } from "./_hooks/useScrollSpy";

import Hero from "./_sections/Hero";
import IntroCards from "./_sections/IntroCards";
import Cases from "./_sections/Cases";
import ProcessFlow from "./_sections/ProcessFlow";

const LANDING_SECTIONS = [
  { id: "main", label: "Main" },
  {
    id: "intro",
    label: "물 재이용 소개", // ✅ 상단 메뉴용
    sideLabel: "소개",      // ✅ 사이드 인디게이터용
  },
  {
    id: "cases",
    label: "물 재이용 현황", // ✅ 상단 메뉴용
    sideLabel: "현황",      // ✅ 사이드 인디게이터용
  },
  {
    id: "processflow",
    label: "물 재이용 사례", // ✅ 상단 메뉴용
    sideLabel: "재이용사례", // ✅ 사이드 인디게이터용
  },
];

export default function ReuseLandingPage() {
  const sectionIds = useMemo(() => LANDING_SECTIONS.map((s) => s.id), []);
  const activeId = useScrollSpy(sectionIds);

  return (
    <main className="bg-white">
     
      {/* 헤더 */}
      <TopNav />
      
      {/* 사이드 인디게이터 */}
      <SideIndicator items={LANDING_SECTIONS} activeId={activeId} />
      
      {/* 컨텐츠 영역 */}
      <div className="[&>section]:scroll-mt-[83px]">
        {/* 물 재이용 */}
        <Hero />
        {/* 재이용 소개 */}
        <IntroCards />
        {/* 재이용 사례 */}
        <Cases />
        {/* 물 재이용 사업 */}
        <ProcessFlow />
      </div>

    </main>
  );
}