// useIsMobile.jsx — shared responsive breakpoint hook.
// Single source of truth for the institutional mobile breakpoint (≤ 768px).
// Used by every component that needs to switch layout/scale on small screens.
const useIsMobile = (breakpoint = 768) => {
  const query = `(max-width: ${breakpoint}px)`;
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.matchMedia(query).matches
  );
  React.useEffect(() => {
    const mq = window.matchMedia(query);
    const handler = (e) => setIsMobile(e.matches);
    if (mq.addEventListener) mq.addEventListener('change', handler);
    else mq.addListener(handler);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener('change', handler);
      else mq.removeListener(handler);
    };
  }, [query]);
  return isMobile;
};

window.useIsMobile = useIsMobile;