// scenes-3-4.jsx — Step 3 (Nano Banana) + Step 4 (Kling morph) + Outro

// ───────────────────────────────────────────────────────────
// STEP 3 — Nano Banana generates AFTER frame (10–14s, dur 4s)
// Prompt pastes into an input → generate button pulses → image materializes → "AFTER" label.
// ───────────────────────────────────────────────────────────
function SceneStep3() {
  const { localTime } = useSprite();

  const T = {
    cardIn: 0.0,
    panelIn: 0.3,
    promptPaste: 0.9,
    generateClick: 1.6,
    genStart: 1.8,
    revealDone: 3.2,
  };

  // Prompt paste effect — text flashes in
  const pasteT = clamp((localTime - T.promptPaste) / 0.25, 0, 1);

  // Generate button press
  const btnT = clamp((localTime - T.generateClick) / 0.3, 0, 1);
  const btnScale = btnT < 0.5 ? 1 - 0.08 * (btnT / 0.5) : 0.92 + 0.08 * ((btnT - 0.5) / 0.5);

  // Generation progress (scan + reveal)
  const genT = clamp((localTime - T.genStart) / 1.4, 0, 1);

  // Reveal settle
  const revealT = clamp((localTime - T.revealDone) / 0.5, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, background: TOKENS.bg }}>
      <BgDots opacity={0.3}/>

      <StepHeader n={3} title="Generate new hairstyle" tool="Nano Banana" color={TOKENS.coral} startLocal={T.cardIn}/>

      {/* Generator panel */}
      <div style={{
        position: 'absolute',
        left: '50%', top: 180,
        transform: `translateX(-50%) translateY(${(1 - Easing.easeOutBack(clamp((localTime - T.panelIn) / 0.5, 0, 1))) * 40}px)`,
        opacity: clamp((localTime - T.panelIn) / 0.35, 0, 1),
        width: 1140,
        background: '#fff',
        border: `3px solid ${TOKENS.ink}`,
        borderRadius: 18,
        boxShadow: `8px 8px 0 ${TOKENS.ink}`,
        overflow: 'hidden',
      }}>
        {/* Chrome */}
        <div style={{
          background: TOKENS.coral,
          padding: '14px 20px',
          borderBottom: `2px solid ${TOKENS.ink}`,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <ToolMark tool="banana" size={22}/>
          <div style={{ fontFamily: TOKENS.display, fontSize: 18, fontWeight: 700, color: TOKENS.ink, letterSpacing: '-0.01em' }}>
            Nano Banana — image generator
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
          {/* LEFT: prompt input + generate button */}
          <div style={{ padding: '28px 28px', borderRight: `2px solid ${TOKENS.ink}` }}>
            <div style={{
              fontFamily: TOKENS.mono,
              fontSize: 13,
              letterSpacing: '0.12em',
              color: TOKENS.inkSoft,
              textTransform: 'uppercase',
              marginBottom: 10,
            }}>
              Prompt
            </div>
            <div style={{
              background: '#fdf8ed',
              border: `2px solid ${TOKENS.ink}`,
              borderRadius: 10,
              padding: '18px 20px',
              minHeight: 160,
              fontFamily: TOKENS.display,
              fontSize: 20,
              lineHeight: 1.4,
              color: TOKENS.ink,
              position: 'relative',
            }}>
              {pasteT > 0 && (
                <span style={{
                  display: 'inline-block',
                  opacity: pasteT,
                  transform: `scale(${0.95 + 0.05 * pasteT})`,
                }}>
                  Sleek platinum bob, chin-length, center part, glossy finish, soft studio lighting, photoreal.
                </span>
              )}
              {/* Paste flash */}
              {pasteT > 0 && pasteT < 1 && (
                <div style={{
                  position: 'absolute', inset: 0,
                  background: TOKENS.lemon,
                  opacity: (1 - pasteT) * 0.5,
                  borderRadius: 8,
                  pointerEvents: 'none',
                }}/>
              )}
            </div>

            {/* Reference image (BEFORE frame) */}
            <div style={{
              marginTop: 18,
              display: 'flex', alignItems: 'center', gap: 14,
              opacity: clamp((localTime - T.panelIn - 0.5) / 0.4, 0, 1),
            }}>
              <div style={{
                fontFamily: TOKENS.mono,
                fontSize: 13,
                letterSpacing: '0.12em',
                color: TOKENS.inkSoft,
                textTransform: 'uppercase',
              }}>
                Reference
              </div>
              <div style={{
                width: 72, height: 72, borderRadius: 10,
                background: TOKENS.blue,
                border: `2px solid ${TOKENS.ink}`,
                display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
                overflow: 'hidden',
              }}>
                <Silhouette hairStyle="short" hairColor="#2a2320" skin="#e8c3a0" shirt="#4a6fa8" size={72}/>
              </div>
              <div style={{ fontFamily: TOKENS.mono, fontSize: 13, color: TOKENS.inkSoft, letterSpacing: '0.08em' }}>
                before.jpg
              </div>
            </div>

            {/* Generate button */}
            <div style={{
              marginTop: 28,
              display: 'flex', justifyContent: 'flex-end',
            }}>
              <div style={{
                background: TOKENS.ink,
                color: TOKENS.bg,
                padding: '16px 28px',
                borderRadius: 12,
                border: `2px solid ${TOKENS.ink}`,
                boxShadow: btnT > 0.5 ? `2px 2px 0 ${TOKENS.ink}` : `5px 5px 0 ${TOKENS.ink}`,
                fontFamily: TOKENS.display,
                fontSize: 20,
                fontWeight: 700,
                letterSpacing: '0.02em',
                transform: `scale(${btnScale})`,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <ToolMark tool="banana" size={18} color={TOKENS.bg}/>
                Generate
              </div>
            </div>
          </div>

          {/* RIGHT: image output area */}
          <div style={{ padding: '28px 28px' }}>
            <div style={{
              fontFamily: TOKENS.mono,
              fontSize: 13,
              letterSpacing: '0.12em',
              color: TOKENS.inkSoft,
              textTransform: 'uppercase',
              marginBottom: 10,
            }}>
              Output
            </div>
            <div style={{
              width: '100%', aspectRatio: '1 / 1',
              background: TOKENS.coral,
              border: `2px solid ${TOKENS.ink}`,
              borderRadius: 10,
              position: 'relative',
              overflow: 'hidden',
              display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
            }}>
              {/* Generated silhouette with new hair — fades in during genT */}
              {genT > 0 && (
                <div style={{
                  opacity: genT,
                  transform: `scale(${0.95 + 0.05 * genT})`,
                  transition: 'none',
                }}>
                  <Silhouette hairStyle="long" hairColor="#e8e4dc" skin="#e8c3a0" shirt="#4a6fa8" size={360}/>
                </div>
              )}

              {/* Scan line effect while generating */}
              {genT > 0 && genT < 1 && (
                <div style={{
                  position: 'absolute', left: 0, right: 0,
                  top: `${genT * 100}%`,
                  height: 4,
                  background: TOKENS.lemon,
                  boxShadow: `0 0 30px 10px ${TOKENS.lemon}`,
                  mixBlendMode: 'screen',
                }}/>
              )}

              {/* AFTER label pops in once revealed */}
              {revealT > 0 && (
                <div style={{
                  position: 'absolute',
                  top: 16, right: 16,
                  background: TOKENS.ink,
                  color: TOKENS.bg,
                  padding: '8px 14px',
                  borderRadius: 8,
                  fontFamily: TOKENS.display,
                  fontWeight: 700,
                  fontSize: 20,
                  letterSpacing: '0.1em',
                  transform: `scale(${Easing.easeOutBack(revealT)}) rotate(${6 - 6 * revealT}deg)`,
                  boxShadow: `3px 3px 0 ${TOKENS.coral}`,
                }}>
                  AFTER
                </div>
              )}

              {/* Loading indicator while generating */}
              {genT < 1 && (
                <div style={{
                  position: 'absolute',
                  left: '50%', top: 24,
                  transform: 'translateX(-50%)',
                  fontFamily: TOKENS.mono,
                  fontSize: 13,
                  color: TOKENS.ink,
                  background: 'rgba(255,255,255,0.85)',
                  padding: '6px 12px',
                  borderRadius: 6,
                  letterSpacing: '0.1em',
                  opacity: clamp((localTime - T.genStart + 0.1) / 0.3, 0, 1) * (1 - Math.max(0, (genT - 0.8) / 0.2)),
                }}>
                  GENERATING · {Math.floor(genT * 100).toString().padStart(2, '0')}%
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// STEP 4 — Kling.ai morph (14–18.5s, dur 4.5s)
// Before/after dropped into Kling → morph prompt → playback with silhouette morph.
// ───────────────────────────────────────────────────────────
function SceneStep4() {
  const { localTime } = useSprite();

  const T = {
    cardIn: 0.0,
    panelIn: 0.25,
    framesDropIn: 0.6,
    promptType: 1.4,
    generate: 2.4,
    morphStart: 2.8,
    morphEnd: 4.2,
  };

  const promptText = "smooth hairstyle morph";
  const typeT = clamp((localTime - T.promptType) / 0.8, 0, 1);
  const typed = promptText.slice(0, Math.floor(typeT * promptText.length));

  const genT = clamp((localTime - T.generate) / 0.35, 0, 1);
  const genScale = genT < 0.5 ? 1 - 0.08 * (genT / 0.5) : 0.92 + 0.08 * ((genT - 0.5) / 0.5);

  const morphT = clamp((localTime - T.morphStart) / (T.morphEnd - T.morphStart), 0, 1);
  const morphEased = Easing.easeInOutCubic(morphT);

  // Frame drop-in progress
  const dropT = clamp((localTime - T.framesDropIn) / 0.6, 0, 1);
  const dropEased = Easing.easeOutBack(dropT);

  return (
    <div style={{ position: 'absolute', inset: 0, background: TOKENS.bg }}>
      <BgDots opacity={0.3}/>

      <StepHeader n={4} title="Generate morph video" tool="Kling.ai" color={TOKENS.lavender} startLocal={T.cardIn}/>

      {/* Kling panel */}
      <div style={{
        position: 'absolute',
        left: '50%', top: 175,
        transform: `translateX(-50%) translateY(${(1 - Easing.easeOutBack(clamp((localTime - T.panelIn) / 0.5, 0, 1))) * 40}px)`,
        opacity: clamp((localTime - T.panelIn) / 0.35, 0, 1),
        width: 1200,
        background: '#fff',
        border: `3px solid ${TOKENS.ink}`,
        borderRadius: 18,
        boxShadow: `8px 8px 0 ${TOKENS.ink}`,
        overflow: 'hidden',
      }}>
        <div style={{
          background: TOKENS.lavender,
          padding: '14px 20px',
          borderBottom: `2px solid ${TOKENS.ink}`,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <ToolMark tool="kling" size={22}/>
          <div style={{ fontFamily: TOKENS.display, fontSize: 18, fontWeight: 700, color: TOKENS.ink, letterSpacing: '-0.01em' }}>
            Kling.ai — start + end frame video
          </div>
        </div>

        {/* Main content grid: [frames] | [output player] */}
        <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 0 }}>
          {/* LEFT: start/end frames + prompt */}
          <div style={{ padding: '24px', borderRight: `2px solid ${TOKENS.ink}`, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <FrameSlot
              label="START"
              accent={TOKENS.blue}
              progress={dropEased}
              delay={0}
            >
              <Silhouette hairStyle="short" hairColor="#2a2320" skin="#e8c3a0" shirt="#4a6fa8" size={140}/>
            </FrameSlot>

            <FrameSlot
              label="END"
              accent={TOKENS.coral}
              progress={clamp((dropT - 0.2) / 0.8, 0, 1)}
              delay={0.2}
            >
              <Silhouette hairStyle="long" hairColor="#e8e4dc" skin="#e8c3a0" shirt="#4a6fa8" size={140}/>
            </FrameSlot>

            {/* Prompt */}
            <div style={{
              background: '#fdf8ed',
              border: `2px solid ${TOKENS.ink}`,
              borderRadius: 10,
              padding: '12px 14px',
              opacity: clamp((localTime - T.promptType + 0.3) / 0.4, 0, 1),
            }}>
              <div style={{
                fontFamily: TOKENS.mono,
                fontSize: 11,
                letterSpacing: '0.14em',
                color: TOKENS.inkSoft,
                textTransform: 'uppercase',
                marginBottom: 6,
              }}>
                Morph prompt
              </div>
              <div style={{
                fontFamily: TOKENS.display,
                fontSize: 17,
                fontWeight: 500,
                color: TOKENS.ink,
                minHeight: 26,
              }}>
                {typed}
                {typeT < 1 && typeT > 0 && <Caret/>}
              </div>
            </div>

            {/* Generate button */}
            <div style={{
              alignSelf: 'flex-end',
              background: TOKENS.ink,
              color: TOKENS.bg,
              padding: '12px 22px',
              borderRadius: 10,
              fontFamily: TOKENS.display,
              fontSize: 16,
              fontWeight: 700,
              letterSpacing: '0.02em',
              transform: `scale(${genScale})`,
              boxShadow: genT > 0.5 ? `2px 2px 0 ${TOKENS.ink}` : `4px 4px 0 ${TOKENS.ink}`,
              opacity: clamp((localTime - T.promptType + 0.3) / 0.4, 0, 1),
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <ToolMark tool="kling" size={16} color={TOKENS.bg}/>
              Generate
            </div>
          </div>

          {/* RIGHT: big morph player */}
          <div style={{ padding: 24, background: '#f7f3ea' }}>
            <div style={{
              fontFamily: TOKENS.mono,
              fontSize: 13,
              letterSpacing: '0.12em',
              color: TOKENS.inkSoft,
              textTransform: 'uppercase',
              marginBottom: 10,
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              Output video
              {morphT > 0 && morphT < 1 && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                  color: TOKENS.coral, fontWeight: 700,
                }}>
                  <span style={{ width: 8, height: 8, background: TOKENS.coral, borderRadius: 4, opacity: Math.floor(localTime * 4) % 2 === 0 ? 1 : 0.3 }}/>
                  PLAYING
                </span>
              )}
            </div>

            <MorphPlayer morphT={morphEased} visible={localTime > T.morphStart - 0.1}/>

            {/* Progress bar */}
            <div style={{
              marginTop: 14,
              height: 8,
              background: 'rgba(0,0,0,0.08)',
              borderRadius: 4,
              border: `1.5px solid ${TOKENS.ink}`,
              overflow: 'hidden',
              opacity: clamp((localTime - T.morphStart + 0.1) / 0.3, 0, 1),
            }}>
              <div style={{
                height: '100%',
                width: `${morphT * 100}%`,
                background: TOKENS.lavender,
              }}/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FrameSlot({ label, accent, children, progress = 1 }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      transform: `translateY(${(1 - progress) * 30}px) scale(${0.85 + 0.15 * progress})`,
      opacity: clamp(progress * 2, 0, 1),
    }}>
      <div style={{
        fontFamily: TOKENS.display,
        fontWeight: 700,
        fontSize: 14,
        letterSpacing: '0.12em',
        color: TOKENS.ink,
        width: 58,
      }}>
        {label}
      </div>
      <div style={{
        width: 150, height: 150,
        background: accent,
        border: `2px solid ${TOKENS.ink}`,
        borderRadius: 10,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
        overflow: 'hidden',
        boxShadow: `3px 3px 0 ${TOKENS.ink}`,
      }}>
        {children}
      </div>
    </div>
  );
}

// The morph player — crossfades two silhouettes, with a shimmer/sweep overlay.
function MorphPlayer({ morphT, visible }) {
  if (!visible) {
    // Show a placeholder "waiting to generate" state
    return (
      <div style={{
        width: '100%', aspectRatio: '16/9',
        background: '#eeeae0',
        border: `2.5px dashed ${TOKENS.inkSoft}`,
        borderRadius: 12,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: TOKENS.mono, fontSize: 14, color: TOKENS.inkSoft,
        letterSpacing: '0.1em',
      }}>
        AWAITING GENERATION
      </div>
    );
  }

  // Background color crossfades blue → coral
  const bgT = morphT;
  return (
    <div style={{
      width: '100%', aspectRatio: '16/9',
      background: `color-mix(in oklch, ${TOKENS.blue} ${(1-bgT)*100}%, ${TOKENS.coral} ${bgT*100}%)`,
      border: `2.5px solid ${TOKENS.ink}`,
      borderRadius: 12,
      position: 'relative',
      overflow: 'hidden',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
    }}>
      {/* Before silhouette */}
      <div style={{
        position: 'absolute', bottom: 0, left: '50%',
        transform: `translateX(-50%) scale(${1 - morphT * 0.05})`,
        opacity: 1 - morphT,
      }}>
        <Silhouette hairStyle="short" hairColor="#2a2320" skin="#e8c3a0" shirt="#4a6fa8" size={340}/>
      </div>
      {/* After silhouette */}
      <div style={{
        position: 'absolute', bottom: 0, left: '50%',
        transform: `translateX(-50%) scale(${0.95 + morphT * 0.05})`,
        opacity: morphT,
      }}>
        <Silhouette hairStyle="long" hairColor="#e8e4dc" skin="#e8c3a0" shirt="#4a6fa8" size={340}/>
      </div>

      {/* Sweeping light bar (diffusion vibes) */}
      <div style={{
        position: 'absolute',
        top: 0, bottom: 0,
        left: `${morphT * 110 - 20}%`,
        width: 40,
        background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)',
        filter: 'blur(2px)',
        transform: 'skewX(-20deg)',
        mixBlendMode: 'screen',
      }}/>

      {/* Timecode */}
      <div style={{
        position: 'absolute',
        bottom: 14, right: 18,
        fontFamily: TOKENS.mono, fontSize: 14,
        background: 'rgba(0,0,0,0.6)', color: '#fff',
        padding: '4px 10px', borderRadius: 4,
        letterSpacing: '0.08em',
      }}>
        0:0{Math.floor(morphT * 5)} / 0:05
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// OUTRO (18.5–20s, dur 1.5s) — four-step recap strip → final badge
// ───────────────────────────────────────────────────────────
function SceneOutro() {
  const { localTime } = useSprite();

  const tools = ['camera', 'chatgpt', 'banana', 'kling'];

  return (
    <div style={{ position: 'absolute', inset: 0, background: TOKENS.bg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
      <BgDots opacity={0.3}/>

      {/* Recap row */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 18,
        marginBottom: 48,
      }}>
        {tools.map((t, i) => {
          const appear = clamp((localTime - i * 0.08) / 0.4, 0, 1);
          const eased = Easing.easeOutBack(appear);
          return (
            <React.Fragment key={t}>
              <div style={{
                transform: `translateY(${(1 - eased) * 30}px) scale(${0.5 + 0.5 * eased})`,
                opacity: appear,
              }}>
                <ToolBadge tool={t} size={88}/>
              </div>
              {i < tools.length - 1 && (
                <div style={{
                  fontSize: 32, color: TOKENS.ink,
                  opacity: clamp((localTime - i * 0.08 - 0.15) / 0.3, 0, 1),
                }}>→</div>
              )}
            </React.Fragment>
          );
        })}
        {/* Final result chip */}
        <div style={{
          marginLeft: 12,
          fontSize: 32, color: TOKENS.ink,
          opacity: clamp((localTime - 0.5) / 0.3, 0, 1),
        }}>→</div>
        <div style={{
          transform: `scale(${Easing.easeOutBack(clamp((localTime - 0.6) / 0.45, 0, 1))})`,
          opacity: clamp((localTime - 0.6) / 0.3, 0, 1),
          background: TOKENS.teal,
          color: '#fff',
          padding: '20px 26px',
          borderRadius: 22,
          border: `3px solid ${TOKENS.ink}`,
          boxShadow: `6px 6px 0 ${TOKENS.ink}`,
          fontFamily: TOKENS.display,
          fontWeight: 700,
          fontSize: 22,
          letterSpacing: '-0.005em',
          display: 'flex', alignItems: 'center', gap: 10,
          lineHeight: 1.15,
        }}>
          <svg width="22" height="22" viewBox="0 0 22 22"><path d="M4 4 v14 l14 -7 z" fill="#fff"/></svg>
          Hairstyle<br/>morph video
        </div>
      </div>

      {/* Big closer line */}
      <div style={{
        textAlign: 'center',
        transform: `translateY(${(1 - Easing.easeOutBack(clamp((localTime - 0.4) / 0.6, 0, 1))) * 20}px)`,
        opacity: clamp((localTime - 0.4) / 0.3, 0, 1),
      }}>
        <div style={{
          fontFamily: TOKENS.display,
          fontSize: 72,
          fontWeight: 700,
          color: TOKENS.ink,
          letterSpacing: '-0.03em',
          lineHeight: 1,
        }}>
          That&rsquo;s the <span style={{ fontStyle: 'italic', color: TOKENS.coral }}>whole</span> workflow.
        </div>
        <div style={{
          fontFamily: TOKENS.mono,
          fontSize: 16,
          letterSpacing: '0.22em',
          color: TOKENS.inkSoft,
          marginTop: 22,
          textTransform: 'uppercase',
        }}>
          Photograph &nbsp;·&nbsp; Prompt &nbsp;·&nbsp; Generate &nbsp;·&nbsp; Morph
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SceneStep3, SceneStep4, SceneOutro,
  FrameSlot, MorphPlayer,
});