import { Suspense, lazy, useMemo } from 'react';
import { BrowserRouter, HashRouter, Route, Routes, useLocation } from 'react-router-dom';
import { IS_DESKTOP } from './config/site';
import { useSiteBranding } from './hooks/useSiteBranding';

const Home = lazy(() => import('./pages/Home'));
const Admin = lazy(() => import('./pages/Admin'));

function AppRoutes() {
  const location = useLocation();
  const isAdmin = useMemo(() => location.pathname.startsWith('/admin'), [location.pathname]);
  useSiteBranding(isAdmin);

  return (
    <Suspense fallback={null}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/admin" element={<Admin />} />
      </Routes>
    </Suspense>
  );
}

export default function App() {
  const Router = IS_DESKTOP ? HashRouter : BrowserRouter;
  return (
    <Router>
      <AppRoutes />
    </Router>
  );
}