import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import ScrollToTop from './components/ScrollToTop';
import RouteTransition from './components/RouteTransition';

// Lazy load pages for better performance
const Home = lazy(() => import('./pages/Home'));
const Collections = lazy(() => import('./pages/Collections'));
const Atelier = lazy(() => import('./pages/Atelier'));
const Editorial = lazy(() => import('./pages/Editorial'));

function App() {
  return (
    <Router>
      <ScrollToTop />
      <Header />
      <RouteTransition>
        <Suspense fallback={<div className="h-screen w-full bg-stone-100 dark:bg-stone-900" />}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/collections" element={<Collections />} />
            <Route path="/atelier" element={<Atelier />} />
            <Route path="/editorial" element={<Editorial />} />
          </Routes>
        </Suspense>
      </RouteTransition>
      <Footer />
    </Router>
  );
}

export default App;