import React from "react";
import { TrackingProvider } from "./services/tracking/tracking";
import { TabProvider } from "./services/tabs";

// use BrowserRouter if you know the exact path where the app will be deployed
// import BrowserRouter from "./BrowserRouter";
// use HashRouter if you have no idea where the app will be deployed
import HashRouter from "./HashRouter";

/**
 * Application root: mounts the router behind the app-wide providers
 * (tracking, tab management) and disables the context menu in production.
 */
const App = () => {
  // Disable right click in production
  React.useEffect(() => {
    if (import.meta.env.MODE !== "production") return undefined;
    const suppress = (e) => e.preventDefault();
    window.addEventListener("contextmenu", suppress);
    return () => window.removeEventListener("contextmenu", suppress);
  }, []);

  // no @ui-marcom "container" grid class here: it caps max-width and adds
  // horizontal margins, fighting the full-bleed kiosk layout
  return (
    <div className="app">
      <TrackingProvider>
        <TabProvider>
          <HashRouter />
        </TabProvider>
      </TrackingProvider>
    </div>
  );
};

export default App;