"use client";

import type {
  PortfolioExperience,
  PortfolioProjectView,
  PortfolioSkillCategory,
} from "@/lib/portfolio-data";
import About from "../About";
import Contact from "../Contact";
import EngineeringWithAI from "../EngineeringWithAI";
import Experience from "../Experience";
import Footer from "../Footer";
import Hero, { type HeroStats } from "../Hero";
import LighthouseMetrics from "../LighthouseMetrics";
import Projects from "../Projects";
import Skills from "../Skills";
import NotebookStory from "../story/NotebookStory";
import { WorkModalities } from "../WorkModalities";
import { useRef } from "react";
import ExperienceDisclosure from "./ExperienceDisclosure";
import { useCinematicScroll } from "./useCinematicScroll";
import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";

export default function CinematicHome({
  projects,
  experiences,
  skillCategories,
  heroStats,
}: {
  heroStats?: HeroStats;
  projects: PortfolioProjectView[];
  experiences: PortfolioExperience[];
  skillCategories: PortfolioSkillCategory[];
}) {
  const onLayoutReady = useHomeFragmentNavigation();
  const mainRef = useRef<HTMLElement>(null);
  useCinematicScroll(mainRef);

  return (
    <div className="flex min-h-screen flex-col overflow-x-clip">
      {/* Cada filho direto de <main> é uma cena; useCinematicScroll liga as passagens entre elas. */}
      <main ref={mainRef} className="ds-main relative z-0">
        <Hero stats={heroStats} />

        <NotebookStory projects={projects} onLayoutReady={onLayoutReady} />

        <Projects projects={projects} />

        <WorkModalities />

        <EngineeringWithAI />

        <LighthouseMetrics />

        <div className="bg-[var(--paper)]">
          <About />

          <ExperienceDisclosure>
            <Skills categories={skillCategories} />
            <Experience experiences={experiences} />
          </ExperienceDisclosure>
        </div>

        <Contact />
      </main>
      <div className="relative z-10">
        <Footer />
      </div>
    </div>
  );
}