// Rewnd — sprite-based animated story of the app. 60s, 7 scenes.
// Uses Stage + Sprite + Easing from animations.jsx.

const R = {
  shell:'#242420', card1:'#2E2E26', card2:'#383831',
  ink:'#1A1A17', ember:'#C4944A', emberHi:'#D9B36B',
  cream:'#FFFFFF', mute1:'#BFB9AD', mute2:'#8C877A', mute3:'#66615A',
  shield:'#73B873', line:'rgba(255,255,255,0.08)',
};
const UI = "-apple-system,'SF Pro Text',system-ui,sans-serif";
const DISP = "'Instrument Serif',Georgia,serif";
const POSTER = 'site/poster-banner.jpg';

// Phone chrome
function Phone({ x, y, children, scale = 1, glow = false, rot = 0 }) {
  const W = 360, H = 740;
  return (
    <div style={{
      position:'absolute', left:x, top:y,
      width:W*scale, height:H*scale,
      transform:`rotate(${rot}deg)`, transformOrigin:'center',
    }}>
      <div style={{
        width:W, height:H,
        transform:`scale(${scale})`, transformOrigin:'top left',
        borderRadius:52, background:'#0a0a0a',
        padding:8, boxShadow: glow
          ? '0 30px 80px rgba(196,148,74,0.35), 0 0 0 1px rgba(255,255,255,0.08)'
          : '0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08)',
      }}>
        <div style={{
          width:'100%', height:'100%', borderRadius:44, overflow:'hidden',
          background:R.shell, position:'relative',
        }}>
          <div style={{
            position:'absolute', top:10, left:'50%', transform:'translateX(-50%)',
            width:110, height:32, borderRadius:99, background:'#000', zIndex:5,
          }}/>
          {children}
        </div>
      </div>
    </div>
  );
}

// ── Scene 1: Hero / logo reveal (0-7s) ─────────────────
function SceneHero() {
  const { progress } = useSprite();
  const gap = interpolate([0, 0.4, 0.75, 1], [60, 0, 0, 0], Easing.easeOutCubic)(progress);
  const titleOp = interpolate([0.4, 0.7], [0, 1], Easing.easeOutCubic)(progress);
  const subOp = interpolate([0.55, 0.8], [0, 1], Easing.easeOutCubic)(progress);
  const subY = interpolate([0.55, 0.8], [20, 0], Easing.easeOutCubic)(progress);

  return (
    <>
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(50% 50% at 50% 50%, rgba(196,148,74,0.18), transparent 70%)',
        opacity: interpolate([0, 0.35], [0, 1], Easing.easeOutCubic)(progress),
      }}/>
      <div style={{ position:'absolute', left:'50%', top:'38%', transform:'translate(-50%,-50%)',
        width:280, height:280 }}>
        <div style={{
          position:'absolute', left:0, top:0, width:170, height:170,
          borderRadius:36, border:`4px solid ${R.cream}`,
          transform:`translate(${-gap}px,${-gap}px)`,
        }}/>
        <div style={{
          position:'absolute', left:110, top:110, width:170, height:170,
          borderRadius:36, background:R.ember,
          transform:`translate(${gap}px,${gap}px)`,
        }}>
          <div style={{
            position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)',
            width:16, height:16, borderRadius:99, background:R.ink,
          }}/>
        </div>
      </div>
      <div style={{
        position:'absolute', left:0, right:0, top:'64%', textAlign:'center',
        fontFamily:UI, fontSize:96, fontWeight:600, color:R.cream,
        letterSpacing:-3.5, opacity: titleOp,
      }}>Rewnd</div>
      <div style={{
        position:'absolute', left:0, right:0, top:'78%', textAlign:'center',
        fontFamily:DISP, fontStyle:'italic', fontSize:36, color:R.ember,
        opacity: subOp, letterSpacing:-0.5, transform:`translateY(${subY}px)`,
      }}>Entenda no seu ritmo.</div>
    </>
  );
}

// ── Scene 2: The problem (7-15s) ─────────────
function SceneProblem() {
  const { progress } = useSprite();
  const p1Op = interpolate([0, 0.15], [0, 1], Easing.easeOutCubic)(progress);
  const p1Ty = interpolate([0, 0.15], [20, 0], Easing.easeOutCubic)(progress);
  const p2Op = interpolate([0.22, 0.38], [0, 1], Easing.easeOutCubic)(progress);
  const p2Ty = interpolate([0.22, 0.38], [20, 0], Easing.easeOutCubic)(progress);
  const spoilerOp = interpolate([0.45, 0.6], [0, 1], Easing.easeOutCubic)(progress);
  const spoilerDim = interpolate([0.75, 0.95], [1, 0.25], Easing.easeInOutCubic)(progress);
  const redLineW = interpolate([0.72, 0.9], [0, 100], Easing.easeInOutCubic)(progress);

  return (
    <>
      <div style={{
        position:'absolute', left:80, right:80, top:180,
        fontFamily:DISP, fontStyle:'italic', fontSize:58, color:R.cream,
        lineHeight:1.1, letterSpacing:-1, textAlign:'center',
        opacity:p1Op, transform:`translateY(${p1Ty}px)`,
      }}>Um personagem aparece no jantar.</div>
      <div style={{
        position:'absolute', left:80, right:80, top:300,
        fontFamily:UI, fontSize:26, color:R.mute1, textAlign:'center',
        opacity:p2Op, transform:`translateY(${p2Ty}px)`,
      }}>Você pausa. Abre o Google. Em 4 segundos…</div>
      <div style={{
        position:'absolute', left:80, right:80, top:420, textAlign:'center',
        opacity: spoilerOp * spoilerDim,
      }}>
        <div style={{
          display:'inline-block', position:'relative',
          fontFamily:DISP, fontStyle:'italic', fontSize:66, color:'#ff6b6b',
          lineHeight:1.05, letterSpacing:-1.2,
        }}>
          e descobre quem morre no E07.
          <div style={{
            position:'absolute', left:0, top:'52%',
            width:`${redLineW}%`, height:4, background:'#ff6b6b',
            transformOrigin:'left',
          }}/>
        </div>
      </div>
    </>
  );
}

// ── Scene 3: Poster reveal — cinematic (15-23s) ────
function ScenePoster() {
  const { progress } = useSprite();
  const bgOp = interpolate([0, 0.3], [0, 1], Easing.easeOutCubic)(progress);
  const posterOp = interpolate([0.1, 0.4], [0, 1], Easing.easeOutCubic)(progress);
  const posterS = interpolate([0.1, 0.4, 1], [1.05, 1, 1.08], Easing.easeOutCubic)(progress);
  const labelOp = interpolate([0.45, 0.7], [0, 1], Easing.easeOutCubic)(progress);
  const labelTy = interpolate([0.45, 0.7], [18, 0], Easing.easeOutCubic)(progress);
  const meta1Op = interpolate([0.55, 0.75], [0, 1], Easing.easeOutCubic)(progress);
  const meta2Op = interpolate([0.6, 0.8], [0, 1], Easing.easeOutCubic)(progress);

  return (
    <>
      {/* darkened backdrop */}
      <div style={{
        position:'absolute', inset:0,
        background:`url(${POSTER}) center/cover`,
        filter:'blur(40px) brightness(0.35)',
        opacity: bgOp * 0.6,
      }}/>
      <div style={{
        position:'absolute', inset:0,
        background:'linear-gradient(90deg, rgba(36,36,32,0.9) 0%, rgba(36,36,32,0.5) 50%, rgba(36,36,32,0.95) 100%)',
      }}/>

      {/* poster hero, centered-left */}
      <div style={{
        position:'absolute', left:150, top:'50%',
        transform:`translateY(-50%) scale(${posterS})`,
        width:360, height:540, borderRadius:14, overflow:'hidden',
        opacity: posterOp,
        boxShadow:'0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08)',
      }}>
        <img src={POSTER} alt="" style={{ width:'100%', height:'100%', objectFit:'cover' }}/>
      </div>

      {/* metadata right side */}
      <div style={{ position:'absolute', left:580, top:160, width:560 }}>
        <div style={{ opacity: labelOp, transform:`translateY(${labelTy}px)` }}>
          <div style={{ display:'flex', gap:10, marginBottom:16 }}>
            <Chip>FX · HULU</Chip>
            <Chip>MINISSÉRIE</Chip>
            <Chip>7 EP</Chip>
          </div>
          <div style={{ fontFamily:DISP, fontStyle:'italic', fontSize:82,
            color:R.cream, lineHeight:0.95, letterSpacing:-2 }}>
            Under the<br/>Banner of<br/>Heaven
          </div>
        </div>

        <div style={{ marginTop:28, opacity: meta1Op, display:'flex', gap:24, fontFamily:UI }}>
          <Meta k="2022" v="Lançamento"/>
          <Meta k="Dustin Lance Black" v="Criação"/>
        </div>
        <div style={{ marginTop:18, fontFamily:UI, fontSize:18, color:R.mute1,
          opacity: meta2Op, lineHeight:1.5, maxWidth:460 }}>
          Um detetive mórmon investiga um assassinato brutal em Utah —
          e precisa questionar a fé que moldou sua vida inteira.
        </div>

        <div style={{ marginTop:32, opacity: meta2Op, display:'flex', alignItems:'center', gap:12 }}>
          <div style={{ width:42, height:42, borderRadius:99, background:R.ember,
            display:'flex', alignItems:'center', justifyContent:'center', color:R.ink, fontSize:18 }}>▶</div>
          <div style={{ fontFamily:UI, fontSize:14, color:R.cream }}>
            Você está no episódio <b style={{color:R.ember}}>4 de 7</b>
          </div>
        </div>
      </div>
    </>
  );
}

function Chip({ children }) {
  return <div style={{ padding:'5px 10px', borderRadius:4,
    border:`1px solid ${R.line}`, color:R.mute1,
    fontSize:11, letterSpacing:1.6, fontFamily:UI, fontWeight:500 }}>{children}</div>;
}

function Meta({ k, v }) {
  return (
    <div>
      <div style={{ fontFamily:DISP, fontStyle:'italic', fontSize:26, color:R.cream, letterSpacing:-0.5 }}>{k}</div>
      <div style={{ fontSize:11, letterSpacing:1.4, color:R.mute3, textTransform:'uppercase', marginTop:2 }}>{v}</div>
    </div>
  );
}

// ── Scene 4: Phone Home screen (23-33s) ────────────
function SceneHome() {
  const { progress } = useSprite();
  const phoneX = interpolate([0, 0.25], [1280, 460], Easing.easeOutCubic)(progress);
  const posterOp = interpolate([0.3, 0.5], [0, 1], Easing.easeOutCubic)(progress);
  const textIn = interpolate([0.5, 0.68], [0, 1], Easing.easeOutCubic)(progress);
  const chipStart = 0.65;
  const eps = [1,2,3,4,5,6,7];
  const ctaOp = interpolate([0.9, 1], [0, 1], Easing.easeOutCubic)(progress);

  return (
    <>
      <div style={{ position:'absolute', left:80, top:220, width:360,
        opacity:textIn, transform:`translateY(${(1-textIn)*16}px)` }}>
        <div style={{ fontFamily:UI, fontSize:13, letterSpacing:2, color:R.ember,
          textTransform:'uppercase', marginBottom:16, fontWeight:600 }}>Aba 01 · Até Aqui</div>
        <div style={{ fontFamily:DISP, fontStyle:'italic', fontSize:60, color:R.cream,
          lineHeight:1.0, letterSpacing:-1.2 }}>Sabe onde<br/>você parou.</div>
        <div style={{ fontFamily:UI, fontSize:19, color:R.mute1,
          marginTop:20, lineHeight:1.55 }}>
          Carrega só o que você já viu. Troque de episódio e tudo se reescreve.
        </div>
      </div>

      <Phone x={phoneX} y={40} scale={0.88} glow>
        <div style={{ padding:'62px 20px 16px', color:R.cream }}>
          <div style={{ fontSize:11, color:R.mute2, letterSpacing:1.3 }}>SEXTA · 23H04</div>
          <div style={{ fontFamily:DISP, fontStyle:'italic', fontSize:24, marginTop:4, letterSpacing:-0.4 }}>
            Oi Enrique, vamos <span style={{color:R.ember}}>assistir?</span>
          </div>
        </div>
        <div style={{ padding:'0 20px', display:'flex', justifyContent:'center' }}>
          <div style={{ width:260, height:370, borderRadius:14, overflow:'hidden',
            opacity: posterOp,
            boxShadow:'0 12px 40px rgba(0,0,0,0.5)' }}>
            <img src={POSTER} alt="" style={{ width:'100%', height:'100%', objectFit:'cover' }}/>
          </div>
        </div>
        <div style={{ padding:'22px 20px 6px', fontSize:12, color:R.mute1 }}>Temporada 1 · Episódios</div>
        <div style={{ display:'flex', gap:6, padding:'6px 20px', overflow:'hidden' }}>
          {eps.map((i, idx) => {
            const appear = interpolate([chipStart + idx*0.03, chipStart + idx*0.03 + 0.08], [0, 1], Easing.easeOutCubic)(progress);
            const locked = i > 4;
            return (
              <div key={i} style={{
                flex:'none', width:44, height:34, borderRadius:7,
                background: i===4 ? R.ember : R.card1,
                border: i===4 ? 'none' : `1px solid ${R.line}`,
                opacity: appear,
                transform:`translateY(${(1-appear)*8}px) scale(${0.85 + appear*0.15})`,
                display:'flex', alignItems:'center', justifyContent:'center',
                filter: locked ? 'brightness(0.45)' : 'none',
                fontSize:10, color: i===4 ? R.ink : R.mute1, fontWeight:600,
              }}>E{String(i).padStart(2,'0')}</div>
            );
          })}
        </div>
        <div style={{ padding:'18px 20px' }}>
          <div style={{ background:R.ember, color:R.ink, padding:'12px 16px',
            borderRadius:12, fontSize:14, fontWeight:600, textAlign:'center',
            opacity: ctaOp }}>Consultar Episódio 4</div>
        </div>
      </Phone>
    </>
  );
}

// ── Scene 5: Spoiler Shield (33-41s) ─────────────────────
function SceneShield() {
  const { progress } = useSprite();
  const shieldS = interpolate([0, 0.35], [0.4, 1], Easing.easeOutBack)(progress);
  const shieldOp = interpolate([0, 0.2], [0, 1], Easing.easeOutCubic)(progress);
  const checkDash = interpolate([0.3, 0.55], [160, 0], Easing.easeOutCubic)(progress);
  const glowOp = interpolate([0.5, 0.7], [0, 1], Easing.easeInOutCubic)(progress);
  const labelOp = interpolate([0.55, 0.78], [0, 1], Easing.easeOutCubic)(progress);
  const labelTy = interpolate([0.55, 0.78], [18, 0], Easing.easeOutCubic)(progress);

  return (
    <>
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(40% 40% at 50% 42%, rgba(115,184,115,0.28), transparent 70%)',
        opacity: glowOp,
      }}/>
      <div style={{
        position:'absolute', left:'50%', top:'36%',
        transform:`translate(-50%,-50%) scale(${shieldS})`,
        opacity: shieldOp,
      }}>
        <svg width="380" height="380" viewBox="0 0 440 440">
          <path d="M220 60 L360 110 V220 C360 300 295 355 220 380 C145 355 80 300 80 220 V110 Z"
            fill="none" stroke={R.shield} strokeWidth="5" strokeLinejoin="round"/>
          <path d="M140 220 L200 280 L300 170"
            fill="none" stroke={R.shield} strokeWidth="8" strokeLinecap="round" strokeLinejoin="round"
            strokeDasharray="160" strokeDashoffset={checkDash}/>
        </svg>
      </div>
      <div style={{
        position:'absolute', left:0, right:0, top:'68%', textAlign:'center',
        opacity: labelOp, transform:`translateY(${labelTy}px)`,
      }}>
        <div style={{ fontFamily:UI, fontSize:13, letterSpacing:2, color:R.shield,
          textTransform:'uppercase', fontWeight:600 }}>Spoiler Shield</div>
        <div style={{ fontFamily:DISP, fontStyle:'italic', fontSize:56, color:R.cream,
          marginTop:12, letterSpacing:-1 }}>Seguro até o E04.</div>
        <div style={{ fontFamily:UI, fontSize:19, color:R.mute1, marginTop:14 }}>
          Nada depois — nem no chat, nem no elenco, nem na Siri.
        </div>
      </div>
    </>
  );
}

// ── Scene 6: Chat (41-52s) ──────────────────────────────
function SceneChat() {
  const { progress } = useSprite();
  const phoneX = interpolate([0, 0.2], [-500, 120], Easing.easeOutCubic)(progress);
  const textIn = interpolate([0.22, 0.4], [0, 1], Easing.easeOutCubic)(progress);

  const q = 'Quem é o Profeta Onias?';
  const qCharsRaw = interpolate([0.2, 0.5], [0, q.length], Easing.linear)(progress);
  const qChars = Math.floor(qCharsRaw);
  const qTyped = q.slice(0, qChars);
  const sent = progress > 0.55;
  const typing = progress > 0.57 && progress < 0.7;

  const reply = 'Líder não-oficial apresentado no E02. Fundamentalistas o seguem por "revelação pessoal".';
  const rCharsRaw = interpolate([0.7, 0.95], [0, reply.length], Easing.linear)(progress);
  const rChars = Math.floor(rCharsRaw);
  const rTyped = reply.slice(0, rChars);

  return (
    <>
      <Phone x={phoneX} y={40} scale={0.88} glow>
        <div style={{ padding:'62px 20px 6px', color:R.cream }}>
          <div style={{ fontSize:14, fontWeight:600 }}>Under the Banner of Heaven</div>
          <div style={{ fontSize:10, letterSpacing:1.4, color:R.mute3, marginTop:3 }}>CHAT LIVRE · E04</div>
        </div>
        <div style={{ padding:'14px 20px 8px', display:'flex', gap:6 }}>
          {['Até Aqui','Perguntas','Chat'].map((t,i) => (
            <div key={t} style={{ padding:'6px 10px', borderRadius:99, fontSize:11,
              background: i===2 ? R.ember : R.card1,
              color: i===2 ? R.ink : R.mute1, fontWeight: i===2?600:500 }}>{t}</div>
          ))}
        </div>
        <div style={{ padding:'16px 20px', display:'flex', flexDirection:'column', gap:10, minHeight:400 }}>
          {sent && (
            <div style={{ alignSelf:'flex-end', maxWidth:'80%', background:R.ember, color:R.ink,
              padding:'10px 14px', borderRadius:18, borderBottomRightRadius:6, fontSize:13, fontWeight:500,
              animation:'fadeUp 0.3s ease-out' }}>{q}</div>
          )}
          {typing && (
            <div style={{ alignSelf:'flex-start', background:R.card1,
              padding:'12px 16px', borderRadius:18, borderBottomLeftRadius:6,
              display:'flex', gap:4 }}>
              {[0,1,2].map(i => (
                <div key={i} style={{ width:6, height:6, borderRadius:99, background:R.mute1,
                  animation:`typing 1.2s ${i*0.15}s ease-in-out infinite` }}/>
              ))}
            </div>
          )}
          {progress > 0.7 && (
            <div style={{ alignSelf:'flex-start', maxWidth:'86%', background:R.card1,
              padding:'12px 14px 10px', borderRadius:18, borderBottomLeftRadius:6,
              animation:'fadeUp 0.3s ease-out' }}>
              <div style={{ fontSize:9, color:R.ember, letterSpacing:1.2, fontWeight:600,
                textTransform:'uppercase' }}>Rewnd · Sem spoiler</div>
              <div style={{ fontSize:12.5, color:R.cream, marginTop:6, lineHeight:1.5 }}>
                {rTyped}<span style={{opacity:rChars<reply.length?1:0, color:R.ember}}>▍</span>
              </div>
            </div>
          )}
        </div>
        <div style={{ position:'absolute', left:16, right:16, bottom:24,
          background:'rgba(255,255,255,0.06)', backdropFilter:'blur(20px)',
          borderRadius:24, padding:'10px 12px 10px 16px',
          display:'flex', alignItems:'center', gap:10,
          border:'0.5px solid rgba(255,255,255,0.1)' }}>
          <div style={{ flex:1, fontSize:13, color: qTyped ? R.cream : R.mute2 }}>
            {qTyped || 'Pergunte qualquer coisa…'}
            {!sent && qChars > 0 && qChars < q.length && <span style={{color:R.ember}}>▍</span>}
          </div>
          <div style={{ width:28, height:28, borderRadius:99, background:R.ember,
            display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, color:R.ink, fontWeight:700 }}>↑</div>
        </div>
      </Phone>

      <div style={{ position:'absolute', left:520, top:220, width:360,
        opacity:textIn, transform:`translateY(${(1-textIn)*16}px)` }}>
        <div style={{ fontFamily:UI, fontSize:13, letterSpacing:2, color:R.ember,
          textTransform:'uppercase', marginBottom:16, fontWeight:600 }}>Aba 05 · Chat</div>
        <div style={{ fontFamily:DISP, fontStyle:'italic', fontSize:56, color:R.cream,
          lineHeight:1.0, letterSpacing:-1.2 }}>Pergunte<br/>o que quiser.</div>
        <div style={{ fontFamily:UI, fontSize:19, color:R.mute1,
          marginTop:18, lineHeight:1.55 }}>
          A IA só sabe o que você já viu. Perguntou sobre o futuro?<br/>"Isso será abordado mais pra frente."
        </div>
      </div>
    </>
  );
}

// ── Scene 7: Contexto pré-episódio (52-62s) ─────────────
function SceneContext() {
  const { progress } = useSprite();
  const phoneX = interpolate([0, 0.22], [1280, 500], Easing.easeOutCubic)(progress);
  const textIn = interpolate([0.18, 0.38], [0, 1], Easing.easeOutCubic)(progress);

  // Timeline reveals inside the phone
  const head = interpolate([0.28, 0.45], [0, 1], Easing.easeOutCubic)(progress);
  const beat1 = interpolate([0.42, 0.55], [0, 1], Easing.easeOutCubic)(progress);
  const beat2 = interpolate([0.52, 0.65], [0, 1], Easing.easeOutCubic)(progress);
  const beat3 = interpolate([0.62, 0.75], [0, 1], Easing.easeOutCubic)(progress);
  const cta = interpolate([0.75, 0.88], [0, 1], Easing.easeOutCubic)(progress);

  const beats = [
    { ep:'E01', t:'A investigação começa', d:'Corpos encontrados em Utah. Detetive Jeb Pyre assume o caso.' },
    { ep:'E02', t:'Os irmãos Lafferty', d:'Ron e Dan ganham protagonismo. Fundamentalismo entra em cena.' },
    { ep:'E03', t:'Rachaduras na fé', d:'Pyre começa a questionar o que sempre acreditou.' },
  ];
  const opFor = i => [beat1, beat2, beat3][i];

  return (
    <>
      <div style={{ position:'absolute', left:80, top:200, width:360,
        opacity:textIn, transform:`translateY(${(1-textIn)*16}px)` }}>
        <div style={{ fontFamily:UI, fontSize:13, letterSpacing:2, color:R.ember,
          textTransform:'uppercase', marginBottom:16, fontWeight:600 }}>Aba 02 · Contexto</div>
        <div style={{ fontFamily:DISP, fontStyle:'italic', fontSize:56, color:R.cream,
          lineHeight:1.0, letterSpacing:-1.2 }}>Relembre<br/>antes de<br/>continuar.</div>
        <div style={{ fontFamily:UI, fontSize:19, color:R.mute1,
          marginTop:20, lineHeight:1.55 }}>
          Um resumo dos episódios anteriores, com foco no que você vai precisar lembrar. Sem nada do próximo.
        </div>
      </div>

      <Phone x={phoneX} y={40} scale={0.88} glow>
        <div style={{ padding:'58px 20px 10px', color:R.cream, opacity: head }}>
          <div style={{ fontSize:10, letterSpacing:1.4, color:R.mute3 }}>ANTES DO EPISÓDIO 4</div>
          <div style={{ fontFamily:DISP, fontStyle:'italic', fontSize:26, marginTop:4, letterSpacing:-0.4 }}>
            O que levou <span style={{color:R.ember}}>até aqui.</span>
          </div>
        </div>
        <div style={{ padding:'14px 20px 8px', display:'flex', gap:6 }}>
          {['Até Aqui','Contexto','Elenco'].map((t,i) => (
            <div key={t} style={{ padding:'6px 10px', borderRadius:99, fontSize:11,
              background: i===1 ? R.ember : R.card1,
              color: i===1 ? R.ink : R.mute1, fontWeight: i===1?600:500,
              opacity: head }}>{t}</div>
          ))}
        </div>
        {/* vertical timeline of beats */}
        <div style={{ padding:'18px 20px 0', position:'relative' }}>
          <div style={{ position:'absolute', left:34, top:20, bottom:20,
            width:2, background:R.line }}/>
          {beats.map((b, i) => (
            <div key={i} style={{
              display:'flex', gap:14, marginBottom:16,
              opacity: opFor(i),
              transform:`translateY(${(1-opFor(i))*10}px)`,
            }}>
              <div style={{ flex:'none', width:32, height:32, borderRadius:99,
                background:R.ember, color:R.ink, fontSize:10, fontWeight:700,
                display:'flex', alignItems:'center', justifyContent:'center',
                zIndex:1, position:'relative' }}>{b.ep}</div>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:DISP, fontStyle:'italic', fontSize:18,
                  color:R.cream, letterSpacing:-0.3, lineHeight:1.2 }}>{b.t}</div>
                <div style={{ fontFamily:UI, fontSize:12, color:R.mute1,
                  marginTop:4, lineHeight:1.4 }}>{b.d}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ position:'absolute', left:16, right:16, bottom:20, opacity:cta }}>
          <div style={{ background:R.ember, color:R.ink, padding:'13px 16px',
            borderRadius:12, fontSize:13, fontWeight:600, textAlign:'center' }}>
            Pronto para o Episódio 4
          </div>
        </div>
      </Phone>
    </>
  );
}

// ── Scene 8: Outro (62-70s) ─────────────────────
function SceneOutro() {
  const { progress } = useSprite();
  const gap = interpolate([0, 0.35], [0, 10], Easing.easeOutCubic)(progress);
  const logoS = interpolate([0, 0.3], [0.7, 1], Easing.easeOutBack)(progress);
  const logoOp = interpolate([0, 0.2], [0, 1], Easing.easeOutCubic)(progress);
  const t1Op = interpolate([0.35, 0.6], [0, 1], Easing.easeOutCubic)(progress);
  const t1Ty = interpolate([0.35, 0.6], [14, 0], Easing.easeOutCubic)(progress);
  const t2Op = interpolate([0.55, 0.8], [0, 1], Easing.easeOutCubic)(progress);
  const t2Ty = interpolate([0.55, 0.8], [14, 0], Easing.easeOutCubic)(progress);
  const fadeOut = interpolate([0.88, 1], [1, 0.15], Easing.easeInCubic)(progress);

  return (
    <div style={{ position:'absolute', inset:0, opacity: fadeOut }}>
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(50% 50% at 50% 50%, rgba(196,148,74,0.22), transparent 70%)',
        opacity: logoOp,
      }}/>
      <div style={{ position:'absolute', left:'50%', top:'36%', transform:`translate(-50%,-50%) scale(${logoS})`,
        width:200, height:200, opacity: logoOp }}>
        <div style={{
          position:'absolute', left:0, top:0, width:120, height:120,
          borderRadius:28, border:`3px solid ${R.cream}`,
          transform:`translate(${-gap}px,${-gap}px)`,
        }}/>
        <div style={{
          position:'absolute', left:80, top:80, width:120, height:120,
          borderRadius:28, background:R.ember,
          transform:`translate(${gap}px,${gap}px)`,
        }}>
          <div style={{
            position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)',
            width:12, height:12, borderRadius:99, background:R.ink,
          }}/>
        </div>
      </div>
      <div style={{
        position:'absolute', left:0, right:0, top:'60%', textAlign:'center',
        fontFamily:UI, fontSize:96, fontWeight:600, color:R.cream,
        letterSpacing:-3.5, opacity:t1Op, transform:`translateY(${t1Ty}px)`,
      }}>Rewnd</div>
      <div style={{
        position:'absolute', left:0, right:0, top:'76%', textAlign:'center',
        fontFamily:DISP, fontStyle:'italic', fontSize:42, color:R.ember,
        letterSpacing:-0.8, opacity:t2Op, transform:`translateY(${t2Ty}px)`,
      }}>Entenda no seu ritmo.</div>
    </div>
  );
}

// Scene labels overlay
function SceneLabel() {
  const time = useTime();
  const scenes = [
    { start:0, end:7, num:'01', name:'Apresentação' },
    { start:7, end:15, num:'02', name:'O problema' },
    { start:15, end:23, num:'03', name:'A série' },
    { start:23, end:33, num:'04', name:'Home · Até Aqui' },
    { start:33, end:41, num:'05', name:'Spoiler Shield' },
    { start:41, end:52, num:'06', name:'Chat com IA' },
    { start:52, end:62, num:'07', name:'Contexto' },
    { start:62, end:70, num:'08', name:'Rewnd' },
  ];
  const current = scenes.find(s => time >= s.start && time < s.end) || scenes[scenes.length-1];
  return (
    <div style={{ position:'absolute', left:40, top:32, display:'flex', alignItems:'center', gap:14,
      fontFamily:UI, fontSize:11, letterSpacing:2, color:R.mute2, textTransform:'uppercase' }}>
      <div style={{ color:R.ember, fontWeight:600 }}>Rewnd</div>
      <div style={{ width:1, height:14, background:R.line }}/>
      <div>{current.num} · {current.name}</div>
    </div>
  );
}

function RewndStory() {
  return (
    <Stage width={1280} height={720} duration={70} background={R.shell} persistKey="rewnd-story-v3">
      <Sprite start={0} end={70} keepMounted>
        <div style={{ position:'absolute', inset:0, pointerEvents:'none',
          background:'radial-gradient(100% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.5))' }}/>
        <SceneLabel/>
      </Sprite>

      <Sprite start={0}  end={7}>  <SceneHero/>    </Sprite>
      <Sprite start={7}  end={15}> <SceneProblem/> </Sprite>
      <Sprite start={15} end={23}> <ScenePoster/>  </Sprite>
      <Sprite start={23} end={33}> <SceneHome/>    </Sprite>
      <Sprite start={33} end={41}> <SceneShield/>  </Sprite>
      <Sprite start={41} end={52}> <SceneChat/>    </Sprite>
      <Sprite start={52} end={62}> <SceneContext/> </Sprite>
      <Sprite start={62} end={70}> <SceneOutro/>   </Sprite>
    </Stage>
  );
}

Object.assign(window, { RewndStory });