// Picks BMobile vs BDesktop based on viewport width.
// Breakpoint: 1024px — below = mobile layout, at/above = desktop layout.

const useIsMobile = (breakpoint = 1024) => {
  const get = () => typeof window !== "undefined" && window.innerWidth < breakpoint;
  const [isMobile, setIsMobile] = React.useState(get);
  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
    const onChange = (e) => setIsMobile(e.matches);
    if (mql.addEventListener) mql.addEventListener("change", onChange);
    else mql.addListener(onChange);
    setIsMobile(mql.matches);
    return () => {
      if (mql.removeEventListener) mql.removeEventListener("change", onChange);
      else mql.removeListener(onChange);
    };
  }, [breakpoint]);
  return isMobile;
};

const App = () => {
  const isMobile = useIsMobile(1024);
  return isMobile ? <BMobile /> : <BDesktop />;
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);