/* Роутинг и монтирование приложения */
function App() {
  const [route, setRoute] = useState(() => (location.hash || '#home').slice(1));
  const scroller = useRef(null);

  function go(id) {
    setRoute(id);
    if (history.replaceState) history.replaceState(null, '', '#'+id);
    else location.hash = id;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
  useEffect(() => {
    const onHash = () => setRoute((location.hash || '#home').slice(1));
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // плавное появление: добавляем .in после монтирования (setTimeout надёжнее rAF в фоне)
  useEffect(() => {
    const els = document.querySelectorAll('.fade-up:not(.in)');
    const t = setTimeout(() => els.forEach((el, i) => {
      el.style.transitionDelay = Math.min(i * 60, 240) + 'ms';
      el.classList.add('in');
    }), 40);
    return () => clearTimeout(t);
  }, [route]);

  const Page = ({
    home: window.Home, feed: window.Feed, school: window.School,
    library: window.Library, rental: window.Rental, account: window.Account,
  })[route] || window.Home;

  return (
    <React.Fragment>
      <Header route={route} go={go} />
      <main key={route}>
        <Page go={go} />
      </main>
      <Footer go={go} />
    </React.Fragment>
  );
}

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