Maturity Ladder

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

export const meta: CompendiumMeta = {
  id: 27,
  slug: 'maturity-ladder',
  name: 'Maturity Ladder',
  category: 'maturity-process',
  subcategory: 'indicators',
  pillar: 'de',
  description: 'Vertical four-rung ladder mapping the DoCoDeGo maturity climb from Augmented to Autonomous.',
  spec: `## Intent
Visualise the maturity model as a literal ladder. Each rung names a stage. The team's current position is highlighted; rungs above are aspirational, rungs below are conquered.

## Acceptance Criteria
- [ ] Four rungs labelled with stage name + who it's for
- [ ] Current rung visually dominant (filled, shadowed, pillar-coloured)
- [ ] Future rungs faded; past rungs marked complete

## Constraints
- Pure CSS layout
- Mono labels, neubrutalist hard shadows`,
  tags: ['list', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 86, a11y: 'aa', themed: true, animated: false },
};

const rungs = [
  { stage: 4, name: 'Autonomous',    who: 'Agent systems' },
  { stage: 3, name: 'Orchestrated',  who: 'Multi-team AI' },
  { stage: 2, name: 'Collaborative', who: 'Shipping team' },
  { stage: 1, name: 'Augmented',     who: 'Spec-first start' },
];
const here = 2;
---

<div class="w-full bg-paper text-ink border-4 border-ink p-3">
  <div class="flex items-baseline justify-between mb-2">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">// ladder</span>
    <span class="font-mono text-[10px] uppercase tracking-widest">stage {here}</span>
  </div>
  <div class="flex">
    <div class="w-2 bg-ink me-3 shrink-0" aria-hidden="true"></div>
    <ol class="flex-1 flex flex-col gap-1.5 min-w-0">
      {rungs.map((r) => {
        const state = r.stage === here ? 'here' : r.stage < here ? 'done' : 'future';
        return (
          <li
            class:list={[
              'border-4 border-ink px-3 py-2 flex items-center justify-between gap-2',
              state === 'here'  && 'bg-de shadow-[4px_4px_0_0_var(--color-ink)] text-black',
              state === 'done'  && 'bg-paper text-ink',
              state === 'future' && 'bg-paper text-ink opacity-40',
            ]}
            aria-current={state === 'here' ? 'step' : undefined}
          >
            <div class="flex items-center gap-2 min-w-0">
              <span class:list={[
                'w-5 h-5 border-2 border-ink flex items-center justify-center font-black text-[10px] shrink-0',
                state === 'done' ? 'bg-ink text-paper' : 'bg-paper text-ink',
              ]}>{state === 'done' ? '✓' : r.stage}</span>
              <span class="font-black uppercase text-xs tracking-wide truncate">{r.name}</span>
            </div>
            <span class="font-mono text-[9px] uppercase tracking-widest opacity-70 shrink-0">{r.who}</span>
          </li>
        );
      })}
    </ol>
    <div class="w-2 bg-ink ms-3 shrink-0" aria-hidden="true"></div>
  </div>
</div>