// Nav.jsx — sticky top nav for DirectCFO marketing site
function Nav({ page = 'Home', onNavigate = () => {} }) {
  const items = ['Services', 'About', 'Contact'];
  const [scrolled, setScrolled] = React.useState(false);

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

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 20,
      background: 'rgba(10,22,40,0.86)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${scrolled ? T.border_d : 'transparent'}`,
      transition: 'border-color 200ms var(--ease-standard, cubic-bezier(.2,0,0,1))',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        height: 64, padding: '0 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a
          onClick={() => onNavigate('Home')}
          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center' }}
          aria-label="DirectCFO — home"
        >
          <WordmarkInline size={28} onDark />
        </a>
        <div style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
          {items.map(item => {
            const active = page === item;
            return (
              <a
                key={item}
                onClick={() => onNavigate(item)}
                style={{
                  fontFamily: F.body, fontSize: 15, fontWeight: 500,
                  color: active ? T.gold : T.mute,
                  textDecoration: 'none', cursor: 'pointer',
                  letterSpacing: 0,
                  transition: 'color 120ms',
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.color = T.white; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.color = T.mute; }}
              >
                {item}
              </a>
            );
          })}
          <Button variant="accent" onClick={openBookings}>
            Book a call →
          </Button>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;