/* eslint-disable */
// App — tiny in-page router. Renders the active screen.

function App() {
  const [route, setRoute] = React.useState('home');

  // Refresh lucide icons whenever the route changes (icons render after mount).
  React.useEffect(() => {
    if (window.lucide && window.lucide.createIcons) {
      window.lucide.createIcons();
    }
    window.scrollTo({top: 0, behavior: 'instant'});
  }, [route]);

  let screen;
  if (route === 'home')      screen = <HomeScreen      setRoute={setRoute} />;
  else if (route === 'article')   screen = <ArticleScreen   setRoute={setRoute} />;
  else if (route === 'advertise') screen = <AdvertiseScreen setRoute={setRoute} />;
  else if (route === 'jobs')      screen = <JobsScreen      setRoute={setRoute} />;
  else if (route === 'directory') screen = <DirectoryScreen setRoute={setRoute} />;
  else if (route === 'courses')   screen = <CoursesScreen   setRoute={setRoute} />;
  else                       screen = <HomeScreen      setRoute={setRoute} />;

  return (
    <LangProvider>
      <TweaksProvider>
        <div className="app">
          <SiteHeader route={route} setRoute={setRoute} />
          <main>{screen}</main>
          <SiteFooter setRoute={setRoute} />
          {window.ChatCluster && <ChatCluster />}
        </div>
      </TweaksProvider>
    </LangProvider>
  );
}

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