/* HiFi page wrapper — applies polish to any v2 page without rewriting it.
   Adds:
     - Mount entry fade-up on the whole page
     - IntersectionObserver — auto-adds .is-in on direct children of <section> as you scroll
     - Global subtle grain
   Used by the prototype for pages that don't have a dedicated *-hifi.jsx yet
   (Bio/Ideas/Archive/About/Legacy/IdeaTheme/LibraryWork). */

function HfFrame({ children }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const root = ref.current;
    if (!root) return;
    // mark every section's direct child as scroll-revealable
    const sections = root.querySelectorAll("section");
    const targets = [];
    sections.forEach((s) => {
      Array.from(s.children).forEach((c) => {
        c.classList.add("hf-reveal");
        targets.push(c);
      });
    });
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { root, threshold: 0.08, rootMargin: "0px 0px -6% 0px" }
    );
    targets.forEach((t) => io.observe(t));
    return () => io.disconnect();
  }, []);

  return (
    <div ref={ref} style={{ width: "100%", height: "100%", overflow: "auto", position: "relative" }} className="hf-fade">
      {children}
      <div className="hf-grain" style={{ position: "fixed", opacity: 0.035, zIndex: 100 }} />
    </div>
  );
}

Object.assign(window, { HfFrame });