/* global React, ReactDOM, window */

function CustomCursor() {
  const { useMotionValue, useSpring } = window.FM;
  const ref = React.useRef(null);
  const rawX = useMotionValue(-200);
  const rawY = useMotionValue(-200);
  const x = useSpring(rawX, { damping: 30, stiffness: 600, mass: 0.4 });
  const y = useSpring(rawY, { damping: 30, stiffness: 600, mass: 0.4 });

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let rafId;
    const tick = () => {
      el.style.left = x.get() + "px";
      el.style.top  = y.get() + "px";
      rafId = requestAnimationFrame(tick);
    };
    rafId = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafId);
  }, [x, y]);

  React.useEffect(() => {
    const el = ref.current;
    const move = (e) => { rawX.set(e.clientX); rawY.set(e.clientY); };
    const over = (e) => {
      const t = e.target.closest("[data-cursor-label]");
      const h = e.target.closest("[data-cursor='hover'],a,button,.proj,.svc,.bl-card,.filter,.chip,.erow");
      el.classList.remove("is-hover", "has-label");
      if (t) { el.classList.add("has-label"); el.setAttribute("data-label", t.getAttribute("data-cursor-label")); }
      else if (h) { el.classList.add("is-hover"); }
    };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseover", over);
    return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseover", over); };
  }, []);

  return <div className="cursor" ref={ref} />;
}

function App() {
  const [page, setPage] = React.useState("home");
  const [projectId, setProjectId] = React.useState(null);

  const go = (id, pid) => {
    setPage(id);
    if (id === "project") setProjectId(pid);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--sage",      "#8B9D77");
    r.style.setProperty("--sage-deep", "#6F8260");
    r.style.setProperty("--stone",     "#C4B49A");
    r.style.setProperty("--serif",     '"Cormorant Garamond","Times New Roman",serif');
  }, []);

  // Magnetic pull on primary CTAs
  React.useEffect(() => {
    const onMove = (e) => {
      document.querySelectorAll('.btn--primary').forEach(btn => {
        const r = btn.getBoundingClientRect();
        const cx = r.left + r.width / 2;
        const cy = r.top + r.height / 2;
        const dx = e.clientX - cx;
        const dy = e.clientY - cy;
        const dist = Math.hypot(dx, dy);
        const radius = 100;
        if (dist < radius) {
          const f = (1 - dist / radius) * 0.3;
          btn.style.transform = `translate(${dx * f}px,${dy * f}px)`;
          btn.style.transition = 'transform 0.18s ease';
        } else {
          btn.style.transform = '';
          btn.style.transition = 'transform 0.5s cubic-bezier(0.16,1,0.3,1)';
        }
      });
    };
    window.addEventListener('mousemove', onMove, { passive: true });
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <>
      <CustomCursor />
      <window.Site page={page} projectId={projectId} go={go} isMobile={false} direction="editorial" prod={true} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("presenter")).render(<App/>);