/* Breakpoints compartilhados.
   O restante da página é escrito com inline styles, que vencem qualquer regra CSS —
   então as mudanças estruturais de layout precisam ser decididas em JS, não em @media. */

const ACS_BP = { mobile: '(max-width: 767px)', tablet: '(max-width: 1023px)' };

function useMediaQuery(query) {
  const subscribe = React.useCallback((onChange) => {
    const mql = window.matchMedia(query);
    mql.addEventListener('change', onChange);
    return () => mql.removeEventListener('change', onChange);
  }, [query]);

  return React.useSyncExternalStore(
    subscribe,
    () => window.matchMedia(query).matches,
    () => false, // SSR/primeiro paint: assume desktop, igual ao layout base
  );
}

const useIsMobile = () => useMediaQuery(ACS_BP.mobile);
const useIsTablet = () => useMediaQuery(ACS_BP.tablet);

/* Trava o scroll do body enquanto um overlay (drawer da nav) está aberto. */
function useScrollLock(isLocked) {
  React.useEffect(() => {
    if (!isLocked) return;
    const previous = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = previous; };
  }, [isLocked]);
}

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