// Shared responsive helpers. The whole site is built with inline styles, so we
// can't use CSS media queries directly — this hook lets each section switch its
// grid/padding based on the current viewport width.

// Breakpoints (px, max-width style):
//   mobile  ≤ 760  — single column, stacked, tight padding
//   narrow  ≤ 1024 — tablet, reduced column counts
const KL_BP = { mobile: 760, narrow: 1024 };

function useViewportWidth() {
  const [width, setWidth] = React.useState(
    typeof window !== 'undefined' ? window.innerWidth : 1200
  );
  React.useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    onResize();
    window.addEventListener('resize', onResize, { passive: true });
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return width;
}

// Convenience: returns { width, isMobile, isNarrow }.
function useBreakpoints() {
  const width = useViewportWidth();
  return {
    width,
    isMobile: width <= KL_BP.mobile,
    isNarrow: width <= KL_BP.narrow,
  };
}

Object.assign(window, { KL_BP, useViewportWidth, useBreakpoints });