"use client";

import { useEffect, useState } from "react";
import SmoothScroll from "@/components/SmoothScroll";
import CustomCursor from "@/components/CustomCursor";
import SoundManager from "@/components/SoundManager";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default function SubpageLayout({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <main className="w-full relative bg-darkbg text-foreground overflow-hidden select-none">
      {/* Isolated wrapper for client-only widgets to prevent hydration insertion conflicts */}
      <div id="client-only-widgets">
        {/* {mounted && <SoundManager />} */}
        {mounted && <CustomCursor />}
        {mounted && <Header visible={true} />}
      </div>

      {/* Lenis Scroll syncing with GSAP triggers */}
      <SmoothScroll>
        <div className="flex flex-col justify-between">
          <div className="flex-1 w-full relative z-10">
            {children}
          </div>
          <Footer />
        </div>
      </SmoothScroll>
    </main>
  );
}
