const { Wordmark, Button } = window.IndigoAdvisoryDesignSystem_fba97f;

function SiteHeader({ onNav, active = 'home' }) {
  const links = [
    ['home', 'Home'],
    ['capabilities', 'Capabilities'],
    ['about', 'About'],
    ['contact', 'Contact'],
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px var(--gutter)',
      background: 'color-mix(in srgb, #08172a 82%, transparent)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid rgba(212,175,55,0.18)',
    }}>
      <button onClick={() => onNav('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
        <Wordmark size={24} tone="invert" dot={false} />
      </button>
      <nav style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }}>
        {links.map(([id, label]) => (
          <button key={id} onClick={() => onNav(id)} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)',
            fontWeight: active === id ? 'var(--fw-bold)' : 'var(--fw-reg)',
            color: active === id ? 'var(--paper)' : 'rgba(255,255,255,0.65)',
            transition: 'color 0.25s',
          }}>{label}</button>
        ))}
        <Button size="sm" variant="solid" onClick={() => onNav('contact')}>Start a conversation</Button>
      </nav>
    </header>
  );
}

Object.assign(window, { SiteHeader });