// Header — marketing site top bar.
function Header({ onNav }) {
  const { Button } = window.AmorimECostaDesignSystem_658eb5;
  const links = [
    ['Áreas de atuação', 'areas'],
    ['Como atuamos', 'processo'],
    ['Sobre', 'sobre'],
    ['Contato', 'contato'],
  ];
  const blogLink = { href: 'blog/index.html', label: 'Blog' };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(248,250,251,0.88)', backdropFilter: 'saturate(180%) blur(10px)',
      borderBottom: '1px solid var(--border-subtle)',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--space-6)',
        height: '74px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#topo" onClick={(e) => { e.preventDefault(); onNav('topo'); }} style={{ display: 'flex' }}>
          <img src="assets/logo-horizontal.png" alt="Amorim e Costa Advogados" height="46" />
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }}>
          {links.map(([label, id]) => (
            <a key={id} href={'#' + id} onClick={(e) => { e.preventDefault(); onNav(id); }}
              style={{
                fontFamily: 'var(--font-sans)', fontSize: '14.5px', fontWeight: 500,
                color: 'var(--text-body)', textDecoration: 'none', letterSpacing: '0.01em',
              }}>{label}</a>
          ))}
          <a href={blogLink.href}
            style={{
              fontFamily: 'var(--font-sans)', fontSize: '14.5px', fontWeight: 500,
              color: 'var(--text-body)', textDecoration: 'none', letterSpacing: '0.01em',
            }}>{blogLink.label}</a>
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
          <a href="tel:+556730000000" style={{
            display: 'flex', alignItems: 'center', gap: '7px', textDecoration: 'none',
            fontFamily: 'var(--font-mono)', fontSize: '13.5px', color: 'var(--navy-700)', fontWeight: 500,
          }}>
            <i data-lucide="phone" style={{ width: 15, height: 15 }}></i>(67) 99286-4934
          </a>
          <Button variant="primary" size="sm" onClick={() => onNav('contato')}>Agendar consulta</Button>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;