function Nav({ onCTA }) {
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

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

  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="logo" onClick={close}>
          <img src="assets/logo.png" alt="New Day Construction" className="logo-img" />
        </a>
        <div className="nav-links">
          <a href="#gallery">Gallery</a>
          <a href="#process">Process</a>
          <a href="#reviews">Reviews</a>
          <a href="#service-area">Service Area</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-right">
          <button className="btn btn-primary nav-cta" onClick={onCTA}>
            <span className="nav-cta-long">Get Free Estimate &amp; Offer</span>
            <span className="nav-cta-short">Free Estimate</span>
            <Ic.arrow />
          </button>
          <button
            className="nav-burger"
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span className={"burger " + (menuOpen ? "is-open" : "")}>
              <span /><span /><span />
            </span>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="nav-drawer" onClick={close}>
          <div className="nav-drawer-sheet" onClick={e => e.stopPropagation()}>
            <a href="#gallery" onClick={close}>Gallery</a>
            <a href="#process" onClick={close}>Process</a>
            <a href="#reviews" onClick={close}>Reviews</a>
            <a href="#service-area" onClick={close}>Service Area</a>
            <a href="#faq" onClick={close}>FAQ</a>
            <div className="nav-drawer-actions">
              <button className="btn btn-primary btn-lg" onClick={() => { close(); onCTA(); }}>
                Get Free Estimate &amp; Offer <Ic.arrow />
              </button>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}
window.Nav = Nav;