// Nav.jsx — sticky, transparent → solid on scroll, mobile hamburger
const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Work', href: '#work' },
    { label: 'Styles', href: '#styles' },
    { label: 'Process', href: '#process' },
  ];

  return (
    <header className={`nav ${scrolled ? 'nav-solid' : ''}`}>
      <div className="nav-inner">
        <a href="#top" className="nav-word">LA Media Wall</a>
        <nav className="nav-links">
          {links.map(l => <a key={l.href} href={l.href} className="nav-link">{l.label}</a>)}
          <a href="#contact" className="btn btn-primary btn-sm">Get Estimate</a>
        </nav>
        <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(true)}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="17" x2="21" y2="17"/></svg>
        </button>
      </div>

      {open && (
        <div className="mobile-menu">
          <div className="mobile-menu-top">
            <span className="nav-word">LA Media Wall</span>
            <button className="nav-burger" aria-label="Close" onClick={() => setOpen(false)}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
            </button>
          </div>
          <div className="mobile-menu-links">
            {links.map(l => <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>)}
            <a href="#contact" onClick={() => setOpen(false)} className="btn btn-primary" style={{marginTop: 32}}>Request an Estimate</a>
          </div>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;