/* ===================================================================
   LSQ — Responsive helper
   useViewport(): width-tracking hook shared by every component so the
   inline-styled React layout can adapt (media queries can't reach
   inline styles). Top-level function decl → global, callable from any
   text/babel script.
=================================================================== */
function useViewport() {
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const sync = () => setW(window.innerWidth);
    window.addEventListener('resize', sync, { passive: true });
    window.addEventListener('orientationchange', sync);
    window.addEventListener('load', sync);
    // The preview/iframe can settle to its final width AFTER mount without
    // firing a resize, so re-sync on a few delayed sweeps (mirrors the
    // name auto-fit backstops) and observe the document element.
    sync();
    [100, 300, 600, 1200].forEach((t) => setTimeout(sync, t));
    let ro;
    if (typeof ResizeObserver !== 'undefined') {
      ro = new ResizeObserver(sync);
      ro.observe(document.documentElement);
    }
    return () => {
      window.removeEventListener('resize', sync);
      window.removeEventListener('orientationchange', sync);
      window.removeEventListener('load', sync);
      if (ro) ro.disconnect();
    };
  }, []);
  return { w, isTablet: w <= 1024, isMobile: w <= 768, isPhone: w <= 480 };
}

window.useViewport = useViewport;