const BP={sm:640,md:768,lg:1024,xl:1280};

function useBreakpoint(){
  const [w,setW]=React.useState(typeof window!=="undefined"?window.innerWidth:BP.xl);
  React.useEffect(()=>{
    let raf=null;
    const onResize=()=>{cancelAnimationFrame(raf);raf=requestAnimationFrame(()=>setW(window.innerWidth))};
    window.addEventListener("resize",onResize);
    return ()=>{window.removeEventListener("resize",onResize);cancelAnimationFrame(raf)};
  },[]);
  return {width:w,isMobile:w<BP.md,isTablet:w>=BP.md&&w<BP.lg,isDesktop:w>=BP.lg,BP};
}

window.BP=BP;
window.useBreakpoint=useBreakpoint;