import { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { LanguageProvider } from './i18n';
import { Navbar, Footer, FancyCursor, ScrollToTop } from './components/layout';
import { Home } from './pages/Home';
import { PageLoader } from './components/ui';
import './styles/global.css';

// Lazy load pages to reduce initial bundle size.
// Home is imported directly to prevent layout shift on initial load.
const About = lazy(() => import('./pages/About').then(module => ({ default: module.About })));
const Contact = lazy(() => import('./pages/Contact').then(module => ({ default: module.Contact })));

export function App() {
  return (
    <LanguageProvider>
      <BrowserRouter>
        <ScrollToTop />
        <FancyCursor />
        <Navbar />
        {/* Suspense handles the loading state for lazy-loaded routes */}
        <Suspense fallback={<PageLoader />}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </Suspense>
        <Footer />
      </BrowserRouter>
    </LanguageProvider>
  );
}