/* Shared viewport hook. Loaded before all components. */
function useViewport() {
  const [width, setWidth] = React.useState(
    typeof window !== "undefined" ? window.innerWidth : 1440
  );
  React.useEffect(() => {
    let raf;
    const onResize = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setWidth(window.innerWidth));
    };
    window.addEventListener("resize", onResize, { passive: true });
    return () => {
      window.removeEventListener("resize", onResize);
      cancelAnimationFrame(raf);
    };
  }, []);
  return {
    width,
    isMobile: width < 768,
    isTablet: width >= 768 && width < 1024,
    isDesktop: width >= 1024,
  };
}
window.useViewport = useViewport;