// useIsMobile — single source of truth for desktop/mobile branching across
// the three directions. 800px breakpoint: phones and small tablets render
// the mobile layout, everything wider gets the desktop layout.
//
// Usage in any direction:
//   function D1Home({ data }) {
//     const mobile = useIsMobile();
//     return mobile ? <D1HomeMobile data={data} /> : <D1HomeDesktop data={data} />;
//   }

const NJF_MOBILE_BREAKPOINT = 800;

function useIsMobile() {
  const [mobile, setMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth <= NJF_MOBILE_BREAKPOINT
  );
  React.useEffect(() => {
    const handler = () => setMobile(window.innerWidth <= NJF_MOBILE_BREAKPOINT);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return mobile;
}