//React
import React from "react";
import { Routes, Route } from "react-router-dom";

//Framer Motion
import { AnimatePresence } from "framer-motion";

//Components
import Header from "./components/Header";
import MainPage from "./components/sections/MainPage";
import Project from "./components/sections/projects/Project";
import { LoadingProvider } from "./components/utils/LoadingContext";

//Styles
import "./index.css";

const App = () => {
  return (
    <div className="bg-[#181818] min-h-screen w-full pt-0 overflow-hidden relative">
      <LoadingProvider>
        {/* Header */}
        <Header />

        {/* Main Sections with Routes */}
        <AnimatePresence mode="wait">
          <Routes>
            <Route path="/" element={<MainPage />} />
            <Route path="/project/:title" element={<Project />} />
          </Routes>
        </AnimatePresence>
      </LoadingProvider>
    </div>
  );
};

export default App;