// scene-endcard.jsx — Closing card with process recap
// 0–1.5  Tagline appears: "Same AI. Better process."
// 1.5–8  Process recap: 6 phase cells light up sequentially with summary line
// 8–11   "✓ ship" lands
// 11–14  URL + brand mark settles, soft hold

function SceneEndCard() {
  return (
    <Timeline duration={14000} sceneId="endcard" label="End card">
      <CaptionScene>
        <div className="scene-bg scene-cream-bg" />
        <EndCardArt />
      </CaptionScene>
    </Timeline>
  );
}

const RECAP_PHASES = [
  { num: '01', name: 'Charter',      summary: 'Frame the problem',         who: '😍' },
  { num: '02', name: 'BRD',          summary: 'Define the requirements',   who: '😍🤖' },
  { num: '03', name: 'FFD',          summary: 'Detail every form',         who: '😍🤖' },
  { num: '04', name: 'Process Maps', summary: 'Map every state',           who: '😍🤖' },
  { num: '05', name: 'Code',         summary: 'Hand to Claude Code',       who: '🤖😍' },
  { num: '06', name: 'UAT',          summary: 'Walk it. Fix it. Ship it.', who: '😍' },
];

function EndCardArt() {
  const t = useT();
  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      gap: 60,
      padding: '60px 0',
    }}>
      {/* Tagline */}
      <Show from={400}>
        <FadeIn from={400} duration={700} translateY={20}>
          <div style={{
            fontFamily: 'var(--font-hand)',
            fontSize: 72, color: 'var(--ink)', textAlign: 'center',
            lineHeight: 1.05,
            whiteSpace: 'nowrap',
          }}>
            Solid process. Solid end product.
          </div>
        </FadeIn>
      </Show>

      {/* Six-phase process recap row */}
      <div style={{
        display: 'flex', alignItems: 'flex-start',
        gap: 12, marginTop: 24, padding: '0 80px',
      }}>
        {RECAP_PHASES.map((p, i) => {
          const growFrom = 1500 + i * 700;
          const growDur = 500;
          const grown = Math.min(1, Math.max(0, (t - growFrom) / growDur));
          const eased = 1 - Math.pow(1 - grown, 2);
          const sumFrom = growFrom + 250;
          const sumOp = Math.min(1, Math.max(0, (t - sumFrom) / 400));
          // After all 6 are lit, settle to the muted "all on" state
          const allLitFrom = 1500 + 6 * 700;
          const settled = Math.min(1, Math.max(0, (t - allLitFrom) / 600));

          // Active state: most recently grown is brighter; after settle, all uniform.
          const isMostRecent = t >= growFrom && t < growFrom + 1100;
          const cellOp = grown;

          return (
            <div key={p.num} style={{
              flex: '1 1 0',
              minWidth: 0,
              opacity: cellOp,
              transform: `translateY(${(1 - eased) * 20}px) scale(${0.92 + 0.08 * eased})`,
              transformOrigin: 'center top',
            }}>
              {/* Cell card */}
              <div style={{
                padding: '20px 16px 22px',
                border: `2px solid var(--orange)`,
                borderRadius: 6,
                background: isMostRecent ? 'rgba(184,92,56,0.10)' : 'rgba(184,92,56,0.04)',
                boxShadow: isMostRecent
                  ? '0 12px 28px -10px rgba(184,92,56,0.45)'
                  : '0 6px 16px -10px rgba(184,92,56,0.20)',
                transition: 'background 250ms ease, box-shadow 250ms ease',
                minHeight: 200,
                display: 'flex', flexDirection: 'column',
                alignItems: 'center',
                textAlign: 'center',
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: 12, color: 'var(--ink-faint)',
                  letterSpacing: '0.18em',
                  textTransform: 'uppercase',
                  marginBottom: 8,
                }}>Phase {p.num}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: 22, color: 'var(--orange)',
                  fontWeight: 700, letterSpacing: '0.04em',
                  marginBottom: 10,
                }}>{p.name}</div>
                <div style={{
                  fontFamily: 'var(--font-serif)',
                  fontStyle: 'italic',
                  fontSize: 16, color: 'var(--ink-soft)',
                  lineHeight: 1.35,
                  opacity: sumOp,
                  minHeight: 44,
                }}>{p.summary}</div>
                <div style={{
                  fontSize: 18, marginTop: 'auto',
                  paddingTop: 8,
                  opacity: sumOp * 0.9,
                }}>{p.who}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Final ✓ */}
      <Show from={9200}>
        <FadeIn from={9200} duration={500}>
          <div style={{
            fontFamily: 'var(--font-serif)', fontSize: 76, fontWeight: 700,
            color: 'var(--success-green)', marginTop: 6,
          }}>✓ ship</div>
        </FadeIn>
      </Show>

      {/* URL / brand */}
      <Show from={10500}>
        <FadeIn from={10500} duration={600} translateY={16}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 18,
            marginTop: 16,
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 22,
              color: 'var(--ink-faint)', letterSpacing: '0.16em',
            }}>charter-to-code.dev</div>
            <span style={{
              width: 6, height: 6, borderRadius: 6,
              background: 'var(--ink-faint)',
            }} />
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 18,
              color: 'var(--ink-faint)', letterSpacing: '0.18em',
              textTransform: 'uppercase',
            }}>by Anthropic</div>
          </div>
        </FadeIn>
      </Show>
    </div>
  );
}

window.SceneEndCard = SceneEndCard;