/* ============================================================
   CamelWorth — HeroScene island.
   Enhances the static hero illustration on index.html when React 18
   CDN loads: gentle float loop + subtle mouse parallax.
   The SVG itself stays in the HTML, so the hero looks complete
   even if React fails to load. Respects prefers-reduced-motion.
   ============================================================ */
(function () {
  "use strict";

  function mount() {
    if (!window.React || !window.ReactDOM) return;
    var mountNode = document.getElementById("hero-react-root");
    var art = document.getElementById("heroArtWrap");
    if (!mountNode || !art) return;

    var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced) return; // static hero is the accessible experience

    function HeroScene() {
      var outer = React.useRef(null);

      React.useEffect(function () {
        // Adopt the static artwork into the animated wrapper.
        if (outer.current && art.parentNode !== outer.current) {
          outer.current.appendChild(art);
        }
        art.classList.add("hero-float");

        var zone = document.getElementById("heroZone") || outer.current;
        var raf = 0;
        var onMove = function (e) {
          cancelAnimationFrame(raf);
          raf = requestAnimationFrame(function () {
            var r = zone.getBoundingClientRect();
            var x = (e.clientX - r.left) / r.width - 0.5;
            var y = (e.clientY - r.top) / r.height - 0.5;
            if (outer.current) {
              outer.current.style.transform =
                "translate(" + (x * 16).toFixed(1) + "px," + (y * 12).toFixed(1) + "px)";
            }
          });
        };
        var onLeave = function () {
          if (outer.current) outer.current.style.transform = "translate(0,0)";
        };
        zone.addEventListener("mousemove", onMove);
        zone.addEventListener("mouseleave", onLeave);
        return function () {
          cancelAnimationFrame(raf);
          zone.removeEventListener("mousemove", onMove);
          zone.removeEventListener("mouseleave", onLeave);
        };
      }, []);

      return (
        <div
          ref={outer}
          className="float-wrap"
          style={{ transition: "transform 0.3s ease", willChange: "transform" }}
        />
      );
    }

    ReactDOM.createRoot(mountNode).render(<HeroScene />);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", mount);
  } else {
    mount();
  }
})();