// Karavan Auto — app entry (B2B, 5 screens)
const { useState: uS, useEffect: uE } = React;

function App() {
  const [route, setRoute] = uS('home');
  const [toast, setToast] = uS('');

  uE(() => {
    const onToast = (e) => setToast(e.detail);
    window.addEventListener('toast', onToast);
    return () => window.removeEventListener('toast', onToast);
  }, []);

  uE(() => { window.scrollTo({top:0,behavior:'instant'}); }, [route]);

  let screen;
  switch(route) {
    case 'about':    screen = <AboutScreen setRoute={setRoute}/>; break;
    case 'process':  screen = <ProcessScreen setRoute={setRoute}/>; break;
    case 'network':  screen = <NetworkScreen setRoute={setRoute}/>; break;
    case 'contacts': screen = <ContactsScreen/>; break;
    default:         screen = <HomeScreen setRoute={setRoute}/>;
  }

  return (
    <div className="app">
      <UtilBar/>
      <Header route={route} setRoute={setRoute}/>
      <main style={{flex:1}}>{screen}</main>
      <Footer setRoute={setRoute}/>
      <FloatingChats/>
      <Toast msg={toast} onDone={()=>setToast('')}/>
    </div>
  );
}

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