"use client";

import dynamic from "next/dynamic";
import type {
  PortfolioExperience,
  PortfolioProject,
  PortfolioSkillCategory,
} from "@/lib/portfolio-data";
import Hero from "../Hero";
import Projects from "../Projects";
import { SectionLoading } from "../SectionLoading";
import ScrollStory from "../story/ScrollStory";
import ReelDirector from "../story/ReelDirector";
import PrintReel from "../story/PrintReel";
import CinematicSection from "./CinematicSection";

const About = dynamic(() => import("../About"), {
  loading: () => <SectionLoading message="Carregando..." />,
});
const Skills = dynamic(() => import("../Skills"), {
  loading: () => <SectionLoading message="Carregando..." />,
});
const Experience = dynamic(() => import("../Experience"), {
  loading: () => <SectionLoading message="Carregando..." />,
});
const WorkModalities = dynamic(
  () => import("../WorkModalities").then((mod) => mod.WorkModalities),
  { loading: () => <SectionLoading message="Carregando..." /> },
);
const Contact = dynamic(() => import("../Contact"), {
  loading: () => <SectionLoading message="Carregando..." />,
});
const LighthouseMetrics = dynamic(() => import("../LighthouseMetrics"), {
  loading: () => <SectionLoading message="Carregando..." />,
});
const Footer = dynamic(() => import("../Footer"));

const ScrollVelocityText = dynamic(() => import("./ScrollVelocityText"), {
  ssr: false,
});
const SectionDivider = dynamic(() => import("./SectionDivider"), {
  ssr: false,
});

export default function CinematicHome({
  projects,
  experiences,
  skillCategories,
}: {
  projects: PortfolioProject[];
  experiences: PortfolioExperience[];
  skillCategories: PortfolioSkillCategory[];
}) {
  return (
    <div className="flex min-h-screen flex-col overflow-x-clip">
      <main className="ds-main">
        <ReelDirector />
        <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" baseVelocity={-1.5} />
        </div>

        {/* Reel scrollytelling: timeline scrubbed pelo scroll (estilo product-page) */}
        <ScrollStory
          projectsCount={projects.length}
          experiencesCount={experiences.length}
          skillsCount={skillCategories.reduce(
            (acc, cat) => acc + cat.skills.length,
            0,
          )}
        />

        {/* Palco 2: filmstrip horizontal pinado com prints reais dos deployments */}
        <PrintReel />

        <CinematicSection effect="parallax-depth">
          <About />
        </CinematicSection>

        <SectionDivider variant="waveform" />

        <CinematicSection effect="clip-reveal">
          <Skills categories={skillCategories} />
        </CinematicSection>

        <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"
            baseVelocity={1}
          />
        </div>

        <CinematicSection effect="fade-scale">
          <Experience experiences={experiences} />
        </CinematicSection>

        <SectionDivider variant="gradient" />

        <CinematicSection effect="rotate-in">
          <Projects projects={projects} />
        </CinematicSection>

        <CinematicSection effect="clip-reveal">
          <LighthouseMetrics />
        </CinematicSection>

        <SectionDivider variant="pulse" />

        <CinematicSection effect="parallax-depth">
          <WorkModalities />
        </CinematicSection>

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

        <CinematicSection effect="fade-scale">
          <Contact />
        </CinematicSection>
      </main>
      <Footer />
    </div>
  );
}