---
import { brand } from '../lib/brand.mjs';
import Mark from '../assets/placeholder-mark.svg?raw';

/**
 * The marketing header. The docs get Starlight's own header, themed to match in
 * `src/styles/starlight.css` — one site, two chromes, the same lockup.
 *
 * The nav names the routes §10 specifies. Phase 3 onwards fills them in; a link added
 * here before its page exists fails `checkLinks.mjs`, which is the order we want.
 */
const { pathname } = Astro.url;

const links = [
  { href: '/features/', label: 'Features' },
  { href: '/docs/', label: 'Docs' },
  { href: '/app/', label: 'App' },
  { href: '/community/', label: 'Community' },
];

const isCurrent = (href: string) =>
  href === '/' ? pathname === '/' : pathname.startsWith(href);
---

<header class="site-header">
  <div class="page site-header__inner">
    <a class="brand-lockup" href="/">
      <span class="brand-lockup__mark" set:html={Mark} />
      <span class="brand-lockup__name">{brand.siteName}</span>
    </a>

    <nav class="site-nav" aria-label="Primary">
      {
        links.map((link) => (
          <a href={link.href} aria-current={isCurrent(link.href) ? 'page' : undefined}>
            {link.label}
          </a>
        ))
      }
    </nav>
  </div>
</header>

<style>
  .brand-lockup__mark {
    display: inline-flex;
    color: var(--gold);
  }
</style>