// Nav.jsx — fixed top navigation on Deep surface, anchor links scroll to sections
function Nav() {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

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

  const items = [
    { href: '#philosophy', label: 'Philosophy' },
    { href: '#method',     label: 'Method' },
    { href: '#work',       label: 'Work' },
    { href: '#team',       label: 'Team' },
  ];

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(11,28,18,0.92)' : 'var(--aq-deep)',
      borderBottom: scrolled ? '1px solid rgba(216,228,220,.18)' : '1px solid rgba(216,228,220,.10)',
      padding: '22px 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      transition: 'background 320ms var(--ease-out), border-color 320ms var(--ease-out)',
    }}>
      <a href="#top" style={{
        fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 24,
        color: 'var(--aq-parchment)', letterSpacing: '-0.01em', textDecoration: 'none',
      }}>
        Accio<span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, color: 'var(--aq-teal)' }}>IQ</span>
      </a>
      <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
        {items.map(it => (
          <a key={it.href} href={it.href} className="aq-nav-link"
             style={{ color: 'var(--aq-parchment)' }}>
            {it.label}
          </a>
        ))}
        <a href="#contact" className="aq-btn aq-btn--primary"
           style={{ background: 'var(--aq-teal)', color: 'var(--aq-deep)', borderColor: 'transparent' }}>
          Request a consultation →
        </a>
      </div>
    </nav>
  );
}
window.Nav = Nav;