// Browser-only entry for the plain static Hostinger build (no server needed).
import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { RouterProvider, useRouterState } from "@tanstack/react-router";
import { getRouter } from "../src/router";
import "../src/styles.css";

const router = getRouter();

// Keep each page's own title and description when navigating.
function PageTitles() {
  const matches = useRouterState({ select: (s) => s.matches });
  useEffect(() => {
    const meta = matches.flatMap((m: any) => m.meta ?? []).filter(Boolean);
    const title = [...meta].reverse().find((m: any) => m.title)?.title;
    if (title) document.title = title;
    const desc = [...meta].reverse().find((m: any) => m.name === "description")?.content;
    if (desc) {
      let tag = document.querySelector('meta[name="description"]');
      if (!tag) {
        tag = document.createElement("meta");
        tag.setAttribute("name", "description");
        document.head.appendChild(tag);
      }
      tag.setAttribute("content", desc);
    }
  }, [matches]);
  return null;
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <RouterProvider router={router} InnerWrap={({ children }) => (<>{children}<PageTitles /></>)} />
  </StrictMode>,
);