"use client";

import { type ReactNode, useEffect, useRef } from "react";
import { useCinematicScroll } from "./useCinematicScroll";
import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";

/**
 * A ilha de cliente da home: só ela precisa de hooks (rolagem suave e passagens entre cenas, chegada por fragmento).
 * Ela recebe as cenas como `children`, então CinematicHome e as seções continuam no servidor e só o que já era
 * de cliente (Hero, Contact, Section...) vai para o pacote do navegador.
 * Cada filho direto de <main> é uma cena; useCinematicScroll liga as passagens entre elas. O rodapé vem do layout.
 */
export default function CinematicMain({ children }: { children: ReactNode }) {
  const onLayoutReady = useHomeFragmentNavigation();
  const mainRef = useRef<HTMLElement>(null);
  useCinematicScroll(mainRef);
  // o layout da home é estável na montagem: a chegada por fragmento (#contato etc.) já pode ser resolvida
  useEffect(() => onLayoutReady(), [onLayoutReady]);

  return (
    <div className="overflow-x-clip">
      <main ref={mainRef} className="ds-main relative z-0">
        {children}
      </main>
    </div>
  );
}