function Navbar() {
  const [scrolled, setScrolled] = React.useState(false);

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

  return (
    <motion.nav
      style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 48px',
        transition: 'background 0.4s ease, border-color 0.4s ease',
        background: scrolled ? 'rgba(12,11,9,0.88)' : 'transparent',
        backdropFilter: scrolled ? 'blur(16px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(16px)' : 'none',
        borderBottom: scrolled ? '1px solid rgba(237,233,225,0.06)' : '1px solid transparent',
      }}
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease: 'easeOut' }}
    >
      {/* Logo image only */}
      <a href="#" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
        <img
          src="uploads/ventureup-pfp-transparent.png"
          alt="VentureUp Solutions"
          style={{ height: 36, width: 'auto', display: 'block' }}
        />
      </a>

      {/* Nav links — hidden on mobile */}
      <div className="nav-links" style={{
        display: 'flex', alignItems: 'center', gap: 6,
        fontFamily: "'DM Sans', sans-serif", fontSize: 13.5,
        color: 'var(--muted)',
      }}>
        {[
          { label: 'How It Works', href: '#how-it-works' },
          { label: 'What We Build', href: '#examples' },
        ].map((link, i) => (
          <React.Fragment key={link.label}>
            {i > 0 && <span style={{ color: 'rgba(237,233,225,0.15)', margin: '0 2px' }}>·</span>}
            <a
              href={link.href}
              target={link.external ? '_blank' : undefined}
              rel={link.external ? 'noopener noreferrer' : undefined}
              style={{ color: 'inherit', textDecoration: 'none', padding: '4px 8px', transition: 'color 0.2s' }}
              onMouseEnter={e => e.target.style.color = 'var(--fg)'}
              onMouseLeave={e => e.target.style.color = 'var(--muted)'}
            >{link.label}</a>
          </React.Fragment>
        ))}
      </div>

      {/* CTA */}
      <a
        href={CALENDLY_URL}
        target="_blank"
        rel="noopener noreferrer"
        style={{
          fontFamily: "'DM Sans', sans-serif",
          fontSize: 13.5, fontWeight: 500,
          color: 'var(--bg)', background: 'var(--fg)',
          padding: '8px 20px', borderRadius: 40,
          textDecoration: 'none', letterSpacing: '0.01em',
          transition: 'opacity 0.2s', whiteSpace: 'nowrap',
        }}
        onMouseEnter={e => e.target.style.opacity = '0.85'}
        onMouseLeave={e => e.target.style.opacity = '1'}
      >
        Book a call
      </a>
    </motion.nav>
  );
}

Object.assign(window, { Navbar });