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

  const link = {
    fontSize: 13,
    color: 'var(--ink-2)',
    fontWeight: 500,
    padding: '8px 0',
    transition: 'opacity .15s ease',
  };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(255,255,255,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'background .2s ease, border-color .2s ease',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            width: 22, height: 22, background: 'var(--ink)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: 'white', fontFamily: 'var(--mono)', fontWeight: 700, fontSize: 12,
            letterSpacing: '-0.04em',
          }}>F</span>
          <span style={{ fontWeight: 700, fontSize: 16, letterSpacing: '-0.02em' }}>Foreman</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 4 }}>v1.0</span>
        </a>
        <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          <a href="#how" style={link}>How it works</a>
          <a href="#skills" style={link}>Skills</a>
          <a href="#industries" style={link}>Industries</a>
          <a href="#install" style={link}>Install</a>
          <a href="https://github.com/fatihguner/foreman" style={{ ...link, fontFamily: 'var(--mono)', fontSize: 12 }}>github &#x2197;</a>
          <a href="#install" style={{
            background: 'var(--ink)', color: 'white',
            padding: '8px 14px', fontSize: 13, fontWeight: 600,
            letterSpacing: '-0.01em',
          }}>Get Foreman</a>
        </nav>
      </div>
    </header>
  );
}
window.ForemanNav = ForemanNav;