function Navbar() {
  const mobile = useIsMobile();
  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 links = [
    { label: 'Problem',  href: '#problem'  },
    { label: 'Process',  href: '#process'  },
    { label: 'Examples', href: '#examples' },
  ];

  return (
    <nav style={{
      position: 'fixed', top: 2, left: 0, right: 0, zIndex: 100,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: mobile ? '12px 16px' : '14px 28px',
      background: scrolled ? 'rgba(var(--bg-tint),0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'background 240ms ease, border-color 240ms ease',
    }}>
      <a href="index.html" style={{ textDecoration: 'none', flexShrink: 0 }}>
        <Wordmark size={mobile ? 10 : 12} />
      </a>

      {!mobile && (
        <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {links.map((l) => (
            <a key={l.label} href={l.href}
              style={{
                fontFamily: "'Space Mono', monospace", fontWeight: 700,
                fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: 'var(--muted)', textDecoration: 'none',
                padding: '8px 14px', transition: 'color 160ms ease',
              }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--fg)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--muted)'}>
              {l.label}
            </a>
          ))}
        </div>
      )}

      <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer" className="btn"
        style={mobile ? { fontSize: 9, padding: '10px 14px' } : undefined}>
        {mobile ? 'Book call →' : <>Book 20-min call <span style={{ fontWeight: 400 }}>→</span></>}
      </a>
    </nav>
  );
}
Object.assign(window, { Navbar });