"use client";

import { useEffect } from "react";

/**
 * Flips `#home-page-css`'s `media` from `print` (inert) to `all` (applied)
 * once the stylesheet has actually loaded — see `app/page.tsx`'s own
 * comment for why that file is deferred this way at all.
 *
 * Originally a raw inline `<script>` with `dangerouslySetInnerHTML`, which
 * works on a full page load (the browser parses and runs it as part of the
 * initial HTML) but not on a client-side navigation to `/` — React then
 * renders that same script tag purely client-side, and browsers never
 * execute a `<script>` inserted that way (confirmed: React's own dev
 * console flagged this — "Scripts inside React components are never
 * executed when rendering on the client"). A `useEffect` runs identically
 * either way (after hydration on first load, after mount on a client-side
 * route transition), so it's the one approach that's correct for both.
 */
export function DeferredHomeCssLoader() {
  useEffect(() => {
    const link = document.getElementById("home-page-css") as HTMLLinkElement | null;
    if (!link) return;

    if (link.sheet) {
      link.media = "all";
      return;
    }

    const onLoad = () => {
      link.media = "all";
    };
    link.addEventListener("load", onLoad);
    return () => link.removeEventListener("load", onLoad);
  }, []);

  return null;
}