import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme";
import { HelmetProvider } from "react-helmet-async";
import SimpleReactLightbox from "simple-react-lightbox";
import NotFound from "./components/Pages/NotFound.jsx";

// Lazy loading des pages
const Home = lazy(() => import('./components/Pages/Home.jsx'));
const About = lazy(() => import('./components/Pages/About'));
const Contact = lazy(() => import('./components/Pages/Contact'));
const Post = lazy(() => import('./components/Pages/Post'));
const Search = lazy(() => import('./components/Pages/Search')); // Nouveau composant pour la recherche

// Import des services
import ServiceUn from "./components/Pages/ServiceUn.jsx";
import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
import ServiceTrois from "./components/Pages/ServiceTrois.jsx";

// Import des composants globaux
import Header from "./components/Header";
import Footer from './components/Footer';

function YourApp() {
  return (
    <Suspense fallback={<div>Chargement...</div>}>
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/posts" element={<Post />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
          {/* Routes pour les services */}
          <Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
          <Route path="/services/structure-beton-charpente-metallique-bois" element={<ServiceDeux />} />
          <Route path="/services/formation-video" element={<ServiceTrois />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
        <Footer />
      </Router>
    </Suspense>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <HelmetProvider>
        <SimpleReactLightbox>
          <YourApp />
        </SimpleReactLightbox>
      </HelmetProvider>
    </ThemeProvider>
  </React.StrictMode>
);