import React from "react";
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import { AnimatePresence, LayoutGroup } from "framer-motion";

import "./i18n";
import "./App.css";

import Navbar from "./Components/Nav/Navbar";
import Home from "./Components/Sections/Home/Home";
import Services from "./Components/Sections/Services/Services";
import About from "./Components/Sections/About/About";
import Departments from "./Components/Sections/Departments/Departments";
import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail";
import Contact from "./Components/Sections/Contact/Contact";
import Footer from "./Components/Nav/Footer";
import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";

const MainPage = () => {
  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
      <div className="flex flex-col min-h-screen">
        <main className="flex-grow">
          <Home />
          <Services />
          <About />
          <Departments />
          <Contact />
        </main>
        <Footer />
      </div>
    </div>
  );
};

function RouterView() {
  const location = useLocation();

  return (
    <LayoutGroup>
      <AnimatePresence mode="wait" initial={false}>
        <Routes location={location} key={location.pathname}>
          <Route path="/" element={<MainPage />} />
          <Route path="/departments/:id" element={<DepartmentDetail />} />
          <Route path="/department-detail2" element={<DepartmentDetail2 />} />
        </Routes>
      </AnimatePresence>
    </LayoutGroup>
  );
}

function Layout() {
  const location = useLocation();

  const excludedExactPaths = [
    "/department-detail2",
  ];

  const excludedPrefixes = ["/departments/"];

  const isExcludedExact = excludedExactPaths.includes(location.pathname);
  const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p));

  const hideNavbar = isExcludedExact || isExcludedPrefix;

  const navbarHeight = hideNavbar ? 0 : 56;

  return (
    <>
      {!hideNavbar && <Navbar />}

      <div style={{ paddingTop: navbarHeight }}>
        <RouterView />
      </div>
    </>
  );
}

const App = () => {
  return (
    <BrowserRouter>
      <Layout />
    </BrowserRouter>
  );
};

export default App;