// viewport.jsx
// Lightweight responsive helpers. Components call these as bare names
// (they're attached to window so they're accessible from any text/babel script).
//
// Usage inside a component body (top level, like any React hook):
//   const isMobile = useIsMobile();
//   const isTablet = useIsTablet();
//   <div style={{ padding: isMobile ? '24px 16px' : '96px 48px' }} />

function useMediaQuery(query) {
  const [matches, setMatches] = React.useState(() =>
    typeof window !== 'undefined' && window.matchMedia(query).matches
  );
  React.useEffect(() => {
    const mq = window.matchMedia(query);
    const onChange = (e) => setMatches(e.matches);
    mq.addEventListener('change', onChange);
    setMatches(mq.matches);
    return () => mq.removeEventListener('change', onChange);
  }, [query]);
  return matches;
}

function useIsMobile() {
  return useMediaQuery('(max-width: 599px)');
}

function useIsTablet() {
  return useMediaQuery('(max-width: 899px)');
}

Object.assign(window, { useMediaQuery, useIsMobile, useIsTablet });