Pillar Maturity Ladder

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

export const meta: CompendiumMeta = {
  id: 22,
  slug: 'pillar-maturity-ladder',
  name: 'Pillar Maturity Ladder',
  category: 'pillars-roles',
  subcategory: 'comparison',
  description: 'A 4×4 institutional matrix showing how each pillar develops across the four maturity stages.',
  spec: `## Intent
Render a 4 pillars × 4 maturity stages grid showing the maturation of practice. Reads like a government certification matrix.

## Acceptance Criteria
- [ ] Four columns (stages 1-4) and four rows (DO/CO/DE/GO)
- [ ] Each cell marks adoption density with stamps
- [ ] Stage headers reflect canonical names (Augmented…Autonomous)
- [ ] Does not collapse cell borders at 220px width

## Constraints
- Theme-aware via tokens
- No hex literals in brand-colour slots
- ≤ 150 lines body`,
  tags: ['chart', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 80, a11y: 'aa', themed: true, animated: false },
};

const stages = ['Augmented', 'Collaborative', 'Orchestrated', 'Autonomous'];
const pillars: { k: string; cls: string }[] = [
  { k: 'DO', cls: 'bg-do' },
  { k: 'CO', cls: 'bg-co' },
  { k: 'DE', cls: 'bg-de' },
  { k: 'GO', cls: 'bg-go' },
];

// adoption: 0 empty, 1 partial, 2 full
const matrix: number[][] = [
  [2, 2, 2, 2],
  [2, 2, 2, 1],
  [1, 2, 2, 2],
  [0, 1, 2, 2],
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm p-3 overflow-hidden">
  <div class="flex items-center justify-between mb-2 gap-2">
    <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 truncate">Adoption Matrix</div>
    <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 shrink-0">Form M-04</div>
  </div>

  <div class="grid grid-cols-[24px_repeat(4,1fr)] gap-0 border-2 border-black">
    <div class="border-e-2 border-b-2 border-black bg-ink"></div>
    {stages.map((s, i) => (
      <div class:list={['border-b-2 border-black px-1 py-1 text-center min-w-0', i < stages.length - 1 ? 'border-e-2' : '']}>
        <div class="font-mono text-[8px] uppercase tracking-widest opacity-60">St. {i + 1}</div>
        <div class="font-black uppercase text-[9px] leading-tight truncate">{s}</div>
      </div>
    ))}

    {pillars.map((p, r) => (
      <Fragment>
        <div class:list={[p.cls, 'border-e-2 border-black flex items-center justify-center font-black text-[10px]', r < pillars.length - 1 ? 'border-b-2' : '']}>{p.k}</div>
        {matrix[r].map((cell, c) => (
          <div class:list={['flex items-center justify-center py-2', c < 3 ? 'border-e-2 border-black' : '', r < 3 ? 'border-b-2 border-black' : '']}>
            {cell === 2 && <div class:list={[p.cls, 'w-5 h-5 border-2 border-black flex items-center justify-center font-black text-[10px]']}>✓</div>}
            {cell === 1 && <div class="w-5 h-5 border-2 border-black border-dashed"></div>}
            {cell === 0 && <div class="w-5 h-5 opacity-30 font-mono text-[10px] flex items-center justify-center">—</div>}
          </div>
        ))}
      </Fragment>
    ))}
  </div>

  <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-[8px] uppercase tracking-widest opacity-60">
    <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 border-2 border-black bg-ink inline-block"></span>Adopted</span>
    <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 border-2 border-black border-dashed inline-block"></span>Partial</span>
    <span class="flex items-center gap-1">— Not yet</span>
  </div>
</div>