"use client";

import dynamic from "next/dynamic";
import { Suspense } from "react";
import Hero from "../Hero";
import { SectionLoading } from "../SectionLoading";

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 Projects = dynamic(() => import("../Projects"));
const LighthouseMetrics = dynamic(() => import("../LighthouseMetrics"), { loading: () => <SectionLoading message="Carregando..." /> });
const Footer = dynamic(() => import("../Footer"));

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

export default function CinematicHome() {
  return (
    <div className="flex min-h-screen flex-col overflow-x-hidden">
      <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"
            baseVelocity={-1.5}
          />
        </div>

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

        <SectionDivider variant="waveform" />

        <CinematicSection effect="clip-reveal">
          <Skills />
        </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 />
        </CinematicSection>

        <SectionDivider variant="gradient" />

        <CinematicSection effect="rotate-in">
          <Suspense
            fallback={<SectionLoading message="Carregando projetos..." />}
          >
            <Projects />
          </Suspense>
        </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>
  );
}