import { StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./App";
import { ContentProvider, DEFAULT_CONTENT, type LiveContent } from "./lib/content-context";
// Importing here is what makes the production build emit a real stylesheet and
// link it into dist/client/index.html. In dev, the server inlines the same file
// into <head> so the server-rendered HTML arrives already styled.
import "./styles/index.css";

declare global {
  interface Window {
    __SIOORAS__?: LiveContent;
  }
}

// Same payload the server rendered with — never re-fetched, so hydration
// cannot disagree with the markup it is attaching to.
const live: LiveContent = window.__SIOORAS__ ?? DEFAULT_CONTENT;

hydrateRoot(
  document.getElementById("root") as HTMLElement,
  <StrictMode>
    <ContentProvider value={live}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ContentProvider>
  </StrictMode>,
);
