function Header({ active }) {
  const links = [['Home','index.html'],['Services','services.html'],['About','about.html'],['Contact','contact.html']];
  return (
    <header style={{ background: '#fff', color: 'var(--navy)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 40px', position: 'sticky', top: 0, zIndex: 50, borderBottom: '1px solid var(--border-default)' }}>
      <a href="index.html"><img src="assets/logo.png" alt="Opus Technology Group" style={{ height: 74 }} /></a>
      <nav className="site-nav" style={{ display: 'flex', gap: '26px' }}>
        {links.map(([label, href]) => (
          <a key={label} href={href} style={{ textDecoration: 'none', cursor: 'pointer', fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: active === label ? 'var(--blue)' : 'var(--navy)', borderBottom: active === label ? '2px solid var(--cyan-500)' : '2px solid transparent', paddingBottom: 4 }}>{label}</a>
        ))}
      </nav>
      <a href="contact.html" style={{ textDecoration: 'none', background: 'var(--navy)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', padding: '9px 18px', fontWeight: 'var(--weight-semibold)', fontSize: 'var(--text-sm)' }}>Book Your Free Assessment</a>
    </header>
  );
}
window.Header = Header;