// App — routes between home / how-it-works / waitlist. State-based, no router.
function App() {
  const [route, setRoute] = React.useState('home');

  React.useEffect(() => {
    // re-run lucide on route change so newly mounted icons render
    setTimeout(() => window.lucide && window.lucide.createIcons(), 0);
  }, [route]);

  return (
    <>
      <Header route={route} setRoute={setRoute} />
      {route === 'home' && (
        <>
          <Hero setRoute={setRoute} />
          <Solution />
          <Problem />
          <WhoFor />
          <Benefits />
          <Comparison />
          <TrustSummary />
          <FinalCTA setRoute={setRoute} />
        </>
      )}
      {route === 'how' && <HowItWorks setRoute={setRoute} />}
      {route === 'waitlist' && <Waitlist setRoute={setRoute} />}
      <Footer setRoute={setRoute} />
    </>
  );
}

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