// Shared responsive hook — re-renders components on viewport width change.
// Exposed globally so every website component can branch its inline styles.
function useVW() {
  const [vw, setVW] = React.useState(
    typeof window !== 'undefined' ? window.innerWidth : 1280
  );
  React.useEffect(() => {
    let raf = 0;
    const onResize = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setVW(window.innerWidth));
    };
    window.addEventListener('resize', onResize);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); };
  }, []);
  return vw;
}
// Breakpoint helpers
function useBreakpoint() {
  const vw = useVW();
  return { vw, mobile: vw < 768, tablet: vw >= 768 && vw < 1024, desktop: vw >= 1024, narrow: vw < 1024 };
}
window.useVW = useVW;
window.useBreakpoint = useBreakpoint;