const NavComponent = ({ onDownload }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      transition: 'all .25s ease',
      padding: scrolled ? '10px 0' : '18px 0',
      background: scrolled ? 'rgba(251,248,254,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(180%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(180%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(15,11,20,0.06)' : '1px solid transparent'
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 600, fontSize: 17 }}>
          <img src="assets/icon-small.png" width="32" height="32" style={{ borderRadius: 8 }} alt="" />
          MailTwin
        </a>
        <div style={{ display: 'flex', gap: 26, marginLeft: 14 }}>
          {[
          ['Features', '#features'],
          ['Privacy', '#privacy'],
          ['Models', '#models'],
          ['Compare', '#compare'],
          ['Pricing', '#pricing'],
          ['FAQ', '#faq']].
          map(([l, h]) =>
          <a key={l} href={h} style={{ fontSize: 14, color: 'var(--ink)', opacity: 0.75, fontWeight: 500 }}>{l}</a>
          )}
        </div>
        <div style={{ flex: 1 }} />
        <a href="https://updates.mailtwin.ai/MailTwin.dmg" className="btn btn-dark" style={{ padding: '10px 18px', fontSize: 14 }}>
          <Icons.Apple size={16} stroke={1.8} /> Download
        </a>
      </div>
    </nav>);
};

window.NavComponent = NavComponent;