// Shared responsive hook. Mirrors the matchMedia pattern already used in Hero/ProductPage
// for reduced-motion — no new dependency, no design change. Components read a width bucket
// and collapse multi-column / oversized layout to a single stacked column on narrow screens.
//
// Breakpoints (width buckets, NOT device names — every phone/tablet falls into one):
//   phone  : < 640px   (iPhone ~375-430, Android ~360-412 all land here)
//   tablet : 640-1024  (large phones landscape, small tablets)
//   desktop: > 1024px  (the original design — untouched)
window.SYN_BP = { phone: 640, tablet: 1024 };

function useViewport() {
  const get = () => (typeof window === 'undefined' ? 1200 : window.innerWidth);
  const [w, setW] = React.useState(get);
  React.useEffect(() => {
    let raf = 0;
    const onResize = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setW(get()));
    };
    window.addEventListener('resize', onResize);
    return () => { window.removeEventListener('resize', onResize); cancelAnimationFrame(raf); };
  }, []);
  return w;
}

// Convenience: booleans for the two thresholds most components need.
function useIsMobile() {
  const w = useViewport();
  return { isPhone: w < window.SYN_BP.phone, isTablet: w < window.SYN_BP.tablet, width: w };
}

window.useViewport = useViewport;
window.useIsMobile = useIsMobile;