"use client";

import type {
  PortfolioExperience,
  PortfolioProjectView,
  PortfolioSkillCategory,
} from "@/lib/portfolio-data";
import About from "../About";
import Contact from "../Contact";
import Experience from "../Experience";
import Footer from "../Footer";
import Hero from "../Hero";
import LighthouseMetrics from "../LighthouseMetrics";
import Projects from "../Projects";
import Skills from "../Skills";
import NotebookStory from "../story/NotebookStory";
import { WorkModalities } from "../WorkModalities";
import ScrollVelocityText from "./ScrollVelocityText";
import SectionDivider from "./SectionDivider";
import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";

export default function CinematicHome({
  projects,
  experiences,
  skillCategories,
}: {
  projects: PortfolioProjectView[];
  experiences: PortfolioExperience[];
  skillCategories: PortfolioSkillCategory[];
}) {
  const onLayoutReady = useHomeFragmentNavigation();

  return (
    <div className="flex min-h-screen flex-col overflow-x-clip">
      <main className="ds-main">
        <Hero />

        {/* Marquee divider after hero */}
        <div className="overflow-hidden bg-[var(--ink)] py-6 text-[rgba(244,242,237,0.06)]">
          <ScrollVelocityText text="SOFTWARE ENGINEERING" direction="left" />
        </div>

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

        <About />

        <SectionDivider variant="waveform" />

        <Skills categories={skillCategories} />

        <div className="overflow-hidden bg-[var(--ink)] py-4 text-[rgba(204,255,0,0.04)]">
          <ScrollVelocityText
            text="NEXT.JS  TAURI  RUST  NODE.JS  TYPESCRIPT"
            direction="right"
          />
        </div>

        <Experience experiences={experiences} />

        <SectionDivider variant="gradient" />

        <Projects projects={projects} />

        <LighthouseMetrics />

        <SectionDivider variant="pulse" />

        <WorkModalities />

        <div className="overflow-hidden bg-[var(--ink)] py-6 text-[rgba(244,242,237,0.05)]">
          <ScrollVelocityText text="VAMOS CONVERSAR" direction="left" />
        </div>

        <Contact />
      </main>
      <Footer />
    </div>
  );
}