// Nav.jsx
const { useState, useEffect } = React;

function Nav({ page, setPage }){
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h); h();
    return () => window.removeEventListener('scroll', h);
  }, []);
  const links = [
    ['home','Home'], ['about','About'], ['services','Services'],
    ['process','Process'], ['battery','Battery'], ['projects','Projects'],
    ['faq','FAQ'], ['blog','Blog']
  ];
  const go = (p) => { setPage(p); setOpen(false); window.scrollTo({top:0, behavior:'instant'}); };
  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="container nav-inner">
          <button className="nav-logo" onClick={() => go('home')} style={{background:'none', border:0, padding:0, cursor:'pointer'}}>
            <img src="assets/logo-white.jpg" alt="SSP Electrical" />
          </button>
          <div className="nav-links">
            {links.map(([id,l]) => (
              <button key={id} className={`nav-link ${page===id?'active':''}`} onClick={() => go(id)}>{l}</button>
            ))}
          </div>
          <button className="nav-cta" onClick={() => go('contact')}>Get a free quote</button>
          <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menu">
            {open ? <Icons.Close/> : <Icons.Menu/>}
          </button>
        </div>
      </nav>
      {open && (
        <div style={{position:'fixed', inset:0, zIndex:99, background:'rgba(7,7,11,0.96)', backdropFilter:'blur(16px)', padding:'100px 32px'}}>
          {links.concat([['contact','Contact']]).map(([id,l]) => (
            <button key={id} className={`nav-link ${page===id?'active':''}`} style={{display:'block', width:'100%', textAlign:'left', padding:'18px 0', fontSize:22, fontFamily:"'Inter Tight'", letterSpacing:'-0.02em', borderRadius:0, borderBottom:'1px solid rgba(255,255,255,0.06)'}} onClick={() => go(id)}>{l}</button>
          ))}
        </div>
      )}
    </>
  );
}

window.Nav = Nav;