function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 10);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  return (
    <nav style={{
      position: 'fixed',
      top: 0, left: 0, right: 0,
      zIndex: 100,
      padding: '14px var(--pad)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      backdropFilter: scrolled ? 'blur(16px) saturate(160%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(160%)' : 'none',
      background: scrolled ? 'rgba(10,10,11,0.72)' : 'transparent',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'background .25s ease, border-color .25s ease, backdrop-filter .25s ease',
    }}>
      <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <img src="assets/zion-logo.png" alt="Zion Labz" style={{ width: 26, height: 26, filter: 'drop-shadow(0 0 8px rgba(30,123,255,0.5))' }} />
        <span style={{ fontWeight: 600, letterSpacing: '-0.01em', fontSize: 15 }}>
          Zion Labz
        </span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginLeft: 6, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          /labs
        </span>
      </a>

      <div className="hide-sm" style={{
        display: 'flex', gap: 28, alignItems: 'center',
        fontSize: 13, color: 'var(--ink-2)',
      }}>
        <a href="#capabilities" style={navLink}>Capacidades</a>
        <a href="#ecosystem" style={navLink}>Ecossistema</a>
        <a href="#approach" style={navLink}>Abordagem</a>
        <a href="#mentoria" style={navLink}>Mentoria</a>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="mono hide-sm" style={{ fontSize: 11, color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <span className="live-dot"></span>
          SISTEMAS ATIVOS
        </span>
        <a
          href="https://wa.me/5511941040491?text=Ol%C3%A1%21%20Vim%20do%20site%20da%20Zion%20Labz%20e%20quero%20saber%20mais%20sobre%20a%20mentoria."
          target="_blank"
          rel="noreferrer"
          className="btn primary"
          style={{ padding: '10px 16px', fontSize: 13 }}
        >
          Trabalhe conosco
          <span className="arrow">→</span>
        </a>
      </div>
    </nav>
  );
}
const navLink = {
  transition: 'color .2s',
  position: 'relative',
};

window.Nav = Nav;