/* DonnoWeb hub — main App composition */
const { useState, useEffect } = React;

function App() {
  const [activeSection, setActiveSection] = useState('home');
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const onNavigate = (id) => {
    setActiveSection(id);
    setSidebarOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  // Track active section by scroll
  useEffect(() => {
    const ids = ['home', 'products', 'services', 'portfolio', 'about', 'contact'];
    const onScroll = () => {
      const y = window.scrollY + 200;
      for (let i = ids.length - 1; i >= 0; i--) {
        const el = document.getElementById(ids[i]);
        if (el && el.offsetTop <= y) {
          setActiveSection(ids[i]);
          return;
        }
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="dw-app">
      <button className="dw-hamburger" onClick={() => setSidebarOpen(!sidebarOpen)} aria-label="Menu">
        <i className={`fas ${sidebarOpen ? "fa-times" : "fa-bars"}`}></i>
      </button>
      <Sidebar activeSection={activeSection} onNavigate={onNavigate} isOpen={sidebarOpen} />
      <main className="dw-main">
        <Hero onPrimary={() => onNavigate('contact')} />
        <ProductGrid />
        <Services />
        <Portfolio />
        <About />
        <Testimonials />
        <Contact />
        <Footer />
      </main>
      <a className="dw-whatsapp" href={window.DW_WHATSAPP_URL} target="_blank" rel="noreferrer" aria-label="WhatsApp">
        <i className="fab fa-whatsapp"></i>
      </a>
    </div>
  );
}

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