// AFF website — top navigation bar
function SiteHeader({ onNav }) {
  const { Button } = window.AFFAdvogadosDesignSystem_cf5902;
  const links = [
    { id: 'home', label: 'Início' },
    { id: 'areas', label: 'Áreas de Atuação' },
    { id: 'sobre', label: 'O Escritório' },
    { id: 'equipe', label: 'Equipe' },
    { id: 'contato', label: 'Contato' },
  ];
  return (
    <header id="site-header" style={{
      position: 'sticky', top: 0, zIndex: 20,
      background: 'rgba(255,255,255,0.94)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--border-hairline)',
    }}>
      <div style={{
        maxWidth: 'var(--container-xl)', margin: '0 auto', padding: '0 var(--page-gutter)',
        height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="#home" onClick={(e)=>{e.preventDefault();onNav('home');}} style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none' }}>
          <img src="assets/aff-shield.svg" alt="AFF" style={{ height: 46 }} />
          <span style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '0.04em',
            color: 'var(--navy-700)', textTransform: 'uppercase', lineHeight: 1.05,
          }}>Amâncio <span style={{color:'var(--gold-500)'}}>&amp;</span><br/>Favarato Freire</span>
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
          {links.map(l => (
            <a key={l.id} className="nav-link" href={'#'+l.id} onClick={(e)=>{e.preventDefault();onNav(l.id);}} style={{
              fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: 'var(--text-body)', textDecoration: 'none',
            }}>{l.label}</a>
          ))}
          <Button variant="accent" size="sm" onClick={()=>onNav('contato')}>Agendar consulta</Button>
        </nav>
      </div>
    </header>
  );
}