import { HashRouter } from "react-router";
import Pages from "./Routes";
import { ContentProvider } from "./services/content";
import { ScreensaverProvider } from "./services/screensaver";
import { Screensaver } from "./components/Screensaver/Screensaver";
import { RotateOverlay } from "./components/RotateOverlay/RotateOverlay";
import { ErrorBoundary } from "./components/ErrorBoundary";

/**
 * Hash-based router variant - works regardless of the deploy path, so it's
 * the default (see App.jsx). Content + screensaver providers around the
 * routes, pages guarded by the ErrorBoundary; the Screensaver and
 * RotateOverlay overlays stay mounted as siblings so their fades work in
 * both directions. RotateOverlay needs router context too (useLocation,
 * useConfig via useSearchParams - see services/orientation.js).
 */
const Router = () => {
  return (
    <HashRouter>
      <ContentProvider>
        <ScreensaverProvider>
          <ErrorBoundary>
            <Pages />
          </ErrorBoundary>
          <Screensaver />
          <RotateOverlay />
        </ScreensaverProvider>
      </ContentProvider>
    </HashRouter>
  );
};

export default Router;