// act5-explain.jsx — Acto 5 (20s): Sophia traduce, cliente feliz.
//
// Outer Sprite window: 186 – 206 (20s, re-balanced 2026-05-17 PM-2 per JP feedback:
//   "muy poco tiempo esa imagen" — cierre extended 1.5s → 4s).
//
// Sub-timeline (absolute global times):
//   186.0-189.5  Phase A · iPhone WhatsApp HERO (engine getPhoneAt handles)
//   189.5-191.0  Phase A exit · iPhone fades + slides right
//   189.5-197.0  Phase B · RFE letter LARGE centered + Sophia scan bands (7.5s)
//   197.0-202.0  Phase C · Letter compact + Sophia analysis typewriter (5s)
//   202.0-206.0  Phase D · Dark sophia-card CIERRE cinemático (4s)

function Act5Explain() {
  const { localTime } = useSprite();
  return (
    <>
      {/* Phase B — Letter LARGE + Sophia scan (7.5s) */}
      <Sprite start={189.5} end={197}>
        <Scene5b_LetterScan />
      </Sprite>

      {/* Phase C — Analysis split + typewriter (5s) */}
      <Sprite start={197} end={202}>
        <Scene5c_AnalysisSplit />
      </Sprite>

      {/* Phase D — Dark sophia-card cierre cinemático (4s) */}
      <Sprite start={202} end={206}>
        <Scene5d_Cierre />
      </Sprite>

      {/* Callouts — outer-local times (Act 5 starts at 186) */}
      <CalloutsTrack localTime={localTime} callouts={[
        // Phase A: 186-189.5 — cliente envía RFE
        { appearAt: 0.6,  duration: 4.4, icon: '📨', position: 'top-left',  tKey: 'cliente_recibe_rfe' },
        // Phase B: 191-197 — Sophia lee + analiza
        { appearAt: 6.2,  duration: 5.5, icon: '🔍', position: 'top-right', tKey: 'sophia_lee_analiza' },
        // Phase C: 197-202 — Sophia traduce
        { appearAt: 12,   duration: 4.5, icon: '🌟', position: 'top-right', tKey: 'sophia_traduce' },
      ]} />
    </>
  );
}

// ── Phase B: Letter LARGE + Sophia scan ───────────────────────────────
function Scene5b_LetterScan() {
  const { localTime, duration } = useSprite();
  // 7.5s scene
  //  0.0-1.5  letter fades in (matches phone exit)
  //  1.5-2.5  letter fully visible, read header
  //  2.5-7.0  scan: highlightProgress 0→1 over 4.5s
  //  7.0-7.5  hold + fade out
  const letterOpacity = clamp(localTime / 1.5, 0, 1);
  const sceneOpacity = letterOpacity * fadeInOut(localTime, duration, 0.0, 0.3);
  const highlightProgress = clamp((localTime - 2.5) / 4.5, 0, 1);

  let sophiaLabel = 'Analizando documento…';
  if (highlightProgress > 0.05 && highlightProgress < 0.95) sophiaLabel = 'Sophia · leyendo el notice…';
  if (highlightProgress >= 0.95) sophiaLabel = 'Lectura terminada · 4 / 4 ✓';

  return (
    <Wrap opacity={sceneOpacity}>
      <ExplainScanLarge highlightProgress={highlightProgress} sophiaLabel={sophiaLabel} />
    </Wrap>
  );
}

// ── Phase C: Letter compact + Sophia analysis typewriter ──────────────
function Scene5c_AnalysisSplit() {
  const { localTime, duration } = useSprite();
  // 5s scene
  //  0.0-0.3  fade in
  //  0.3-4.0  typewriter (3.7s) — SOPHIA_EXPLANATION (lang-driven inside panel)
  //  4.0-5.0  hold (1s)
  const typeP = clamp((localTime - 0.3) / 3.7, 0, 1);
  const opacity = fadeInOut(localTime, duration, 0.3, 0.3);

  return (
    <Wrap opacity={opacity}>
      <ExplainAnalysisSplit progress={typeP} />
    </Wrap>
  );
}

// ── Phase D: Dark sophia-card cierre (4s — extended per JP feedback) ──
function Scene5d_Cierre() {
  const { localTime, duration } = useSprite();
  // 4s scene — da tiempo a leer la cita + ver el click + breathing hold
  //  0.0-0.8  card entry (progress 0→1, ease out)
  //  0.8-2.6  HERO HOLD (read the message, see chips light up)
  //  2.6-3.0  cursor approaches Enviar
  //  3.0-4.0  click + send confirmation + final hold
  const cardProgress = clamp(localTime / 0.8, 0, 1);
  const sendClicked = localTime >= 3.0;
  const opacity = fadeInOut(localTime, duration, 0.0, 0.0);

  return (
    <Wrap opacity={opacity}>
      <ExplainCierreCard progress={cardProgress} sendClicked={sendClicked} />

      {/* Cursor moves to the Enviar button on the sophia-card */}
      <LocalCursorTrack actStart={202} track={[
        { t: 2.7, x: 820, y: 470 },                   // approach button
        { t: 3.0, x: 820, y: 470, click: true },      // click
      ]} />
    </Wrap>
  );
}

Object.assign(window, { Act5Explain });