"use client";

import { useEffect, useState } from "react";

/**
 * The fixed ice scene behind every screen: a navy (or pale) base, four soft
 * glacier blobs and glossy ice orbs that rise slowly through the open band
 * and fade at its edges. 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 or the window has lost focus, so a page nobody is
 * looking at costs no compositor work.
 */
export function IceBackdrop() {
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    const apply = () => setPaused(document.hidden || !document.hasFocus());
    apply();
    document.addEventListener("visibilitychange", apply);
    window.addEventListener("focus", apply);
    window.addEventListener("blur", apply);
    return () => {
      document.removeEventListener("visibilitychange", apply);
      window.removeEventListener("focus", apply);
      window.removeEventListener("blur", apply);
    };
  }, []);

  return (
    <div className={`ice-scene${paused ? " 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" />
      <div className="ice-floats">
        <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" />
        {/* Aero-only bubbles: display:none unless the aero theme is on, so they
            cost nothing in the other themes (see .ice-bubble in globals.css). */}
        <span className="ice-bubble ice-bubble-1" />
        <span className="ice-bubble ice-bubble-2" />
        <span className="ice-bubble ice-bubble-3" />
        <span className="ice-bubble ice-bubble-4" />
        <span className="ice-bubble ice-bubble-5" />
        <span className="ice-bubble ice-bubble-6" />
        <span className="ice-bubble ice-bubble-7" />
        <span className="ice-bubble ice-bubble-8" />
        <span className="ice-bubble ice-bubble-9" />
        <span className="ice-bubble ice-bubble-10" />
        <span className="ice-bubble ice-bubble-11" />
        <span className="ice-bubble ice-bubble-12" />
        <span className="ice-bubble ice-bubble-13" />
        <span className="ice-bubble ice-bubble-14" />
        <span className="ice-bubble ice-bubble-15" />
        <span className="ice-bubble ice-bubble-16" />
        <span className="ice-bubble ice-bubble-17" />
        <span className="ice-bubble ice-bubble-18" />
      </div>
    </div>
  );
}