const App = () => {
  const [route, setRoute] = React.useState('futsal-vs-soccer');

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route]);

  return (
    <div style={{ background: '#F7F7F4', minHeight: '100vh' }}>
      <Header route={route} setRoute={setRoute} />
      {route === 'home'    && <Home setRoute={setRoute} />}
      {route === 'reviews' && <Reviews setRoute={setRoute} />}
      {route === 'videos'  && <Videos setRoute={setRoute} />}
      {route === 'article' && <Article setRoute={setRoute} />}
      {route === 'futsal-vs-soccer' && <ArticleFutsalVsSoccer setRoute={setRoute} />}
      <Footer setRoute={setRoute} />
    </div>
  );
};

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