// Top navigation
function Nav({ density }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Serviços', href: '#servicos' },
    { label: 'Projetos', href: '#projetos' },
    { label: 'Processo', href: '#processo' },
    { label: 'Sobre Nós', href: '#sobre' },
    { label: 'Contato', href: '#contato' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      padding: scrolled ? '12px 0' : '20px 0',
      transition: 'padding .25s ease, background .25s ease',
      background: scrolled ? 'rgba(238,237,246,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center' }}>
          <Logo size={32} />
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 4, padding: 6, borderRadius: 999, background: 'rgba(255,255,255,0.55)', border: '1px solid var(--line)' }} className="nav-pill">
          {links.map(l => (
            <a key={l.href} href={l.href} style={{
              padding: '8px 16px', borderRadius: 999, fontSize: 14, fontWeight: 500,
              color: 'var(--ink-2)', transition: 'background .15s'
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--primary-soft)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >{l.label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="#contato" className="btn btn-dark" style={{ padding: '10px 18px', fontSize: 14 }}>
            Iniciar projeto <span style={{ fontSize: 16 }}>→</span>
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){
          .nav-pill{ display:none !important; }
        }
      `}</style>
    </header>
  );
}

window.Nav = Nav;