const { useState, useEffect } = React;

function Nav(){
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(()=>{
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive:true });
    return ()=>window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="nav" style={{
      background: scrolled ? 'rgba(250,252,254,0.92)' : 'rgba(250,252,254,0.6)',
    }}>
      <div className="wrap nav-inner">
        <SilgimarLockup markSize={36}/>
        <div className="nav-links">
          <a href="#top">Home</a>
          <a href="#despre">Despre noi</a>
          <a href="#servicii">Servicii</a>
          <a href="#proces">Proces</a>
          <a href="#echipa">Echipa</a>
          <a href="#blog">Blog</a>
        </div>
        <div className="nav-right">
          <a className="nav-cta nav-cta-desktop" href="#contact">Contact <span>→</span></a>
          <button className="hamburger" onClick={()=>setMenuOpen(!menuOpen)} aria-label="Menu">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              {menuOpen
                ? <path d="M18 6L6 18M6 6l12 12"/>
                : <><path d="M3 7h18"/><path d="M3 12h18"/><path d="M3 17h18"/></>
              }
            </svg>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="mobile-menu">
          <a href="#top" onClick={()=>setMenuOpen(false)}>Home</a>
          <a href="#despre" onClick={()=>setMenuOpen(false)}>Despre noi</a>
          <a href="#servicii" onClick={()=>setMenuOpen(false)}>Servicii</a>
          <a href="#proces" onClick={()=>setMenuOpen(false)}>Proces</a>
          <a href="#echipa" onClick={()=>setMenuOpen(false)}>Echipa</a>
          <a href="#blog" onClick={()=>setMenuOpen(false)}>Blog</a>
          <a href="#contact" onClick={()=>setMenuOpen(false)}>Contact</a>
        </div>
      )}
    </nav>
  );
}

function App(){
  return (
    <>
      <Nav/>
      <Hero/>
      <Metrics/>
      <About/>
      <Sectie/>
      <Industries/>
      <Process/>
      <RFID/>
      <Clients/>
      <Testimonial/>
      <Team/>
      <Blog/>
      <CTA/>
      <Footer/>
    </>
  );
}

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