const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Services', href: '#services' },
    { label: 'Method', href: '#method' },
    { label: 'Insights', href: '#insights' },
    { label: 'Clients', href: '#clients' },
    { label: 'FAQ', href: '#faq' },
  ];

  return (
    <header className={`site-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="nav-inner">
        <a href="#top" className="brand">
          <span className="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22">
              <rect x="2" y="2" width="9" height="20" rx="1.5" fill="currentColor" />
              <rect x="13" y="2" width="9" height="9" rx="1.5" fill="currentColor" opacity="0.55" />
              <rect x="13" y="13" width="9" height="9" rx="1.5" fill="currentColor" opacity="0.28" />
            </svg>
          </span>
          <span className="brand-name">Main Street<span className="brand-sub"> / Research</span></span>
        </a>

        <nav className="nav-pill" aria-label="Primary">
          {links.map(l => (
            <a key={l.href} href={l.href}>{l.label}</a>
          ))}
        </nav>

        <div className="nav-cta">
          <a href="#contact" className="btn btn-ghost">Sign in</a>
          <a href="#contact" className="btn btn-primary">
            Start a brief
            <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>

        <button className="nav-burger" aria-label="Menu" onClick={() => setMenuOpen(!menuOpen)}>
          <span /><span /><span />
        </button>
      </div>

      {menuOpen && (
        <div className="nav-mobile">
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
          ))}
          <a href="#contact" className="btn btn-primary full">Start a brief</a>
        </div>
      )}
    </header>
  );
};

window.Nav = Nav;