const Navbar = ({ tweaks, toggleTweaks }) => {
  const [scrolled, setScrolled] = React.useState(false);

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

  const links = [
    { label: 'capacidades', href: '#servicios' },
    { label: 'proyectos', href: '#trabajo' },
    { label: 'notas', href: '#cuaderno' },
  ];

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(244,239,230,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(8px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(8px)' : 'none',
      borderBottom: scrolled ? '2px solid #111' : '2px solid transparent',
      transition: 'all 0.3s ease',
      padding: '0 clamp(16px, 4vw, 48px)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 64,
        gap: 16,
      }}>
        <Logo size={22} showTag={true} tagText="// AI engineering" href="#" />

        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <div className="nav-links" style={{
            display: 'flex', alignItems: 'center', gap: 28,
          }}>
            {links.map(l => (
              <a key={l.href} href={l.href} style={{
                fontFamily: 'var(--font-mono)', fontSize: 13, color: '#111',
                textDecoration: 'none', letterSpacing: '0.04em',
                position: 'relative', padding: '4px 0',
              }} className="nav-link">{l.label}</a>
            ))}
            <a href="#contacto" style={{
              fontFamily: 'var(--font-mono)', fontSize: 13,
              background: 'var(--accent)', color: '#F4EFE6',
              padding: '8px 16px', border: '2px solid #111',
              textDecoration: 'none', fontWeight: 600,
              boxShadow: '3px 3px 0 #111',
            }} className="nav-cta">status</a>
          </div>

          <TweaksToggle on={tweaks.tweaksOn !== false} onToggle={toggleTweaks} />
        </div>
      </div>
    </nav>
  );
};

window.Navbar = Navbar;