// utils.jsx — Shared utilities for the Atelier prototype.

// useBreakpoint — returns current viewport width and semantic breakpoints.
// Call this inside any component to get responsive layout values.
//
// Breakpoints:
//   isMobile  < 640px   — phone portrait
//   isTablet  < 880px   — tablet / phone landscape (rail collapses here)
//   isDesktop >= 880px
function useBreakpoint() {
  const [width, setWidth] = React.useState(() => window.innerWidth);
  React.useEffect(() => {
    let frame;
    const handler = () => {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => setWidth(window.innerWidth));
    };
    window.addEventListener('resize', handler);
    return () => { window.removeEventListener('resize', handler); cancelAnimationFrame(frame); };
  }, []);
  return {
    width,
    isMobile:  width <  640,
    isTablet:  width <  880,
    isDesktop: width >= 880,
  };
}

window.useBreakpoint = useBreakpoint;