---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 1101,
  slug: 'axiom-hero',
  name: 'Axiom Hero',
  category: 'compositions',
  subcategory: 'heroes',
  pillar: 'go',
  description: 'A full-bleed hero stating the framework axiom — "Human intent governs AI output" — split into a monumental headline, an inversion explainer, and a triple-stamp evidence row.',
  spec: `## Intent
Render the single sentence the framework rests on — *Human intent governs AI output* — as a hero capable of carrying a landing page on its own. The composition must make the inversion concrete: pre-AI, humans wrote both intent and output; post-AI, humans write intent only. The hero earns the page by making that inversion immediately legible.

## Acceptance Criteria
- [ ] Monumental headline: "Human intent governs AI output" with the verb emphasised
- [ ] Eyebrow tag marks this as the axiom (DOCODEGO · AXIOM 01)
- [ ] Inversion strip with two side-by-side columns: BEFORE (humans write both) vs AFTER (humans write intent)
- [ ] Three evidence stamps below: SPEC, AUDIT, SIGN-OFF — each a hard-bordered chip
- [ ] Pillar accent uses GO green (governance is the dominant frame)
- [ ] Headline words reveal in sequence under reduced-motion safe defaults
- [ ] Visible focus rings on any interactive element (here: none, but reserve via :focus-visible)
- [ ] Respects prefers-reduced-motion — no movement under reduce
- [ ] Renders on mobile as a single stacked column without overflow
- [ ] No personal names — institutional voice only

## Constraints
- Pure Astro + Tailwind, no external deps
- Tokens only — no brand hex literals
- ≤ 250 lines body
- Self-contained — no shared imports`,
  tags: ['real-content', 'animated', 'reduced-motion', 'banner', 'responsive', 'dark-mode-tested'],
  status: 'stable',
  kind: 'composition',
  aspect: 'full',
  health: { ics: 100, a11y: 'aa', themed: true, animated: true },
};

const stamps = [
  { label: 'Spec',     note: 'Intent, written and versioned.' },
  { label: 'Audit',    note: 'Output checked against intent.' },
  { label: 'Sign-off', note: 'A human stands behind the result.' },
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-5 md:p-8 overflow-hidden">

  <header class="mb-6 md:mb-8 max-w-3xl">
    <div class="inline-flex items-center gap-2 bg-ink text-paper px-2.5 py-1 border-2 border-black mb-3">
      <span class="text-[10px] font-mono uppercase tracking-widest">DoCoDeGo</span>
      <span class="text-[10px] font-mono uppercase tracking-widest opacity-60">Axiom 01</span>
    </div>

    <h1 class="text-2xl md:text-4xl lg:text-5xl font-black uppercase tracking-tight leading-[1.02]">
      <span class="reveal" style="--reveal-i:0">Human intent</span>
      <span class="reveal inline-block bg-go text-black border-2 border-black px-2 mx-0.5" style="--reveal-i:1">governs</span>
      <span class="reveal" style="--reveal-i:2">AI output.</span>
    </h1>

    <p class="reveal mt-4 max-w-2xl text-sm md:text-base text-black opacity-80 leading-snug" style="--reveal-i:3">
      The axiom is not a wish. It is a contract — and the four pillars are how the contract is kept.
    </p>
  </header>

  <!-- Inversion strip -->
  <section class="reveal grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5 mb-6 md:mb-8" style="--reveal-i:4" aria-label="The inversion">
    <article class="border-4 border-black bg-paper text-black">
      <header class="flex items-baseline justify-between px-4 py-2 border-b-4 border-black bg-do text-black">
        <span class="text-xs font-black uppercase tracking-widest">Before</span>
        <span class="text-[10px] font-mono uppercase tracking-widest opacity-70">Pre-AI</span>
      </header>
      <div class="px-4 py-3 space-y-1">
        <p class="text-sm md:text-base font-black leading-snug">Humans write intent.</p>
        <p class="text-sm md:text-base font-black leading-snug">Humans write output.</p>
        <p class="text-xs md:text-sm leading-snug opacity-80">The bottleneck was generation — and that is where every methodology lived.</p>
      </div>
    </article>

    <article class="border-4 border-black bg-paper text-black">
      <header class="flex items-baseline justify-between px-4 py-2 border-b-4 border-black bg-go text-black">
        <span class="text-xs font-black uppercase tracking-widest">After</span>
        <span class="text-[10px] font-mono uppercase tracking-widest opacity-70">Post-AI</span>
      </header>
      <div class="px-4 py-3 space-y-1">
        <p class="text-sm md:text-base font-black leading-snug">Humans write intent.</p>
        <p class="text-sm md:text-base font-black leading-snug opacity-50 line-through">Humans write output.</p>
        <p class="text-xs md:text-sm leading-snug opacity-80">Generation collapsed. Intent is the only thing left for a human to own.</p>
      </div>
    </article>
  </section>

  <!-- Evidence stamps -->
  <section class="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4" aria-label="What governance looks like in artefacts">
    {stamps.map((s, i) => (
      <article class="reveal border-4 border-black bg-paper text-black flex flex-col" style={`--reveal-i:${i + 5}`}>
        <header class="px-4 py-2 border-b-4 border-black bg-ink text-paper">
          <span class="text-xs font-black uppercase tracking-widest">{s.label}</span>
        </header>
        <p class="px-4 py-3 text-xs md:text-sm leading-snug grow">{s.note}</p>
      </article>
    ))}
  </section>

  <footer class="reveal mt-6 md:mt-8 max-w-3xl text-xs md:text-sm font-mono text-black opacity-70" style="--reveal-i:9">
    // The axiom is enforced through artefacts, not intentions.
  </footer>
</div>

<style>
  [data-this-component] .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: cpd-1101-reveal 520ms cubic-bezier(0.2, 0, 0.13, 1.2) forwards;
    animation-delay: calc(var(--reveal-i, 0) * 90ms);
  }
  @keyframes cpd-1101-reveal {
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-this-component] .reveal {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
</style>