const { Icon } = window.AS || {};

function SiteHeader() {
  const navItem = (id, label) => (
    <a href={'#' + id} style={{ font: 'var(--text-label)', color: 'var(--text-secondary)', cursor: 'pointer' }}>
      {label}
    </a>
  );
  return (
    <header
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '18px 48px',
        borderBottom: '1px solid var(--border-subtle)',
        background: 'var(--surface-page)',
        position: 'sticky',
        top: 0,
        zIndex: 20,
      }}
    >
      <a href="#top" style={{ display: 'flex', flexDirection: 'column', cursor: 'pointer' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 2, font: 'var(--text-display-sm)', color: 'var(--text-primary)' }}>
          Advocate<span style={{ color: 'var(--color-primary)' }}>Smart</span>
        </div>
        <div style={{ font: 'var(--text-caption)', color: 'var(--text-muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Stay Grounded</div>
      </a>
      <nav style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
        {navItem('quiz', 'Start here')}
        {navItem('about', 'About')}
        {navItem('kit', 'Workshop Guide')}
        {navItem('contact', 'Contact')}
        <a
          href="#intake-form"
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            padding: '10px 20px',
            borderRadius: 'var(--radius-pill)',
            background: 'var(--color-primary)',
            color: 'var(--text-on-primary)',
            font: 'var(--text-label)',
            cursor: 'pointer',
          }}
        >
          Book a session <Icon name="arrow-right" size={14} />
        </a>
      </nav>
    </header>
  );
}
window.SiteHeader = SiteHeader;