function App() {
  const [cart, setCart] = React.useState([]);
  const [isCartOpen, setIsCartOpen] = React.useState(false);
  const [activePage, setActivePage] = React.useState('home');

  const navigate = (page) => {
    setActivePage(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <>
      <Nav cart={cart} setIsCartOpen={setIsCartOpen} activePage={activePage} navigate={navigate} />

      {activePage === 'home' && (
        <>
          <Hero navigate={navigate} />
          <ColorsSection />
          <PortfolioSection />
          <BuilderSection cart={cart} setCart={setCart} isCartOpen={isCartOpen} setIsCartOpen={setIsCartOpen} />
          <TestimonialsSection />
        </>
      )}

      {activePage === 'story' && <StorySection />}

      {activePage === 'help' && (
        <>
          <FAQSection />
          <PolicySection />
          <ContactSection />
        </>
      )}

      <Footer navigate={navigate} />
      <ChatWidget cart={cart} setCart={setCart} />
    </>
  );
}

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