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

const About = dynamic(() => import("./components/About"));
const Skills = dynamic(() => import("./components/Skills"));
const Experience = dynamic(() => import("./components/Experience"));
const WorkModalities = dynamic(() => import("./components/WorkModalities").then(mod => mod.WorkModalities));
const Contact = dynamic(() => import("./components/Contact"));
const Projects = dynamic(() => import("./components/Projects"));

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col overflow-x-hidden">
      <main className="ds-main">
        <Hero />
        <About />
        <Skills />
        <Experience />
        <Suspense
          fallback={<SectionLoading message="Carregando projetos..." />}
        >
          <Projects />
        </Suspense>
        <WorkModalities />
        <Contact />
      </main>
      <Footer />
    </div>
  );
}