import dynamic from "next/dynamic";
import { Header } from "./components/Header";
import Squares from "@/components/Squares";
import { WorkModalities } from "./components/WorkModalities"; // Importar WorkModalities
import DotGrid from "@/components/DotGrid";

// Lazy load components for better performance
const Hero = dynamic(() => import("./components/Hero"), {
  loading: () => (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-pulse text-white">Carregando...</div>
    </div>
  ),
});

const About = dynamic(() => import("./components/About"), {
  loading: () => (
    <div className="py-20 px-4 text-center">
      <div className="animate-pulse text-white">Carregando seção...</div>
    </div>
  ),
});

const Skills = dynamic(() => import("./components/Skills"), {
  loading: () => (
    <div className="py-20 px-4 text-center">
      <div className="animate-pulse text-white">Carregando habilidades...</div>
    </div>
  ),
});

const Experience = dynamic(() => import("./components/Experience"), {
  loading: () => (
    <div className="py-20 px-4 text-center">
      <div className="animate-pulse text-white">Carregando experiência...</div>
    </div>
  ),
});

const Projects = dynamic(() => import("./components/Projects"), {
  loading: () => (
    <div className="py-20 px-4 text-center">
      <div className="animate-pulse text-white">Carregando projetos...</div>
    </div>
  ),
});

const Contact = dynamic(() => import("./components/Contact"), {
  loading: () => (
    <div className="py-20 px-4 text-center">
      <div className="animate-pulse text-white">Carregando contato...</div>
    </div>
  ),
});

export default function Home() {
  return (
    <div className="min-h-screen bg-black text-white relative">
      <div className="fixed inset-0 z-0 opacity-50">
        <Squares
          speed={0.5}
          squareSize={40}
          direction="diagonal" // up, down, left, right, diagonal
          borderColor="#271E37"
          hoverFillColor="#222222"
        />
      </div>
      <Header />
      <main className="relative z-10">
        <Hero />
        <About />
        <Skills />
        <Experience />
        <Projects />
        <WorkModalities /> {/* Adicionar WorkModalities aqui */}
        <Contact />
      </main>
    </div>
  );
}