Four Pillar Hero

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

export const meta: CompendiumMeta = {
  id: 1102,
  slug: 'four-pillar-hero',
  name: 'Four Pillar Hero',
  category: 'compositions',
  subcategory: 'heroes',
  description: 'A 2×2 hero of the four pillars — each tile carries letters, mandate, and the verb the pillar enforces — flanked by a description column that frames the whole as a compiler from intent to evidence.',
  spec: `## Intent
Where the existing four-pillars hero is symmetrical, this variant asserts a 2×2 grid against a written explainer column. It is meant for pages whose readers need both the diagram and the paragraph in a single fold — typically the framework overview and the homepage second screen.

## Acceptance Criteria
- [ ] 2×2 pillar grid on desktop, stacked on mobile
- [ ] Each tile shows the two-letter code, full verb, and a one-line mandate
- [ ] Explainer column to the right on desktop, below the grid on mobile
- [ ] Explainer ends with the compiler metaphor — intent compiles to evidence
- [ ] Each tile uses tokens-only pillar background (DO/CO/DE/GO) with black ink
- [ ] Scroll-reveal: tiles cascade in reading order
- [ ] Hover lift on each tile — translate + hard shadow, no rounded corners
- [ ] Respects prefers-reduced-motion — no movement under reduce
- [ ] Visible focus styles via :focus-visible class default

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

const pillars = [
  { short: 'DO', verb: 'Document', bg: 'bg-do', mandate: 'Write the intent before the code.' },
  { short: 'CO', verb: 'Compose',  bg: 'bg-co', mandate: 'Architect the build; let AI render it.' },
  { short: 'DE', verb: 'Deliver',  bg: 'bg-de', mandate: 'Ship at the speed of validation.' },
  { short: 'GO', verb: 'Govern',   bg: 'bg-go', mandate: 'Earn autonomy through accountability.' },
];
---

<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">The Framework</span>
      <span class="text-[10px] font-mono uppercase tracking-widest opacity-60">Four pillars, one loop</span>
    </div>
    <h2 class="reveal text-2xl md:text-3xl lg:text-4xl font-black uppercase tracking-tight leading-[1.05]" style="--reveal-i:0">
      Document. Compose. Deliver. Govern.
    </h2>
  </header>

  <div class="grid grid-cols-1 lg:grid-cols-[2fr_1.2fr] gap-5 md:gap-7">

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
      {pillars.map((p, i) => (
        <article class:list={['reveal pillar-tile border-4 border-black flex flex-col', p.bg, 'text-black']} style={`--reveal-i:${i + 1}`}>
          <header class="flex items-end justify-between px-4 pt-3 pb-2 border-b-4 border-black">
            <div class="text-4xl md:text-5xl font-black tracking-tighter leading-none">{p.short}</div>
            <div class="text-[10px] font-mono uppercase tracking-widest opacity-70">{i + 1} / 4</div>
          </header>
          <div class="px-4 py-3 grow">
            <p class="text-xs font-black uppercase tracking-widest mb-1">{p.verb}</p>
            <p class="text-sm md:text-base font-black leading-snug">{p.mandate}</p>
          </div>
        </article>
      ))}
    </div>

    <aside class="reveal border-4 border-black bg-paper text-black flex flex-col" style="--reveal-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">How it compiles</span>
      </header>
      <div class="px-4 py-3 space-y-3 grow text-sm md:text-base leading-snug">
        <p><span class="font-black">DO</span> is what we mean. <span class="font-black">CO</span> is what we build. <span class="font-black">DE</span> is what we prove. <span class="font-black">GO</span> is what we keep.</p>
        <p class="opacity-80">No pillar is optional. Skip one and the next one is built on sand — the framework documents the exact cost of each skip.</p>
        <p class="border-t-2 border-black border-dashed pt-3 font-black">Intent compiles to evidence — the four pillars are the compiler.</p>
      </div>
      <footer class="border-t-4 border-black bg-ink text-paper px-4 py-2 text-[10px] md:text-xs font-mono uppercase tracking-widest">
        // Read DO → CO → DE → GO
      </footer>
    </aside>

  </div>

  <footer class="reveal mt-6 md:mt-8 border-t-4 border-black pt-4 text-xs md:text-sm font-mono text-black opacity-70 max-w-3xl" style="--reveal-i:6">
    // Each pillar earns the next; together they form a closed loop.
  </footer>
</div>

<style>
  [data-this-component] .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: cpd-1102-reveal 520ms cubic-bezier(0.2, 0, 0.13, 1.2) forwards;
    animation-delay: calc(var(--reveal-i, 0) * 95ms);
  }
  @keyframes cpd-1102-reveal {
    to { opacity: 1; transform: none; }
  }
  [data-this-component] .pillar-tile {
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  [data-this-component] .pillar-tile:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 0 var(--color-ink);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-this-component] .reveal {
      animation: none;
      opacity: 1;
      transform: none;
    }
    [data-this-component] .pillar-tile,
    [data-this-component] .pillar-tile:hover {
      transform: none;
      transition: none;
      box-shadow: none;
    }
  }
</style>