// Header.jsx — Moonshot site chrome
// Mirrors TEF header pattern: eyebrow left, nav inline, glyph right, 1px rule under.
function Header() {
  const links = ['Ethos', 'Project X', 'Relay'];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(7,7,10,0.82)',
      backdropFilter: 'blur(14px)',
      WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '22px 80px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
          <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
            <MoonshotGlyph size={22} />
            <span className="eyebrow" style={{ color: 'var(--cream)', letterSpacing: '.18em' }}>
              MOON<span style={{ color: 'var(--electric-2)' }}>·</span>SHOT
            </span>
          </a>
          <span className="mono" style={{ color: 'var(--fg-faint)' }}>EST. 2024 / 38.8977°N</span>
        </div>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          {links.map((l, i) => (
            <a key={l} href={`#${l.toLowerCase().replace(/\s/g, '-')}`}
              style={{
                color: 'var(--dust-200)', textDecoration: 'none',
                fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 13,
                letterSpacing: '-.01em',
                display: 'inline-flex', alignItems: 'baseline', gap: 8,
              }}>
              <span className="mono" style={{ color: 'var(--electric-2)', fontSize: 10 }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              {l}
            </a>
          ))}
          <a href="#relay" className="btn btn--ghost" style={{ height: 36, fontSize: 12, padding: '0 16px 0 18px' }}>
            Transmit
            <span style={{ width: 6, height: 6, background: 'var(--electric)', borderRadius: '50%' }}/>
          </a>
        </nav>
      </div>
    </header>
  );
}

// A minimal moon-and-trajectory glyph used as the brand mark.
// Circle (moon) with a small tangent arc rising above it.
function MoonshotGlyph({ size = 24, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={color} strokeWidth="1.4">
      <circle cx="16" cy="19" r="9" />
      <path d="M 5 16 Q 16 -2 27 16" strokeDasharray="2 2" opacity="0.7" />
      <circle cx="5" cy="16" r="1.2" fill={color} stroke="none" />
      <circle cx="27" cy="16" r="1.2" fill="var(--electric)" stroke="var(--electric)" />
    </svg>
  );
}

Object.assign(window, { Header, MoonshotGlyph });