import { StrictMode, lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { HelmetProvider } from "react-helmet-async";
import { OwnerViewProvider } from "./contexts/OwnerViewContext";
import { registerServiceWorker } from "./pwa/registerServiceWorker";
import "./index.css";

const App = lazy(() => import("./App"));

const AppFallback = (
  <div className="min-h-screen bg-[#0A0A0C] flex items-center justify-center">
    <div className="text-slate-400 text-sm">Loading…</div>
  </div>
);

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <HelmetProvider>
      <BrowserRouter>
        <OwnerViewProvider>
          <Suspense fallback={AppFallback}>
            <App />
          </Suspense>
        </OwnerViewProvider>
      </BrowserRouter>
    </HelmetProvider>
  </StrictMode>,
);

void registerServiceWorker();