---
import Search from './Search.astro';
import { brand } from '../lib/brand.mjs';

/**
 * 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 mark is the product's real emblem (D11), served from the brand mount rather than
 * imported: the same artwork as the website's own logo and the Android launcher icon, so
 * the three surfaces read as one product. Phase 1's placeholder glyph is gone.
 *
 * It is an `<img>`, not an inline SVG, and that costs something worth naming. The emblem is
 * raster illustration, so a mounted `theme.css` cannot recolour it the way it recolours
 * everything else — replacing the mark means replacing `logo.png`. That is the trade D11
 * makes: a mark that already carries recognition, against a simpler one that would follow
 * the palette.
 *
 * 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="/">
      <img
        class="brand-lockup__mark"
        src="/brand/logo-40.webp"
        srcset="/brand/logo-40.webp 1x, /brand/logo-80.webp 2x, /brand/logo-120.webp 3x"
        width="40"
        height="40"
        alt=""
        fetchpriority="high"
      />
      <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>

    <Search />
  </div>
</header>

<style>
  /* `alt=""` above is deliberate: the mark sits beside the site name in the same link, so
     announcing it would make a screen reader say the product's name twice. */
  .brand-lockup__mark {
    display: block;
  }
</style>