import { useState, useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';
import Navbar from '../components/Navbar';
import Hero from '../components/Hero';
import Stats from '../components/Stats';
import Work from '../components/Work';
import Contact from '../components/Contact';

// Dynamic import for Three.js background to avoid SSR issues
const Scene = dynamic(() => import('../components/Background'), { ssr: false });

export default function Home() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <main className="relative w-full min-h-screen bg-void text-white selection:bg-white selection:text-black">
      {/* Noise Texture Overlay */}
      <div className="noise-overlay" />
      
      {/* 3D Background */}
      {mounted && <Scene />}

      {/* Navigation */}
      <Navbar />

      {/* Content Sections */}
      <div className="relative z-10">
        <Hero />
        <Stats />
        <Work />
        <Contact />
      </div>
    </main>
  );
}