import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./sections/Header";
import Footer from "./sections/Footer";
import Home from "./pages/Home";
import About from "./pages/About";
import Blogs from "./pages/Blogs";
import BlogPage from "./pages/Blogpage"; // Import the BlogPage component
import Jobs from "./pages/Jobs";
import JobPage from "./pages/Jobpage";
import VarDiG from "./pages/VarDiG";
import Contact from "./pages/Contact";
import PrivacyPolicy from "./pages/Privacy";

import ScrollTop from "./components/ScrollTop";
import TransitionWrapper from "./components/Transition";
import { LoaderProvider } from "./components/LoaderContext";


function App() {
  return (
    <Router>
      <ScrollTop />
      <LoaderProvider>
      <TransitionWrapper>
      <div className="flex flex-col min-h-screen">
        <Header />

        {/* Main content area */}
        <main className="flex-grow">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/vardig" element={<VarDiG />} />
            <Route path="/about" element={<About />} />
            <Route path="/blogs" element={<Blogs />} />
            
            {/* Add Dynamic Route for Individual Blog Pages */}
            <Route path="/blog/:slug" element={<BlogPage/>} />

            <Route path="/jobs" element={<Jobs />} />
            <Route path="/job/:slug" element={<JobPage/>} />

            <Route path="/contact" element={<Contact />} />
            <Route path="/privacy-policy" element={<PrivacyPolicy />} />
          </Routes>
        </main>

        {/* Footer will stay at the bottom */}
        <Footer />
      </div>
      </TransitionWrapper>
      </LoaderProvider>
    </Router>
  );
}

export default App;