/* ============ App / routing ============ */
function App(){
  const [route,setRoute]=useState({page:"home",params:{}});
  const [showTop,setShowTop]=useState(false);

  const nav=(page,params={})=>{
    setRoute({page,params});
    window.scrollTo({top:0,behavior:"instant"in window?"instant":"auto"});
  };

  useEffect(()=>{
    const onScroll=()=>setShowTop(window.scrollY>700);
    window.addEventListener("scroll",onScroll);return()=>window.removeEventListener("scroll",onScroll);
  },[]);

  // map current page to active nav key
  const activeKey=(()=>{
    if(route.page==="home")return "home";
    const c=route.params.cat;
    if(c==="イベント")return "event";
    if(c==="おでかけスポット")return "spot";
    if(c==="雨の日")return "rain";
    if(c==="無料スポット")return "free";
    return route.page==="list"?"area":"";
  })();

  return (
    <FavProvider>
      <div className="app">
        <Header nav={nav} active={activeKey}/>
        {route.page==="home" && <Home nav={nav}/>}
        {route.page==="list" && <ListPage nav={nav} filter={route.params}/>}
        {route.page==="detail" && <DetailPage nav={nav} id={route.params.id}/>}
        <Footer nav={nav}/>
      </div>
      <button className={"to-top"+(showTop?" show":"")} aria-label="トップへ戻る"
        onClick={()=>window.scrollTo({top:0,behavior:"smooth"})}><Icon n="arrowUp"/></button>
    </FavProvider>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);