// Nav.jsx — sticky, command-palette feel
const { useState: useStateNav, useEffect: useEffectNav } = React;

function Nav() {
  const [scrolled, setScrolled] = useStateNav(false);
  const [menuOpen, setMenuOpen] = useStateNav(false);
  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const closeMenu = () => setMenuOpen(false);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 30,
      background: scrolled || menuOpen ? 'rgba(0,0,0,0.78)' : 'transparent',
      backdropFilter: scrolled || menuOpen ? 'saturate(1.4) blur(10px)' : 'none',
      WebkitBackdropFilter: scrolled || menuOpen ? 'saturate(1.4) blur(10px)' : 'none',
      borderBottom: scrolled || menuOpen ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'background 180ms var(--ease-out), border-color 180ms var(--ease-out)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '14px var(--gutter)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16, position: 'relative',
      }}>
        <a href="#top" style={{
          fontFamily: 'var(--font-mono)', fontSize: 14,
          color: 'var(--fg)', textDecoration: 'none', letterSpacing: '-0.02em',
          display: 'inline-flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{
            width: 10, height: 10, background: 'var(--fg)',
            display: 'inline-block',
          }}/>
          Now or Never.
        </a>

        <button
          type="button"
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          className="nn-nav-burger"
          onClick={() => setMenuOpen(o => !o)}
        >
          {menuOpen ? 'CLOSE' : 'MENU'}
        </button>

        <nav className="nn-nav-list" data-open={menuOpen ? 'true' : 'false'}>
          <a href="#products"  style={navLink} className="nn-nav-link" onClick={closeMenu}>Products</a>
          <a href="#log"       style={navLink} className="nn-nav-link" onClick={closeMenu}>Log</a>
          <a href="https://0xechan.xyz" style={navLink} className="nn-nav-link" onClick={closeMenu}>echan.xyz <span style={{ color:'var(--fg-3)' }}>↗</span></a>
          <span className="nn-nav-divider" style={{ width: 1, height: 16, background: 'var(--border)', margin: '0 8px' }}/>
          <span className="nn-nav-icons">
            <a href="https://github.com/therealechan" title="GitHub" style={navIcon} onClick={closeMenu}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><use href="icons/sprite.svg#i-github"/></svg>
            </a>
            <a href="https://x.com/0xechan" title="X" style={navIcon} onClick={closeMenu}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><use href="icons/sprite.svg#i-x-twitter"/></svg>
            </a>
          </span>
        </nav>
      </div>
    </header>
  );
}

const navLink = {
  fontFamily: 'var(--font-mono)', fontSize: 13,
  color: 'var(--fg-2)', textDecoration: 'none',
  padding: '8px 12px',
  transition: 'color 120ms var(--ease-out), background 120ms var(--ease-out)',
};
const navIcon = {
  color: 'var(--fg-2)', textDecoration: 'none',
  padding: 8, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  border: '1px solid var(--border)',
};

window.Nav = Nav;