---
// Static block template — the default. Ships zero JavaScript.
// Copy to src/components/blocks/<Name>.astro and replace everything marked TODO.
//
// Before using this, confirm the block earns extraction: it appears three times,
// or it has a name a person says out loud. See .agents/rules/componentization.md

interface Props {
  /** TODO: describe each prop. Required by default; optional needs a reason. */
  eyebrow: string;
  title: string;
  body: string;
  href?: string;
}

const { eyebrow, title, body, href } = Astro.props;
---

<article class="block">
  <span class="eyebrow">{eyebrow}</span>
  <h2>{title}</h2>
  <p>{body}</p>
  {href && <a href={href}>Open →</a>}
  <slot />
</article>

<style>
  /* Tokens only. No raw hex, no px font sizes, no ad-hoc breakpoints.
     .agents/scripts/check-tokens.mjs enforces this. */
  .block {
    display: grid;
    gap: 10px;
    padding: 22px;
    background: var(--paper);
    color: var(--ink);
  }

  /* The house eyebrow: uppercase monospace, wide tracking. One class, not
     fifteen repetitions. */
  .eyebrow {
    color: var(--accent);
    font: var(--font-eyebrow);
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  h2 {
    margin: 0;
    font-size: var(--step-5);
    line-height: 1.05;
    letter-spacing: -.06em; /* tight display tracking is a signature of this design */
  }

  p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
  }

  a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
  }

  a:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 2px;
  }

  @media (max-width: 800px) {
    .block { padding: 18px; }
  }
</style>