/**
 * The insignia, as DOM rather than as an image.
 *
 * public/logo.svg is the same drawing and is still what the masthead, the
 * favicons and the social card use. This copy exists because the landing hero
 * wants the parts of it — the orbits, the planets, the stars — to be separately
 * styleable and separately animatable, which an <img> does not allow. It is two
 * kilobytes, so inlining it also saves the request.
 *
 * Keep the two in step. If the drawing changes, it changes in both.
 */

/**
 * Static markup. Nothing here is interpolated, and nothing from the network or
 * from an account ever will be, which is what makes assigning it as innerHTML
 * safe.
 */
const MARKUP = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 320" aria-hidden="true" focusable="false">
  <!-- patch: teal edge, white pinstripe, navy field -->
  <path d="M238 160 L183 64.7 L73 64.7 L18 160 L73 255.3 L183 255.3 Z" fill="#4fc1d6"/>
  <path d="M229 160 L178.5 72.5 L77.5 72.5 L27 160 L77.5 247.5 L178.5 247.5 Z" fill="#f4fbfd"/>
  <path d="M224 160 L176 76.9 L80 76.9 L32 160 L80 243.1 L176 243.1 Z" fill="#0e1e2c"/>

  <!-- the system, tactical view: teal orbits on the patch midpoint, slightly canted -->
  <g transform="rotate(-8 128 160)">
    <g class="ins-orbits" fill="none" stroke="#4fc1d6" stroke-width="3">
      <ellipse cx="128" cy="160" rx="84" ry="26"/>
      <ellipse cx="128" cy="160" rx="58" ry="18"/>
      <ellipse cx="128" cy="160" rx="34" ry="10.5"/>
    </g>
    <!-- Each planet is a group placed by a transform rather than a circle placed
         by cx/cy, so the stylesheet can hand its position to an offset-path and
         send it round its own orbit. With no stylesheet it stands where the
         logo has always drawn it. -->
    <g class="ins-planet ins-planet-1" transform="translate(51.9 149)"><circle r="5" fill="#4fc1d6"/></g>
    <g class="ins-planet ins-planet-2" transform="translate(181.8 153.3)"><circle r="5" fill="#4fc1d6"/></g>
    <g class="ins-planet ins-planet-3" transform="translate(102 166.8)"><circle r="4.5" fill="#4fc1d6"/></g>
  </g>

  <!-- the lance: four white stars, NW NE SW SE -->
  <g class="ins-stars" fill="#f4fbfd">
    <path d="M91 84 L95.4 100.6 L112 105 L95.4 109.4 L91 126 L86.6 109.4 L70 105 L86.6 100.6 Z"/>
    <path d="M165 84 L169.4 100.6 L186 105 L169.4 109.4 L165 126 L160.6 109.4 L144 105 L160.6 100.6 Z"/>
    <path d="M91 194 L95.4 210.6 L112 215 L95.4 219.4 L91 236 L86.6 219.4 L70 215 L86.6 210.6 Z"/>
    <path d="M165 194 L169.4 210.6 L186 215 L169.4 219.4 L165 236 L160.6 219.4 L144 215 L160.6 210.6 Z"/>
  </g>

  <!-- the spear: white blade, navy edge, teal core -->
  <g class="ins-spear" stroke="#0e1e2c" stroke-width="2.5" stroke-linejoin="round">
    <path d="M128 6 C124.5 60 118 132 114 170 C111.5 187 105 196 96 201 C93 202.8 90.5 204.5 90 207 L166 207 C165.5 204.5 163 202.8 160 201 C151 196 144.5 187 142 170 C138 132 131.5 60 128 6 Z" fill="#f4fbfd"/>
    <path d="M118.5 217 L137.5 217 L128 310 Z" fill="#f4fbfd"/>
  </g>
  <g class="ins-core" fill="#4fc1d6">
    <path d="M128 26 C126.8 70 124.5 130 123 168 C122.5 186 124 196 128 200 C132 196 133.5 186 133 168 C131.5 130 129.2 70 128 26 Z"/>
    <path d="M123.5 222 L132.5 222 L128 288 Z"/>
  </g>
</svg>`;

/**
 * The insignia as an inline <svg>, hidden from assistive technology.
 *
 * Decorative by intent: the masthead already names the site, and this copy is
 * cropped by its frame, so a screen reader has nothing to gain from a
 * description of the artwork.
 */
export function insignia(className: string): SVGSVGElement {
  const host = document.createElement("div");
  host.innerHTML = MARKUP.trim();
  const svg = host.firstElementChild as SVGSVGElement;
  svg.setAttribute("class", className);
  return svg;
}