/**
 * The word ALPHA, stamped on the site.
 *
 * Three places, on purpose: beside the wordmark, where it is on every page the
 * site has; across the corner of the landing hero, where a first visit lands;
 * and above the footer's version line, at the bottom of whatever page a reader
 * ends up on. It is a status and not decoration — nothing here is finished,
 * and a player should not have to find that out from a match that breaks.
 *
 * One word in one style, so the three read as the same mark rather than three
 * badges. The look is in styles.css under `.stamp`.
 *
 * The masthead's copy is not built here. It has to be in the HTML the server
 * sends, because the blog's pages never run the app, so layouts/Base.astro
 * writes the same span by hand — as does components/Footer.astro, the footer
 * on those same pages. scripts/alpha-stamp.test.mjs keeps the copies together.
 */

import { el } from "./dom";

/** Uppercased by the stylesheet, so this is the word and not a shout. */
export const ALPHA = "Alpha";

/**
 * A stamp for the app's own screens. `variant` picks the size and the angle:
 * "hero" is the big one over the landing panel, "foot" the small one above
 * the version line.
 *
 * Hidden from screen readers, both of them. The masthead is above every one of
 * these on the page and already says it; a reader who has heard it once does
 * not need it twice more, and there is nothing here to act on.
 */
export function alphaStamp(variant: "hero" | "foot"): HTMLElement {
  return el("span", {
    className: `stamp stamp-${variant}`,
    textContent: ALPHA,
    "aria-hidden": "true",
  });
}