// Trove — tiny viewport hook shared across screens.
// Exposes window.useViewport() -> { w, isMobile, isTablet }.
// Breakpoints: mobile <= 640 (phones), tablet <= 960 (covers iPad portrait).
function useViewport() {
  const get = () => (typeof window !== 'undefined' ? window.innerWidth : 1200);
  const [w, setW] = React.useState(get);
  React.useEffect(() => {
    let raf = null;
    function onResize() {
      if (raf) cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setW(get()));
    }
    window.addEventListener('resize', onResize);
    window.addEventListener('orientationchange', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
      window.removeEventListener('orientationchange', onResize);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return { w, isMobile: w <= 640, isTablet: w <= 960 };
}
window.useViewport = useViewport;