// scene-phase-cards.jsx
// Reusable full-frame intro card shown at the start of each phase scene.
// Renders: phase number (huge), name, who, 1-line description.
// Holds for ~2.5s then dissolves out before scene proper starts.
//
// Usage inside a Scene Timeline:
//   <PhaseIntroCard from={0} num="01" name="Charter"
//                   who="😍 Human" tone="cream"
//                   summary="Frame the problem. Set the goal. Capture the voice of the customer."
//                   hold={2400} />

function PhaseIntroCard({ from = 0, num, name, who, summary, tone = 'cream', hold = 4000, fade = 400 }) {
  const t = useT();
  const end = from + fade + hold + fade;
  if (t < from || t > end) return null;
  const into = t - from;
  let op = 1;
  if (into < fade) op = into / fade;
  else if (into > fade + hold) op = Math.max(0, 1 - (into - fade - hold) / fade);
  // Slight lift-in on the number
  const liftP = Math.max(0, Math.min(1, into / 700));
  const ty = (1 - liftP) * 24;

  const isCream = tone === 'cream';
  const fg = isCream ? 'var(--ink)' : 'var(--term-green)';
  const sub = isCream ? 'var(--ink-faint)' : 'var(--term-green-dim)';
  const accent = 'var(--orange)';

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: isCream ? 'var(--cream-base)' : '#0A0A0A',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      opacity: op, zIndex: 30,
    }}>
      {/* tiny eyebrow */}
      <div style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 22, color: sub,
        letterSpacing: '0.32em', textTransform: 'uppercase',
        marginBottom: 18, opacity: liftP,
      }}>
        Phase {num} of 06
      </div>

      {/* big number + name stack */}
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 36,
        transform: `translateY(${ty}px)`,
      }}>
        <div style={{
          fontFamily: 'var(--font-serif)',
          fontSize: 280, fontWeight: 700,
          color: accent, lineHeight: 0.9,
          letterSpacing: '-0.02em',
        }}>{num}</div>
        <div style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 96, fontWeight: 700,
          color: fg, letterSpacing: '0.02em',
        }}>{name}</div>
      </div>

      {/* tag chip */}
      {who && (
        <div style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 22, color: sub,
          letterSpacing: '0.18em',
          marginTop: 24,
          padding: '8px 18px',
          border: `1px solid ${isCream ? 'var(--cream-rule)' : 'rgba(0,255,0,0.25)'}`,
          borderRadius: 4,
          opacity: liftP,
        }}>{who}</div>
      )}

      {/* summary */}
      {summary && (
        <div style={{
          fontFamily: 'var(--font-serif)',
          fontStyle: 'italic',
          fontSize: 38, color: isCream ? 'var(--ink-soft)' : 'var(--term-green-dim)',
          marginTop: 40, maxWidth: 1200, textAlign: 'center',
          lineHeight: 1.4,
          opacity: Math.max(0, Math.min(1, (into - 600) / 500)),
          padding: '0 80px',
        }}>{summary}</div>
      )}
    </div>
  );
}

window.PhaseIntroCard = PhaseIntroCard;