function Nav({ onConsult, onCandidates }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  // Lock body scroll when mobile menu is open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const close = () => setMenuOpen(false);

  return (
    <>
      <nav className={"nav nav--on-dark " + (scrolled ? "nav--scrolled" : "")}>
        <div className="container nav__inner">
          <a href="#top" className="nav__brand" style={{textDecoration:'none'}} onClick={close}>
            <img src="/assets/logo-main.png" alt="Synvori Solutions" className="nav__logo-img"/>
          </a>

          <div className="nav__links">
            <a href="#solutions">Solutions</a>
            <a href="#process">How we work</a>
            <a href="#talent">Talent areas</a>
            <a href="#why">Why Synvori</a>
            <a href="#about">About</a>
          </div>

          <div className="nav__cta">
            <button className="nav__btn nav__btn--ghost" onClick={onCandidates}>For Candidates</button>
            <button className="nav__btn nav__btn--primary" onClick={onConsult}>Schedule a Consultation</button>
            <button
              className={"nav__hamburger" + (menuOpen ? " open" : "")}
              onClick={() => setMenuOpen(!menuOpen)}
              aria-label={menuOpen ? "Close menu" : "Open menu"}
              aria-expanded={menuOpen}
            >
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile menu overlay */}
      <div className={"nav__mobile-menu" + (menuOpen ? " open" : "")} role="dialog" aria-modal="true">
        <div className="nav__mobile-inner">
          <a href="#solutions" onClick={close}>Solutions</a>
          <a href="#process" onClick={close}>How we work</a>
          <a href="#talent" onClick={close}>Talent areas</a>
          <a href="#why" onClick={close}>Why Synvori</a>
          <a href="#about" onClick={close}>About</a>
          <div className="nav__mobile-cta">
            <button className="nav__btn nav__btn--ghost" onClick={() => { onCandidates(); close(); }}>For Candidates</button>
            <button className="nav__btn nav__btn--primary" onClick={() => { onConsult(); close(); }}>Schedule a Consultation</button>
          </div>
        </div>
      </div>
    </>
  );
}

window.Nav = Nav;