// Video 1 Scenes 5 & 6 — First answer (full choreography) + Hand-off
//
// Scene 5 beat-by-beat (8s):
//   0.0–0.8   Greeting state fades in: "Good morning, Andres" + Unified pill
//             + empty composer (matches the real product screenshot)
//   0.8–2.6   Question types into the composer (cursor blinks)
//   2.6–2.9   Send button flash + composer collapses upward
//   2.9–3.3   User bubble pops in (top-right)
//   3.3–3.6   "Routing" chip appears
//   3.6–4.4   Chip text cycles: routing → running SQL → synthesizing
//   4.4–7.2   Answer bubble slides in + text streams char-by-char +
//             source chip reveals after stream completes
//   7.2–7.5   Gentle settle

function V1S5({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const entryT = Easing.easeOutCubic(Math.min(1, localTime / 0.2));
        const exitStart = duration - 0.4;
        const exitT = localTime > exitStart
          ? Easing.easeInCubic(Math.min(1, (localTime - exitStart) / 0.4))
          : 0;

        // ── TIMELINE ──────────────────────────────────────────────────────
        const question = 'total mortality for september'; 

        // Empty-state greeting visible immediately (no fade-in — matches sidebar)
        const greetingAppear = 1;
        // greetingOpacity: 1 while idle, fades to 0 after submit
        const greetingOpacity = localTime > 2.9
          ? Math.max(0, 1 - Easing.easeOutCubic(Math.min(1, (localTime - 2.9) / 0.6)))
          : 1;

        // Composer typing: starts 0.8, duration 1.8
        const typeStart = 0.8;
        const typeDur = 1.8;
        const typeT = Math.min(1, Math.max(0, (localTime - typeStart) / typeDur));
        const chars = Math.floor(typeT * question.length);
        const typedText = question.slice(0, chars);
        const showCursor = typeT > 0 && typeT < 1;

        // Submit flash at 2.6
        const submitFlash = localTime > 2.6 && localTime < 2.9
          ? Math.sin((localTime - 2.6) / 0.3 * Math.PI)
          : 0;

        // Submitted state begins 2.9 — greeting crossfades out (slower), chat layout appears
        const submitted = localTime > 2.9;
        const submittedT = Easing.easeOutCubic(Math.min(1, Math.max(0, (localTime - 2.9) / 0.6)));
        const greetingFade = submitted ? 1 - submittedT : 0;

        // User bubble pops in at 3.1 (after greeting starts fading)
        const userT = Easing.easeOutBack(Math.min(1, Math.max(0, (localTime - 3.1) / 0.45)));

        // Routing chip at 3.8 (gives user bubble time to land and read)
        const routingT = Easing.easeOutCubic(Math.min(1, Math.max(0, (localTime - 3.8) / 0.3)));
        const routingActive = localTime > 3.8 && localTime < 5.2;
        const routingExit = localTime > 5.0 ? Math.min(1, (localTime - 5.0) / 0.25) : 0;

        // Chip text cycles
        const routingStage =
          localTime < 4.4 ? 'routing through global orchestrator' :
          localTime < 5.0 ? 'running SQL on production' :
                            'synthesizing answer';

        // Answer appears at 5.2
        const answerStart = 5.2;
        const answerAppear = Easing.easeOutCubic(Math.min(1, Math.max(0, (localTime - answerStart) / 0.35)));
        const answerText = 'September mortality: 1,847 fish across the 8 active centers. -12.4% vs august.';
        const answerChars = Math.floor(
          Math.min(1, Math.max(0, (localTime - answerStart - 0.3) / 1.9)) * answerText.length
        );
        const answerTyped = answerText.slice(0, answerChars);
        const answerStreaming = answerChars > 0 && answerChars < answerText.length;
        const answerDone = answerChars >= answerText.length;
        const sourceT = Easing.easeOutCubic(Math.min(1, Math.max(0, (localTime - answerStart - 2.3) / 0.4)));

        // ── CAMERA ZOOM on the answer bubble ──────────────────────────────
        // push in as the answer starts to render; hold thru source chip; release near end
        const zoomInStart = answerStart;        // 4.4s
        const zoomInEnd = answerStart + 0.7;    // 5.1s — fully pushed in
        const zoomOutStart = duration - 1.2;    // start releasing
        const zoomOutEnd = duration - 0.4;
        const zoomIn = Easing.easeInOutCubic(
          Math.min(1, Math.max(0, (localTime - zoomInStart) / (zoomInEnd - zoomInStart)))
        );
        const zoomOut = Easing.easeInOutCubic(
          Math.min(1, Math.max(0, (localTime - zoomOutStart) / (zoomOutEnd - zoomOutStart)))
        );
        const zoomAmount = zoomIn * (1 - zoomOut);  // 0 → 1 → 0
        const zoomScale = 1 + zoomAmount * 0.22;    // up to 1.22×
        // zoom centered on the answer bubble (answer sits slightly left-of-center, mid-lower)
        const zoomOriginX = 540;
        const zoomOriginY = 720;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: N2.bg,
            opacity: entryT * (1 - exitT),
            overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              transform: `scale(${zoomScale})`,
              transformOrigin: `${zoomOriginX}px ${zoomOriginY}px`,
              transition: 'none',
            }}>
            <ProductShell>
              <div style={{
                position: 'absolute', inset: 0,
                padding: '40px 48px',
                display: 'flex', flexDirection: 'column',
              }}>
                {/* ══════ EMPTY STATE — greeting + pill + composer ══════ */}
                {greetingOpacity > 0 ? (
                  <div style={{
                    position: 'absolute',
                    left: 0, right: 0, top: '50%',
                    transform: `translateY(-50%)`,
                    opacity: greetingOpacity,
                    display: 'flex', flexDirection: 'column',
                    alignItems: 'center',
                    padding: '0 48px',
                  }}>
                    <div style={{
                      fontFamily: N2.sans,
                      fontSize: 38, fontWeight: 500,
                      color: N2.fg,
                      letterSpacing: '-0.025em',
                      marginBottom: 14,
                    }}>
                      Good morning, Andres
                    </div>

                    {/* Pill + tagline inline (matches real product) */}
                    <div style={{
                      display: 'flex', alignItems: 'center', gap: 10,
                      marginBottom: 14,
                    }}>
                      <UnifiedPill pulse={false}/>
                      <span style={{
                        fontSize: 13, color: N2.fgSubtle,
                      }}>
                        Routes your question internally and returns one answer.
                      </span>
                    </div>

                    <div style={{
                      fontSize: 13, color: N2.fgSubtle,
                      textAlign: 'center', marginBottom: 32,
                      lineHeight: 1.5,
                      maxWidth: 540,
                    }}>
                      Ask anything. I automatically choose among 8 internal specialists
                      you can access and return one unified answer.
                    </div>

                    {/* Composer — inline in empty state */}
                    <div style={{
                      position: 'relative',
                      width: 680,
                      boxShadow: submitFlash > 0
                        ? `0 0 0 ${submitFlash * 3}px rgba(184,146,74,0.5), 0 0 ${submitFlash * 40}px rgba(184,146,74,0.25)`
                        : 'none',
                      borderRadius: 16,
                      transition: 'box-shadow 100ms',
                    }}>
                      <Composer text={typedText} typing={showCursor} width={680}/>
                    </div>
                  </div>
                ) : null}

                {/* ══════ CHAT STATE — user bubble, routing, answer ══════ */}
                {submitted && (
                  <div style={{
                    flex: 1,
                    display: 'flex', flexDirection: 'column',
                    justifyContent: 'flex-end',
                    padding: '0 24px 16px',
                    gap: 12,
                    width: '100%', maxWidth: 720,
                    margin: '0 auto',
                    opacity: submittedT,
                  }}>
                    {/* User bubble */}
                    <div style={{
                      alignSelf: 'flex-end',
                      padding: '11px 18px',
                      background: N2.bgCard,
                      border: `1px solid ${N2.border}`,
                      borderRadius: '16px 16px 4px 16px',
                      fontSize: 15,
                      color: N2.fg,
                      maxWidth: 520,
                      opacity: userT,
                      transform: `scale(${0.9 + userT * 0.1}) translateY(${(1 - userT) * 8}px)`,
                      transformOrigin: 'bottom right',
                      boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
                    }}>{question}</div>

                    {/* Routing chip */}
                    {routingActive && (
                      <div style={{
                        alignSelf: 'flex-start',
                        display: 'inline-flex', alignItems: 'center', gap: 10,
                        padding: '10px 14px',
                        background: 'rgba(242,237,228,0.04)',
                        border: `1px solid ${N2.border}`,
                        borderRadius: '14px 14px 14px 4px',
                        opacity: routingT * (1 - routingExit),
                        transform: `translateY(${(1 - routingT) * 6}px)`,
                      }}>
                        <div style={{ display: 'flex', gap: 3 }}>
                          {[0,1,2].map(i => {
                            const phase = (localTime * 4 + i * 0.3) % 2;
                            const o = 0.3 + 0.7 * Math.max(0, Math.sin(phase * Math.PI));
                            return <div key={i} style={{
                              width: 5, height: 5, borderRadius: 3,
                              background: N2.gold, opacity: o,
                            }}/>;
                          })}
                        </div>
                        <span style={{
                          fontFamily: N2.mono, fontSize: 11,
                          letterSpacing: '0.08em', textTransform: 'uppercase',
                          color: N2.goldSoft,
                        }}>{routingStage}</span>
                      </div>
                    )}

                    {/* Answer bubble */}
                    {localTime > answerStart && (
                      <div style={{
                        alignSelf: 'flex-start',
                        padding: '16px 20px',
                        background: 'rgba(14,42,31,0.45)',
                        border: `1px solid rgba(184,146,74,0.3)`,
                        borderRadius: '16px 16px 16px 4px',
                        color: N2.cream,
                        fontSize: 16, lineHeight: 1.5,
                        maxWidth: 600,
                        opacity: answerAppear,
                        transform: `translateY(${(1 - answerAppear) * 10}px)`,
                        boxShadow: '0 4px 24px rgba(184,146,74,0.12)',
                      }}>
                        {answerTyped}
                        {answerStreaming && (
                          <span style={{
                            display: 'inline-block',
                            width: 2, height: 18,
                            background: N2.cream,
                            marginLeft: 2,
                            verticalAlign: 'text-bottom',
                            animation: 'blink 0.8s step-end infinite',
                          }}/>
                        )}
                        {answerDone && sourceT > 0 && (
                          <div style={{
                            marginTop: 12, paddingTop: 12,
                            borderTop: `1px solid rgba(242,237,228,0.1)`,
                            display: 'flex', alignItems: 'center', gap: 10,
                            fontFamily: N2.mono, fontSize: 11,
                            color: N2.goldSoft,
                            opacity: sourceT,
                            transform: `translateY(${(1 - sourceT) * 6}px)`,
                          }}>
                            <SourceIcon kind="excel"/>
                            <span>Production_Q3.xlsx · sheet: Mortality · 12,480 rows</span>
                            <span style={{
                              marginLeft: 'auto',
                              display: 'inline-flex', alignItems: 'center', gap: 4,
                              color: N2.greenAccent,
                            }}>
                              <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                                <path d="M2 5l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                              </svg>
                              traced
                            </span>
                          </div>
                        )}
                      </div>
                    )}

                    {/* Empty composer at bottom — shows after submit */}
                    <div style={{ marginTop: 8, opacity: 0.5 }}>
                      <Composer text="" width={680}/>
                    </div>
                  </div>
                )}
              </div>
            </ProductShell>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ── Scene 6: Hand-off ──────────────────────────────────────────────────────
function V1S6({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const entryT = Easing.easeOutCubic(Math.min(1, localTime / 0.6));
        const l1 = Easing.easeOutQuart(Math.min(1, Math.max(0, (localTime - 0.2) / 0.5)));
        const l2 = Easing.easeOutQuart(Math.min(1, Math.max(0, (localTime - 0.9) / 0.5)));
        const badge = Easing.easeOutBack(Math.min(1, Math.max(0, (localTime - 1.8) / 0.5)));

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: N2.bg,
            opacity: entryT,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            padding: 80, textAlign: 'center',
          }}>
            <div style={{
              fontFamily: N2.serif, fontSize: 78, fontWeight: 350,
              letterSpacing: '-0.035em', lineHeight: 1.02, color: N2.fg,
              opacity: l1, transform: `translateY(${(1 - l1) * 16}px)`,
              maxWidth: 900,
            }}>
              Your data has a brain.
            </div>
            <div style={{
              fontFamily: N2.serif, fontSize: 78, fontWeight: 350,
              letterSpacing: '-0.035em', lineHeight: 1.02,
              color: N2.gold, fontStyle: 'italic',
              marginTop: 10, opacity: l2,
              transform: `translateY(${(1 - l2) * 16}px)`,
            }}>
              Now give it a team.
            </div>
            <div style={{
              marginTop: 40,
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '10px 20px',
              border: `1px solid ${N2.borderStrong}`,
              borderRadius: 9999,
              fontFamily: N2.mono, fontSize: 13,
              color: N2.fgMuted,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              opacity: badge,
              transform: `scale(${0.9 + badge * 0.1})`,
            }}>
              next · 02 staff →
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { V1S5, V1S6 });