// Scene 04 — MERGE
// The reviewed output lands. Big counter display: 10 merges, 17 bugs self-filed,
// score 75 → 90. Mono hash stamp rolls in.

function rollNumber(target, t) {
  // Count-up with easing. Returns integer 0..target
  return Math.floor(target * Easing.easeOutCubic(clamp(t, 0, 1)));
}

function SceneMerge() {
  const { localTime, duration } = useSprite();
  const exit = clamp((localTime - (duration - 0.4)) / 0.4, 0, 1);
  const headerT = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));

  // Counter animations — roll in staggered
  const mergesT = clamp((localTime - 0.5) / 1.1, 0, 1);
  const bugsT = clamp((localTime - 0.9) / 1.1, 0, 1);
  const scoreT = clamp((localTime - 1.3) / 1.2, 0, 1);

  const mergesN = rollNumber(10, mergesT);
  const bugsN = rollNumber(17, bugsT);
  const scoreFrom = 75;
  const scoreTo = rollNumber(15, scoreT) + 75; // 75 -> 90

  // Hash stamp
  const hashT = clamp((localTime - 1.8) / 0.5, 0, 1);
  const hash = '7f2a9c3e'.slice(0, Math.floor(8 * hashT));

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: 1 - exit }}>
      <div style={{
        position: 'absolute', left: 80, top: 220,
        width: 1200,
        fontFamily: O8.fontSans,
        fontSize: 54, lineHeight: 1.04,
        letterSpacing: '-0.03em', fontWeight: 500,
        color: O8.ink,
        opacity: headerT,
      }}>
        The loop sharpens itself.
      </div>

      {/* Three counter blocks in a firm-left row */}
      <div style={{
        position: 'absolute',
        left: 80, top: 420,
        display: 'flex', gap: 80,
        fontFamily: O8.fontSans,
      }}>
        {/* MERGES */}
        <div style={{opacity: clamp(mergesT * 3, 0, 1)}}>
          <div style={{
            fontFamily: O8.fontMono, fontSize: 14,
            color: O8.inkMuted, letterSpacing: '0.04em',
            marginBottom: 16,
          }}>(PACKETS MERGED)</div>
          <div style={{
            fontSize: 220, fontWeight: 500,
            letterSpacing: '-0.04em', lineHeight: 0.92,
            color: O8.ink, fontVariantNumeric: 'tabular-nums',
          }}>
            {mergesN}
          </div>
          <div style={{
            marginTop: 12,
            fontFamily: O8.fontMono, fontSize: 13,
            color: O8.inkQuiet, letterSpacing: '0.04em',
          }}>
            ONE EVENING &middot; PLAIN ENGLISH
          </div>
        </div>

        {/* BUGS */}
        <div style={{opacity: clamp(bugsT * 3, 0, 1)}}>
          <div style={{
            fontFamily: O8.fontMono, fontSize: 14,
            color: O8.inkMuted, letterSpacing: '0.04em',
            marginBottom: 16,
          }}>(BUGS SELF-FILED)</div>
          <div style={{
            fontSize: 220, fontWeight: 500,
            letterSpacing: '-0.04em', lineHeight: 0.92,
            color: O8.ink, fontVariantNumeric: 'tabular-nums',
          }}>
            {bugsN}
          </div>
          <div style={{
            marginTop: 12,
            fontFamily: O8.fontMono, fontSize: 13,
            color: O8.inkQuiet, letterSpacing: '0.04em',
          }}>
            FILED BEFORE RECUR
          </div>
        </div>

        {/* SCORE — the accent one */}
        <div style={{opacity: clamp(scoreT * 3, 0, 1)}}>
          <div style={{
            fontFamily: O8.fontMono, fontSize: 14,
            color: O8.accent, letterSpacing: '0.04em',
            marginBottom: 16,
          }}>(DOGFOOD SCORE)</div>
          <div style={{
            fontSize: 220, fontWeight: 500,
            letterSpacing: '-0.04em', lineHeight: 0.92,
            color: O8.ink, fontVariantNumeric: 'tabular-nums',
            display: 'flex', alignItems: 'baseline', gap: 20,
          }}>
            <span style={{color: O8.inkQuiet, fontSize: 110}}>{scoreFrom}</span>
            <svg width="60" height="40" viewBox="0 0 60 40">
              <line x1="8" y1="20" x2="48" y2="20" stroke={O8.accent} strokeWidth="2"/>
              <path d="M 40 10 L 52 20 L 40 30" stroke={O8.accent} strokeWidth="2" fill="none"/>
            </svg>
            <span>{scoreTo}</span>
          </div>
          <div style={{
            marginTop: 12,
            fontFamily: O8.fontMono, fontSize: 13,
            color: O8.inkQuiet, letterSpacing: '0.04em',
          }}>
            +15 IN ONE SITTING
          </div>
        </div>
      </div>

      {/* Merge hash stamp — bottom left, mono */}
      <div style={{
        position: 'absolute',
        left: 80, bottom: 180,
        display: 'flex', alignItems: 'baseline', gap: 40,
        fontFamily: O8.fontMono, fontSize: 16,
        color: O8.inkMuted, letterSpacing: '0.04em',
        opacity: clamp(hashT * 2, 0, 1),
      }}>
        <span>MERGE {hash}</span>
        <span>→ main</span>
        <span>2026-04-16 22:14 UTC</span>
        <span>&middot; ORCHESTRATOR SIGNED</span>
      </div>
    </div>
  );
}

window.SceneMerge = SceneMerge;