// responsive.jsx — viewport hooks for mobile-first layouts.
// Components call useIsMobile() to switch between mobile (default) and
// desktop (>= 768px) layouts.

// Tailwind-ish breakpoints used across the site.
const BREAKPOINTS = {
  sm: 640,
  md: 768,    // tablet / "not phone"
  lg: 1024,   // desktop
  xl: 1280,   // wide desktop
};

// Returns true when viewport width is BELOW the given breakpoint.
// Default: <768px = "mobile" (phone in portrait, narrow tablet).
function useIsMobile(breakpoint = BREAKPOINTS.md) {
  // Default to true so first paint assumes mobile-first.
  const get = () => typeof window !== 'undefined'
    ? window.innerWidth < breakpoint
    : true;
  const [isMobile, setIsMobile] = React.useState(get);
  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
    const update = () => setIsMobile(mql.matches);
    update();
    if (mql.addEventListener) mql.addEventListener('change', update);
    else mql.addListener(update); // Safari fallback
    return () => {
      if (mql.removeEventListener) mql.removeEventListener('change', update);
      else mql.removeListener(update);
    };
  }, [breakpoint]);
  return isMobile;
}

// Returns the current viewport width — useful for clamp-style sizing.
function useViewportWidth() {
  const [w, setW] = React.useState(() => typeof window !== 'undefined' ? window.innerWidth : 1024);
  React.useEffect(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener('resize', onResize, { passive: true });
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return w;
}

// Pick a value based on whether we're on mobile.
// Usage: mobile(64, 192, isMobile) → 64 on phone, 192 on desktop.
function mobile(mobileVal, desktopVal, isMobile) {
  return isMobile ? mobileVal : desktopVal;
}

Object.assign(window, { useIsMobile, useViewportWidth, mobile, BREAKPOINTS });