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

// 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">
      <Squares
        direction="diagonal"
        speed={0.5}
        borderColor="#374151"
        hoverFillColor="#1e40af"
        squareSize={30}
        className="absolute inset-0 opacity-30"
      />
      <Header />
      <main className="relative z-10">
        <Hero />
        <About />
        <Skills />
        <Experience />
        <Projects />
        <WorkModalities /> {/* Adicionar WorkModalities aqui */}
        <Contact />
      </main>
    </div>
  );
}