Maturity Ladder (Vertical)

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

export const meta: CompendiumMeta = {
  id: 105,
  slug: 'maturity-ladder-vertical',
  name: 'Maturity Ladder (Vertical)',
  category: 'compositions',
  subcategory: 'heroes',
  description: 'A vertical four-rung maturity ladder — Augmented → Collaborative → Orchestrated → Autonomous — with a "you are here" callout, who-runs-it descriptors, and rung-by-rung reveal from the ground up.',
  spec: `## Intent
Show that DoCoDeGo describes a ladder, not a destination. Most teams sit at stage 1 or 2 — that is fine. The ladder exists so a team knows what the next rung asks of them, what new pillar load it adds, and who runs the system at that stage. The "you are here" marker invites self-location, not aspiration.

## Acceptance Criteria
- [ ] Four rungs stacked vertically with rung numbers (1 → 4) on the left
- [ ] Each rung names: stage, who runs it, what is added at this rung
- [ ] Pillar accents progress: DO → CO → DE → GO across the rungs
- [ ] "You are here" callout pinned to stage 2 (the modal team today)
- [ ] Rungs reveal from the bottom upward with a brief stagger
- [ ] Connecting vertical line drawn between rungs as a visible spine
- [ ] Respects prefers-reduced-motion — no movement under reduce

## Constraints
- Pure Astro + Tailwind, no external deps
- Real maturity content sourced from the framework canon
- ≤ 250 lines body`,
  tags: ['real-content', 'animated', 'reduced-motion', 'card', 'list', 'responsive'],
  status: 'stable',
  kind: 'composition',
  aspect: 'tall',
  health: { ics: 100, a11y: 'aa', themed: true, animated: true },
};

const rungs = [
  {
    n: 1,
    name: 'Augmented',
    bg: 'bg-do',
    who: 'Any team, any size',
    adds: 'DO + CO',
    runs: 'Spec-first work. AI assists generation; humans review every change.',
  },
  {
    n: 2,
    name: 'Collaborative',
    bg: 'bg-co',
    who: 'Growing team, shipping regularly',
    adds: '+ DE',
    runs: 'Validation-gated delivery. Observability proves intent landed in production.',
  },
  {
    n: 3,
    name: 'Orchestrated',
    bg: 'bg-de',
    who: 'Multi-agent, multi-team',
    adds: '+ GO (light)',
    runs: 'Alignment checks, scope limits, agent monitoring. Humans still sign every release.',
  },
  {
    n: 4,
    name: 'Autonomous',
    bg: 'bg-go',
    who: 'Autonomous agent systems',
    adds: 'Full GO',
    runs: 'Confidence thresholds, audit trails, kill switches. Humans bound the envelope.',
  },
];

// Render top-down (4 at top, 1 at bottom) so the eye climbs upward.
const ordered = [...rungs].reverse();
const youAreHereStage = 2;
---

<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">Maturity Ladder</span>
      <span class="text-[10px] font-mono uppercase tracking-widest opacity-60">4 rungs</span>
    </div>
    <h2 class="text-2xl md:text-3xl lg:text-4xl font-black uppercase tracking-tight leading-[1.05]">
      A ladder, not a destination.
    </h2>
    <p class="mt-3 max-w-2xl text-sm md:text-base text-black opacity-80 leading-snug">
      Each rung adds one pillar's load. Climb only when the rung below is paying off — and locate yourself honestly.
    </p>
  </header>

  <ol class="relative space-y-3 md:space-y-4">
    <!-- vertical spine -->
    <div class="absolute start-6 md:start-8 top-4 bottom-4 w-1 bg-ink reveal" style="--reveal-i:0" aria-hidden="true"></div>

    {ordered.map((r, i) => (
      <li
        class="reveal relative flex items-stretch gap-3 md:gap-5"
        style={`--reveal-i:${i + 1}`}
      >
        <!-- rung number badge -->
        <div class:list={['relative z-10 shrink-0 w-12 h-12 md:w-16 md:h-16 border-4 border-black flex items-center justify-center font-black tabular-nums text-xl md:text-2xl', r.bg, 'text-black']}>
          {r.n}
        </div>

        <!-- rung card -->
        <article class="relative grow border-4 border-black bg-paper text-black">
          <header class:list={['flex flex-wrap items-baseline justify-between gap-2 px-4 py-2 border-b-4 border-black', r.bg, 'text-black']}>
            <h3 class="text-base md:text-xl font-black uppercase tracking-tight">
              Stage {r.n} — {r.name}
            </h3>
            <span class="text-[10px] md:text-xs font-mono uppercase tracking-widest opacity-80">Adds {r.adds}</span>
          </header>
          <div class="px-4 py-3 grid grid-cols-1 md:grid-cols-[auto_1fr] gap-x-5 gap-y-1.5">
            <div>
              <div class="text-[9px] font-mono uppercase tracking-widest opacity-60">Who runs it</div>
              <p class="text-xs md:text-sm font-black leading-snug">{r.who}</p>
            </div>
            <div>
              <div class="text-[9px] font-mono uppercase tracking-widest opacity-60">What that means</div>
              <p class="text-xs md:text-sm leading-snug">{r.runs}</p>
            </div>
          </div>

          {r.n === youAreHereStage && (
            <div class="absolute -top-3 end-3 md:end-4 bg-attention text-white border-4 border-black px-2.5 py-1 text-[10px] md:text-xs font-black uppercase tracking-widest you-are-here">
              You are here →
            </div>
          )}
        </article>
      </li>
    ))}
  </ol>

  <footer class="reveal mt-6 md:mt-8 border-t-4 border-black pt-4 max-w-3xl text-xs md:text-sm font-mono text-black opacity-70" style="--reveal-i:5">
    // Most teams sit at stage 1 or 2. That is the right answer for most work.
  </footer>

</div>

<style>
  [data-this-component] .reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: cpd-105-reveal 540ms cubic-bezier(0.2, 0, 0.13, 1.2) forwards;
    animation-delay: calc(var(--reveal-i, 0) * 130ms);
  }
  @keyframes cpd-105-reveal {
    to { opacity: 1; transform: none; }
  }
  [data-this-component] .you-are-here {
    animation: cpd-105-pulse 1800ms ease-in-out infinite;
    animation-delay: 1200ms;
  }
  @keyframes cpd-105-pulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-this-component] .reveal,
    [data-this-component] .you-are-here {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
</style>