// Sticky nav for full-site view
function Nav({ logoVariant = 'a' }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  React.useEffect(() => {
    if (!menuOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [menuOpen]);

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

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''} ${menuOpen ? 'menu-open' : ''}`}>
      <div className="container nav-inner">
        <Logo variant={logoVariant} size="md" />
        <button
          type="button"
          className="nav-toggle"
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(o => !o)}
        >
          <span/><span/><span/>
        </button>
        <div className="nav-links">
          <a href="#belief" onClick={close}>Why me</a>
          <a href="#services" onClick={close}>Services</a>
          <a href="#results" onClick={close}>Results</a>
          <a href="#podcast" onClick={close}>Podcast</a>
          <a href="#about" onClick={close}>About</a>
          <a href="https://cal.com/megan-hunter" target="_blank" rel="noopener noreferrer" className="btn btn-primary" onClick={close} style={{ padding: '11px 20px', fontSize: 13 }}>
            Book an intro call
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
          </a>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;