// Responsive primitives for the portfolio prototype.
// Everything in this site is inline-styled JSX, so CSS media queries can't
// reach the layout — instead we read the live viewport with matchMedia and
// branch styles in JS. `useIsMobile()` is the single phone breakpoint used
// across every page (header, tables, hero, footer). 720px catches phones and
// small tablets in portrait; anything wider keeps the full desktop grid.
//
// Exposed on window so the separately-transpiled Babel files
// (direction-a / category-page / subcategory-page / app) can all share it.

function useMediaQuery(query) {
  const get = () => (typeof window.matchMedia === 'function' ? window.matchMedia(query).matches : false);
  const [match, setMatch] = React.useState(get);
  React.useEffect(() => {
    const m = window.matchMedia(query);
    const handler = (e) => setMatch(e.matches);
    // Sync once on mount in case the viewport changed before listeners attached.
    setMatch(m.matches);
    if (m.addEventListener) m.addEventListener('change', handler);
    else m.addListener(handler);
    return () => {
      if (m.removeEventListener) m.removeEventListener('change', handler);
      else m.removeListener(handler);
    };
  }, [query]);
  return match;
}

// Phone / small-tablet portrait. Single committed breakpoint for the whole site.
function useIsMobile() {
  return useMediaQuery('(max-width: 720px)');
}

window.useMediaQuery = useMediaQuery;
window.useIsMobile = useIsMobile;