---
import Screenshot from '../Screenshot.astro';

/**
 * The homepage's one screenshot. PLAN.md §13 phase 9, D4 / D44.
 *
 * -----------------------------------------------------------------------------------------
 * WHY ONE, AND WHY THIS ONE
 * -----------------------------------------------------------------------------------------
 * `DataPath` above it draws the claim — a private game server, a sidecar, a public site —
 * and a diagram of a data path is a promise that the data arrives. This is the page where
 * it arrives, captured from a deployment wired to a running shard, so the section directly
 * under the diagram is the diagram's evidence.
 *
 * A gallery here would compete with `Capabilities` further down, which is the part of the
 * homepage that enumerates. So: one figure, the signature screen, and the rest of the set
 * on `/features/` where each one sits beside the claim it supports.
 */
---

<section class="page section looks">
  <p class="eyebrow">What it looks like</p>
  <h2>The other end of that diagram</h2>
  <p class="prose looks__lede">
    A demo deployment with a real shard behind it. The gold supply, the state of the link and
    the player online in Britain are all read from the game server over the bridge. None of it
    is typed in, and none of it is a mock-up.
  </p>

  <Screenshot id="shard-status" />
</section>

<style>
  .looks h2 {
    margin: 0.35rem 0 0.75rem;
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  }

  .looks__lede {
    margin: 0;
    max-width: 46rem;
    color: var(--muted);
  }
</style>