Three Paradigms

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

export const meta: CompendiumMeta = {
  id: 101,
  slug: 'three-paradigms',
  name: 'Three Paradigms',
  category: 'compositions',
  subcategory: 'heroes',
  description: 'Three eras of how teams ship software — Waterfall, Agile, DoCoDeGo — as a full-bleed hero strip with scroll-revealed era cards, paradigm shift labels and a clockwise progression motif.',
  spec: `## Intent
Render the framework's "lineage" — Waterfall (1956) → Agile (2001) → DoCoDeGo (2026) — as a marketing-grade hero composition. Each era is a card with year, name, the cost equation it solved, the new cost it created, and the shift label. The composition must communicate "the bottleneck moved" through visual progression, not paragraphs of text.

## Acceptance Criteria
- [ ] Three era cards in a row on desktop, stacked on mobile
- [ ] Each card carries its pillar accent (DO yellow, CO blue, GO green)
- [ ] Scroll-reveal animation: cards fade + slide up sequentially
- [ ] Connecting arrows between cards on desktop
- [ ] Each card has SOLVED / COST IT CREATED / SHIFT sections
- [ ] Does not require JS for content — animation is CSS-only with IntersectionObserver-driven class toggle
- [ ] Respects prefers-reduced-motion — no movement under reduce

## Constraints
- Pure Astro + Tailwind, no external deps
- Theme-aware via tokens
- ≤ 250 lines body (compositions get more headroom than atoms)`,
  tags: ['real-content', 'animated', 'reduced-motion', 'card', 'timeline', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  kind: 'composition',
  aspect: 'wide',
  health: { ics: 100, a11y: 'aa', themed: true, animated: true },
};

const eras = [
  {
    year: '1956',
    name: 'Waterfall',
    bg: 'bg-do',
    solved: 'Formalised investigation. Sequential phases produced predictability where there was chaos.',
    cost:   'Investigation cost. Every change became expensive to absorb once a phase had closed.',
    shift:  'Chaos → Predictability',
  },
  {
    year: '2001',
    name: 'Agile',
    bg: 'bg-co',
    solved: 'Iterated. Distributed investigation across short cycles, brought the customer into the loop.',
    cost:   'Coordination cost. Standups, ceremonies, the certification industries that fed on them.',
    shift:  'Predictive → Adaptive',
  },
  {
    year: '2026',
    name: 'DoCoDeGo',
    bg: 'bg-go',
    solved: 'AI made investigation cheap. Intent became the highest-leverage human work.',
    cost:   'We do not yet know. Honesty about that is part of the framework.',
    shift:  'Implementation → Intent',
  },
];
---

<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 Lineage</span>
      <span class="text-[10px] font-mono uppercase tracking-widest opacity-60">3 paradigms · 70 years</span>
    </div>
    <h2 class="text-2xl md:text-3xl lg:text-4xl font-black uppercase tracking-tight leading-[1.05]">
      <span class="reveal" style="--reveal-i:0">Three paradigms.</span><br/>
      <span class="reveal" style="--reveal-i:1">Three cost-equation shifts.</span>
    </h2>
    <p class="reveal mt-3 max-w-2xl text-sm md:text-base text-black opacity-80 leading-snug" style="--reveal-i:2">
      Each paradigm is a deliberate response to what the previous one made expensive.
      <span class="font-black">DoCoDeGo is the third in that lineage.</span>
    </p>
  </header>

  <!-- Three era cards + arrow connectors -->
  <div class="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr_auto_1fr] gap-4 md:gap-3 items-stretch">

    {eras.map((era, idx) => (
      <>
        <article class="reveal era-card border-4 border-black bg-paper text-black flex flex-col" style={`--reveal-i:${idx * 2 + 3}`}>
          <header class:list={['flex items-end justify-between px-4 py-3 border-b-4 border-black', era.bg, 'text-black']}>
            <span class="text-2xl md:text-3xl font-black tabular-nums leading-none">{era.year}</span>
            <span class="text-[10px] font-mono uppercase tracking-widest opacity-90">Era {idx + 1} / 3</span>
          </header>

          <div class="px-4 pt-3 pb-2">
            <h3 class="text-lg md:text-xl font-black uppercase tracking-tight leading-none">{era.name}</h3>
          </div>

          <dl class="px-4 pb-3 space-y-2 grow">
            <div>
              <dt class="text-[9px] font-mono uppercase tracking-widest opacity-60 mb-0.5">Solved</dt>
              <dd class="text-xs md:text-sm leading-snug">{era.solved}</dd>
            </div>
            <div>
              <dt class="text-[9px] font-mono uppercase tracking-widest opacity-60 mb-0.5">Cost it created</dt>
              <dd class="text-xs md:text-sm leading-snug">{era.cost}</dd>
            </div>
          </dl>

          <footer class="border-t-4 border-black bg-ink text-paper px-4 py-2 text-[10px] md:text-xs font-black uppercase tracking-wide">
            {era.shift}
          </footer>
        </article>

        {idx < eras.length - 1 && (
          <div class="reveal flex items-center justify-center text-black" style={`--reveal-i:${idx * 2 + 4}`}>
            <svg viewBox="0 0 48 48" class="w-8 h-8 md:w-10 md:h-10 rotate-90 md:rotate-0" aria-hidden="true">
              <path d="M 6 24 H 38 M 28 12 L 40 24 L 28 36" stroke="currentColor" stroke-width="5" fill="none" stroke-linejoin="round" stroke-linecap="square" />
            </svg>
          </div>
        )}
      </>
    ))}

  </div>

  <!-- Caption -->
  <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">
    // Each shift answers the previous era's accumulated cost — never refutes it.
  </footer>
</div>

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