"use client";

import { useEffect, useState } from "react";

/**
 * The fixed ice scene behind every screen: a navy (or pale) base, four slow
 * drifting glacier blobs, glossy ice orbs that rise slowly and fade at the
 * edges, and a whisper of grain. Purely decorative — it never intercepts
 * pointer events, only transform/opacity animate (each on its own composited
 * layer), the rise stops under `prefers-reduced-motion`, and everything parks
 * while the tab is hidden so a background tab costs no compositor work.
 */
export function IceBackdrop() {
  const [hidden, setHidden] = useState(false);

  useEffect(() => {
    const apply = () => setHidden(document.hidden);
    apply();
    document.addEventListener("visibilitychange", apply);
    return () => document.removeEventListener("visibilitychange", apply);
  }, []);

  return (
    <div className={`ice-scene${hidden ? " ice-paused" : ""}`} aria-hidden>
      <span className="ice-blob ice-blob-a" />
      <span className="ice-blob ice-blob-b" />
      <span className="ice-blob ice-blob-c" />
      <span className="ice-blob ice-blob-d" />
      <span className="ice-orb ice-orb-1" />
      <span className="ice-orb ice-orb-2" />
      <span className="ice-orb ice-orb-3" />
      <span className="ice-orb ice-orb-4" />
      <span className="ice-orb ice-orb-5" />
      <span className="ice-grain" />
    </div>
  );
}