// Общий хук адаптивности — matchMedia, реагирует на resize/поворот экрана.
// Экспортируется в window, чтобы любой babel-standalone скрипт (в своём
// изолированном scope) мог использовать: window.useIsMobile() / useIsTablet().
//
// Подключать ПЕРВЫМ среди text/babel-скриптов поверхности (до компонентов,
// которые вызывают хук).
(function () {
  function makeMediaHook(query) {
    return function useMediaQuery() {
      const read = () => (
        typeof window !== 'undefined' && window.matchMedia
          ? window.matchMedia(query).matches
          : false
      );
      const [matches, setMatches] = React.useState(read);
      React.useEffect(() => {
        if (!window.matchMedia) return undefined;
        const mql = window.matchMedia(query);
        const onChange = () => setMatches(mql.matches);
        onChange(); // синхронизируемся на случай, если значение изменилось до маунта
        // addEventListener('change') — современный API; addListener — старый Safari/iOS.
        if (mql.addEventListener) mql.addEventListener('change', onChange);
        else mql.addListener(onChange);
        return () => {
          if (mql.removeEventListener) mql.removeEventListener('change', onChange);
          else mql.removeListener(onChange);
        };
      }, []);
      return matches;
    };
  }

  // ≤768px — телефон; ≤1024px — планшет/узкий ноут.
  const useIsMobile = makeMediaHook('(max-width: 768px)');
  const useIsTablet = makeMediaHook('(max-width: 1024px)');

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