/**
 * useViewport — Global viewport/breakpoint hook for YBP APP
 * Replaces all scattered screen.width / innerWidth checks throughout the app.
 * Debounced resize + orientationchange listener. Safe for SSR-like environments.
 */
(function () {
  const { useState, useEffect } = React;

  const BREAKPOINTS = { mobile: 768, tablet: 1024 };

  const getViewport = () => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    return {
      width: w,
      height: h,
      isMobile: w < BREAKPOINTS.mobile,
      isTablet: w >= BREAKPOINTS.mobile && w < BREAKPOINTS.tablet,
      isDesktop: w >= BREAKPOINTS.tablet,
      isLandscape: w > h,
      isPortrait: h >= w,
    };
  };

  const useViewport = () => {
    const [vp, setVp] = useState(getViewport);
    useEffect(() => {
      let timeout;
      const handler = () => {
        clearTimeout(timeout);
        timeout = setTimeout(() => setVp(getViewport()), 100);
      };
      window.addEventListener('resize', handler);
      window.addEventListener('orientationchange', handler);
      return () => {
        window.removeEventListener('resize', handler);
        window.removeEventListener('orientationchange', handler);
        clearTimeout(timeout);
      };
    }, []);
    return vp;
  };

  window.useViewport = useViewport;
  window.YBP_BREAKPOINTS = BREAKPOINTS;
})();