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 Cart from './components/Cart';
import ScrollToTop from './components/ScrollToTop';
import RouteTransition from './components/RouteTransition';
import { StoreProvider } from './src/context/StoreContext';

// 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'));
const ProductPhotography = lazy(() => import('./pages/Journal/ProductPhotography'));
const PackagingGuide = lazy(() => import('./pages/Journal/PackagingGuide'));
const MotivationInClay = lazy(() => import('./pages/Journal/MotivationInClay'));
const ProductDetail = lazy(() => import('./pages/ProductDetail'));
const ArticleDetail = lazy(() => import('./pages/ArticleDetail'));
const Checkout = lazy(() => import('./pages/Checkout'));
const MockPayment = lazy(() => import('./pages/MockPayment'));
const Success = lazy(() => import('./pages/Success'));
const Admin = lazy(() => import('./pages/Admin'));

function App() {
  return (
    <Router>
      <StoreProvider>
        <ScrollToTop />
        <Header />
        <Cart />
        <RouteTransition>
          <Suspense fallback={null}>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/collections" element={<Collections />} />
              <Route path="/collections/:slug" element={<ProductDetail />} />
              <Route path="/atelier" element={<Atelier />} />
              <Route path="/editorial" element={<Editorial />} />
              <Route path="/editorial/:slug" element={<ArticleDetail />} />
              <Route path="/checkout" element={<Checkout />} />
              <Route path="/mock-payment" element={<MockPayment />} />
              <Route path="/success" element={<Success />} />
              <Route path="/admin" element={<Admin />} />
            </Routes>
          </Suspense>
        </RouteTransition>
        <Footer />
      </StoreProvider>
    </Router>
  );
}

export default App;