// scene.jsx — Um vídeo único (~66s) com todas as cenas
// Paleta: azul escuro #0b1a3a, azul claro #9ec5ff / #d7e6ff, branco.
// Mascote: papagaio preto (mascot.png), malicioso, sorrindo.

const BG = '#0a1730';
const BG2 = '#142547';
const SKY = '#9ec5ff';
const SKY_DIM = '#6d8fc9';
const TEXT = '#ffffff';
const ACCENT = '#c9dcff';

function MasterScene(){
  const t = useTime();

  // ── Timeline ──────────────────────────────────────────────
  // 0-5  : Intro — mascote + título
  // 5-7  : Transition
  // 5.5-16.5 : Contexto
  // 16.5-28.5: Live
  // 28-38: QR Mobile (mostra mobile espelhando)
  // 38-50: Stealth mode (app some durante screen share)
  // 50-58: Câmera física tentando espiar
  // 58-66: Fecho "emprego dos sonhos"

  return (
    <div style={{position:'absolute',inset:0,overflow:'hidden',background:BG,fontFamily:"'Inter',sans-serif"}}>
      <Starfield/>

      {/* Persistent mascot in corner from 7s onwards as hosting narrator */}
      <CornerMascot t={t}/>

      {/* SCENE 1 */}
      <Sprite start={0} end={5.5}><SceneIntro/></Sprite>

      {/* SCENE 2 */}
      <Sprite start={5.5} end={16.5}><SceneContext/></Sprite>

      {/* SCENE 3 */}
      <Sprite start={16.5} end={28.5}><SceneLive/></Sprite>

      {/* SCENE 4 */}
      <Sprite start={28.5} end={38.5}><SceneQR/></Sprite>

      {/* SCENE 5 */}
      <Sprite start={38.5} end={50.5}><SceneStealth/></Sprite>

      {/* SCENE 6 */}
      <Sprite start={50.5} end={58.5}><SceneCamera/></Sprite>

      {/* SCENE 7 */}
      <Sprite start={58.5} end={66}><SceneOutro/></Sprite>

      {/* Progress bar (subtle) */}
      <div style={{position:'absolute',bottom:0,left:0,right:0,height:2,background:'rgba(255,255,255,0.06)'}}>
        <div style={{height:'100%',width:`${(t/66)*100}%`,background:SKY}}/>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
function Starfield(){
  return (
    <div style={{position:'absolute',inset:0,background:`radial-gradient(ellipse at 30% 20%, ${BG2} 0%, ${BG} 60%)`}}>
      <svg width="100%" height="100%" style={{position:'absolute',inset:0,opacity:0.5}}>
        {Array.from({length:60}).map((_,i)=>{
          const x = (i*97+13)%1280, y=(i*173+41)%720, r=((i*7)%3)*0.5+0.5;
          return <circle key={i} cx={x} cy={y} r={r} fill={SKY} opacity={((i*13)%10)/25+0.2}/>;
        })}
      </svg>
    </div>
  );
}

// ── CORNER MASCOT (shows from scene 2 onwards) ───────────────
function CornerMascot({t}){
  if (t < 5.5 || t > 58.5) return null;
  // bobbing
  const bob = Math.sin(t*2.1)*6;
  // Speech bubbles rotate by scene
  let speech = null;
  if (t>=7 && t<15)       speech = 'Primeiro, o contexto…';
  else if (t>=17 && t<27) speech = 'Eu escuto tudo 👂';
  else if (t>=29 && t<37) speech = 'E cuspo no celular 📱';
  else if (t>=39 && t<49) speech = 'Stealth: ninguém me vê 🕶';
  else if (t>=51 && t<58) speech = 'O importante é não ser pego 😏';

  return (
    <div style={{position:'absolute',right:28,bottom:40,width:160,height:160,zIndex:30,transform:`translateY(${bob}px)`,pointerEvents:'none'}}>
      <img src="mascot.png" style={{width:'100%',height:'100%',objectFit:'contain',filter:'drop-shadow(0 8px 20px rgba(0,0,0,0.6)) drop-shadow(0 0 25px rgba(158,197,255,0.15))'}}/>
      {speech && (
        <div key={speech} style={{
          position:'absolute',right:130,top:10,
          background:'#fff',color:'#0a1730',
          padding:'8px 14px',borderRadius:14,
          fontSize:13,fontWeight:500,
          whiteSpace:'nowrap',
          boxShadow:'0 8px 24px rgba(0,0,0,0.35)',
          animation:'popin .35s cubic-bezier(.34,1.56,.64,1)',
        }}>
          {speech}
          <div style={{position:'absolute',right:-6,top:16,width:12,height:12,background:'#fff',transform:'rotate(45deg)'}}/>
        </div>
      )}
    </div>
  );
}

// ── SCENE 1: INTRO ──────────────────────────────────────────
function SceneIntro(){
  const {localTime:t,progress} = useSprite();
  const taglineChars = typed('o copiloto que ouve sua entrevista.', 1.8, 1.6, t);
  return (
    <div style={{position:'absolute',inset:0}}>
      {/* Mascot center — grow in */}
      <div style={{
        position:'absolute',left:'50%',top:'44%',
        transform:`translate(-50%,-50%) scale(${0.4+0.6*Easing.easeOutBack(Math.min(1,t/0.9))})`,
        opacity:Math.min(1,t/0.4),
      }}>
        <img src="mascot.png" style={{width:360,height:360,objectFit:'contain',filter:'drop-shadow(0 20px 60px rgba(158,197,255,0.25))'}}/>
      </div>
      {/* Title */}
      <div style={{
        position:'absolute',left:'50%',top:'78%',transform:'translate(-50%,-50%)',
        textAlign:'center',opacity:Easing.easeOutCubic(Math.min(1,Math.max(0,(t-1.2)/0.6))),
      }}>
        <div style={{fontSize:72,fontWeight:700,color:TEXT,letterSpacing:'-0.035em',lineHeight:1,marginBottom:10}}>
          Parrot <span style={{color:SKY,fontStyle:'italic',fontFamily:"'Fraunces','Georgia',serif",fontWeight:500}}>AI</span>
        </div>
        <div style={{fontSize:22,color:ACCENT,letterSpacing:'-0.01em',minHeight:30}}>
          {taglineChars}{t<3.4 && t>1.8 && <span style={{color:SKY,animation:'blink 1s steps(2) infinite'}}>▍</span>}
        </div>
      </div>
      {/* Exit */}
      {t>4.5 && <div style={{position:'absolute',inset:0,background:BG,opacity:Easing.easeInCubic((t-4.5)/1)}}/>}
    </div>
  );
}

// ── SCENE 2: CONTEXT ───────────────────────────────────────
function SceneContext(){
  const {localTime:t} = useSprite();
  const ctx = "Candidato — João Silva, 5 anos em React/Node. Formação em Ciência da Computação. Pretende R$ 12k. Tom: respostas curtas, confiantes e objetivas.\n\nVaga: Senior Frontend na Aurora. Foco em performance, acessibilidade e Team Topologies.";
  const shown = typed(ctx, 2.2, 6.5, t);
  const caret = t>=2.2 && t<8.8;

  // subtle zoom on textarea during typing
  let scale=1, tx=0, ty=0;
  if (t>=3 && t<8){
    const p = Easing.easeInOutCubic(Math.min(1,(t-3)/1));
    scale = 1 + 0.12*p; ty = -20*p;
  }

  return (
    <div style={{position:'absolute',inset:0,opacity:Math.min(1,t/0.4)}}>
      <SceneLabel n="01" title="Contexto" highlight="é poder." sub="Cole o currículo, a vaga, o tom. A IA usa tudo."/>
      <div style={{position:'absolute',left:40,right:40,top:140,bottom:60,transform:`translate(${tx}px,${ty}px) scale(${scale})`,transformOrigin:'center top'}}>
        <AppFrame tab="contexto" contextText={shown} caretInContext={caret} sideActive="ctx"/>
      </div>
      {/* Mouse click on "Contexto" tab at t≈1.2 */}
      {t>=0.6 && t<2 && (()=>{
        const p = Easing.easeInOutCubic(Math.min(1,(t-0.6)/0.9));
        return <MouseCursor x={700+(192-700)*p} y={560+(220-560)*p} click={t>1.3&&t<1.6}/>;
      })()}
      {/* Exit fade */}
      {t>10 && <div style={{position:'absolute',inset:0,background:BG,opacity:Easing.easeInCubic((t-10)/1)}}/>}
    </div>
  );
}

// ── SCENE 3: LIVE INTERVIEW ────────────────────────────────
function SceneLive(){
  const {localTime:t} = useSprite();

  const q = "Me conta sobre um desafio técnico recente.";
  const ans_user = "Migramos um monolito Rails para microsserviços em 4 meses.";
  const sug = "Use STAR, ~45s: Na Aurora, identifiquei acoplamento entre billing e catálogo (S). Precisávamos escalar o catálogo sem derrubar cobranças (T). Isolei em um serviço Node com contrato gRPC, feature-flag pra rollout gradual (A). Resultado: p99 caiu 70%, zero incidentes no deploy (R).";

  const qShown = typed(q, 1.5, 1.6, t);
  const aShown = typed(ans_user, 4.0, 1.8, t);
  const sShown = typed(sug, 6.5, 4.5, t);

  const transcript = [];
  if (t>=1.5) transcript.push({who:'E',text:qShown,typing:t<3.1});
  if (t>=4.0) transcript.push({who:'V',text:aShown,typing:t>=4.0&&t<5.8});

  const suggestion = t>=6.5 ? {
    q:"ME CONTA SOBRE UM DESAFIO TÉCNICO RECENTE.",
    text:sShown, typing:t<11,
  } : null;

  // Zoom into suggestions panel from t=8
  let scale=1,tx=0,ty=0;
  if (t>=8 && t<11){
    const p = Easing.easeInOutCubic(Math.min(1,(t-8)/1.2));
    scale = 1+0.35*p; tx = -180*p; ty = -10*p;
  } else if (t>=11){
    scale = 1.35; tx=-180; ty=-10;
  }

  return (
    <div style={{position:'absolute',inset:0,opacity:Math.min(1,t/0.5)}}>
      <SceneLabel n="02" title="Ela escuta." highlight="Ela responde." sub="Transcrição em tempo real + resposta sob medida."/>
      <div style={{position:'absolute',left:40,right:40,top:140,bottom:60,transform:`translate(${tx}px,${ty}px) scale(${scale})`,transformOrigin:'center'}}>
        <AppFrame tab="transcricao" transcript={transcript} suggestion={suggestion} recording/>
      </div>
      {t>10.5 && <div style={{position:'absolute',inset:0,background:BG,opacity:Easing.easeInCubic((t-10.5)/1)}}/>}
    </div>
  );
}

// ── SCENE 4: QR MOBILE ─────────────────────────────────────
function SceneQR(){
  const {localTime:t} = useSprite();

  const sugFull = "Use STAR, 45s. Foque em isolamento por contrato + feature-flag. Métrica de saída: p99 latency + zero incidentes.";
  const mobileSug = typed(sugFull, 4.5, 3.5, t);

  return (
    <div style={{position:'absolute',inset:0,opacity:Math.min(1,t/0.4)}}>
      <SceneLabel n="03" title="O celular" highlight="espelha tudo." sub="Ative QR Mobile e leia as sugestões com discrição."/>

      {/* LEFT: desktop */}
      <div style={{position:'absolute',left:40,top:140,width:620,bottom:60}}>
        <AppFrame
          tab="transcricao"
          transcript={[
            {who:'E',text:'Me conta um desafio técnico recente.'},
            {who:'V',text:'Migramos um monolito Rails para microsserviços.'},
          ]}
          suggestion={{q:'ME CONTA UM DESAFIO TÉCNICO RECENTE.',text:sugFull}}
          showFerramentas={t>=1.5 && t<4}
          ferramentasHighlight={t>=2.5&&t<4?'qr':null}
          recording
        />
      </div>

      {/* QR badge flying to phone */}
      {t>=2.8 && t<4.5 && (()=>{
        const p = Easing.easeInOutCubic(Math.min(1,(t-2.8)/1.5));
        const x = 360 + (900-360)*p;
        const y = 240 + (360-240)*p;
        const s = 1 - 0.6*p;
        return (
          <div style={{position:'absolute',left:x,top:y,transform:`translate(-50%,-50%) scale(${s})`,background:'#fff',padding:10,borderRadius:10,boxShadow:'0 12px 30px rgba(0,0,0,0.5)',zIndex:20}}>
            <QRCode size={80}/>
          </div>
        );
      })()}

      {/* RIGHT: phone */}
      <div style={{position:'absolute',right:100,top:120,transform:`translateX(${t<1?60:0}px)`,opacity:Math.min(1,Math.max(0,(t-0.5)/0.6)),transition:'none'}}>
        <Phone>
          {t<3 ? (
            <QRPhoneScreen/>
          ) : t<4.5 ? (
            <div style={{flex:1,display:'grid',placeItems:'center',padding:20,textAlign:'center'}}>
              <div>
                <div style={{width:50,height:50,borderRadius:25,border:'3px solid #3b6fe8',borderTopColor:'transparent',animation:'spin 0.9s linear infinite',margin:'0 auto 18px'}}/>
                <div style={{fontSize:14,color:'#c8d2de'}}>Conectando…</div>
              </div>
            </div>
          ) : (
            <PhoneApp sug={mobileSug}/>
          )}
        </Phone>
      </div>

      {t>9 && <div style={{position:'absolute',inset:0,background:BG,opacity:Easing.easeInCubic((t-9)/1)}}/>}
    </div>
  );
}

function Phone({children}){
  return (
    <div style={{width:280,height:560,borderRadius:38,background:'#0a0f18',padding:10,boxShadow:'0 30px 60px rgba(0,0,0,0.6), 0 0 0 2px #222 inset',position:'relative'}}>
      <div style={{position:'absolute',top:18,left:'50%',transform:'translateX(-50%)',width:80,height:22,background:'#000',borderRadius:12,zIndex:2}}/>
      <div style={{width:'100%',height:'100%',borderRadius:30,background:'#0d1b32',display:'flex',flexDirection:'column',overflow:'hidden',position:'relative'}}>
        {children}
      </div>
    </div>
  );
}
function QRPhoneScreen(){
  return (
    <div style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',padding:'60px 20px 20px',color:'#fff',gap:18}}>
      <div style={{fontSize:11,color:'#9ec5ff',letterSpacing:'0.1em'}}>CÂMERA · PARROT</div>
      <div style={{background:'#fff',padding:16,borderRadius:14,boxShadow:'0 0 0 3px #3b6fe8'}}>
        <QRCode size={170}/>
      </div>
      <div style={{fontSize:13,textAlign:'center',color:'#c8d2de',lineHeight:1.5}}>Aponte a câmera do seu celular</div>
      <div style={{marginTop:'auto',fontSize:11,color:'#6d8fc9'}}>parrot.ai/m/a94f</div>
    </div>
  );
}
function PhoneApp({sug}){
  return (
    <div style={{flex:1,display:'flex',flexDirection:'column',color:'#fff',padding:'48px 14px 14px'}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
        <div style={{fontSize:12,fontWeight:600}}>Parrot · mobile</div>
        <div style={{fontSize:10,color:'#2db672',display:'flex',alignItems:'center',gap:4}}><span style={{width:6,height:6,borderRadius:3,background:'#2db672'}}/>conectado</div>
      </div>
      <div style={{fontSize:9.5,color:'#9ec5ff',letterSpacing:'0.08em',marginBottom:8}}>ÚLTIMA PERGUNTA</div>
      <div style={{fontSize:11,color:'#c8d2de',marginBottom:14,lineHeight:1.4,fontStyle:'italic'}}>"Me conta um desafio técnico recente."</div>
      <div style={{fontSize:9.5,color:'#9ec5ff',letterSpacing:'0.08em',marginBottom:8}}>SUGESTÃO</div>
      <div style={{fontSize:12,lineHeight:1.55,color:'#fff',flex:1,overflow:'auto'}}>{sug}<span style={{color:'#9ec5ff',animation:'blink 1s steps(2) infinite'}}>▍</span></div>
      <div style={{display:'flex',gap:6,marginTop:10}}>
        <div style={{flex:1,background:'#1a2744',borderRadius:6,padding:'8px 0',textAlign:'center',fontSize:10,color:'#9ec5ff'}}>↻ Novo</div>
        <div style={{flex:1,background:'#3b6fe8',borderRadius:6,padding:'8px 0',textAlign:'center',fontSize:10,color:'#fff',fontWeight:600}}>✓ Usei</div>
      </div>
    </div>
  );
}
function QRCode({size=100}){
  // Stylised QR
  return (
    <svg width={size} height={size} viewBox="0 0 21 21" shapeRendering="crispEdges">
      <rect width="21" height="21" fill="#fff"/>
      {[[0,0],[14,0],[0,14]].map(([x,y],i)=>(
        <g key={i}>
          <rect x={x} y={y} width="7" height="7" fill="#0a1730"/>
          <rect x={x+1} y={y+1} width="5" height="5" fill="#fff"/>
          <rect x={x+2} y={y+2} width="3" height="3" fill="#0a1730"/>
        </g>
      ))}
      {Array.from({length:120}).map((_,i)=>{
        const x = (i*7+3)%21, y=(i*11+5)%21;
        if ((x<7&&y<7)||(x>=14&&y<7)||(x<7&&y>=14)) return null;
        return <rect key={i} x={x} y={y} width="1" height="1" fill="#0a1730"/>;
      })}
    </svg>
  );
}

// ── SCENE 5: STEALTH ────────────────────────────────────────
function SceneStealth(){
  const {localTime:t} = useSprite();
  const stealth = t >= 4.5;

  return (
    <div style={{position:'absolute',inset:0,opacity:Math.min(1,t/0.4)}}>
      <SceneLabel n="04" title="Invisível no" highlight="screen share." sub="Stealth mode: quem vê sua tela, vê só o Zoom."/>

      {/* Zoom base */}
      <div style={{position:'absolute',inset:0,top:130}}>
        <ZoomBg/>
      </div>

      {/* App on top */}
      <div style={{position:'absolute',left:80,right:80,top:180,bottom:100}}>
        <AppFrame
          tab="transcricao"
          transcript={[
            {who:'E',text:'Pode explicar event loop?'},
            {who:'V',text:'É o mecanismo que processa callbacks em fases.'},
          ]}
          suggestion={{q:'EVENT LOOP',text:'6 fases: timers → pending → idle → poll → check → close callbacks.'}}
          showFerramentas={t>=1.5 && t<4.7}
          ferramentasHighlight={t>=2.5&&t<4.7?'stealth':null}
          stealth={stealth}
          recording
        />
      </div>

      {/* STEALTH ON indicator */}
      {t>=4.7 && t<11 && (
        <div style={{position:'absolute',top:'46%',left:'50%',transform:'translate(-50%,-50%)',textAlign:'center',zIndex:20}}>
          <div style={{display:'inline-flex',alignItems:'center',gap:10,padding:'10px 20px',background:'#0a1730',color:SKY,borderRadius:999,fontFamily:"'JetBrains Mono',monospace",fontSize:13,letterSpacing:'0.08em',fontWeight:600,border:`1px solid ${SKY}`,boxShadow:'0 20px 50px rgba(0,0,0,0.5)',animation:'popin .4s cubic-bezier(.34,1.56,.64,1)'}}>
            <span style={{width:8,height:8,borderRadius:4,background:SKY,animation:'blink 1s steps(2) infinite'}}/>STEALTH ON
          </div>
          <div style={{marginTop:18,fontSize:42,fontWeight:700,color:TEXT,letterSpacing:'-0.025em',textShadow:'0 4px 20px rgba(0,0,0,0.6)'}}>Eles veem <span style={{color:SKY,fontStyle:'italic',fontFamily:"'Fraunces','Georgia',serif",fontWeight:500}}>tela limpa</span>.</div>
          <div style={{marginTop:6,fontSize:16,color:ACCENT}}>Você continua vendo tudo.</div>
        </div>
      )}

      {t>11 && <div style={{position:'absolute',inset:0,background:BG,opacity:Easing.easeInCubic((t-11)/1)}}/>}
    </div>
  );
}

function ZoomBg(){
  return (
    <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,#1a2030,#0f1624)',borderTop:'1px solid rgba(255,255,255,0.05)'}}>
      <div style={{position:'absolute',top:30,left:40,right:40,bottom:100,display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
        <ZTile name="Entrevistador" active/>
        <ZTile name="Você" camOff/>
      </div>
      <div style={{position:'absolute',bottom:28,left:'50%',transform:'translateX(-50%)',display:'flex',gap:8,background:'#2a3244',padding:'8px 14px',borderRadius:10}}>
        {['🎤','📹','🖥 Compartilhando','💬','📝','📞 Sair'].map((x,i)=>(
          <div key={i} style={{padding:'6px 10px',background:i===2?'#3b6fe8':i===5?'#e04040':'transparent',borderRadius:6,fontSize:10,color:'#fff'}}>{x}</div>
        ))}
      </div>
      <div style={{position:'absolute',top:8,left:20,fontSize:11,color:'#8590a0',fontFamily:"'JetBrains Mono',monospace"}}>Zoom · 00:14:32 · COMPARTILHANDO SEU ECRÃ</div>
    </div>
  );
}
function ZTile({name,active,camOff}){
  return (
    <div style={{background:'#1a2030',border:active?'2px solid #3b6fe8':'1px solid rgba(255,255,255,0.06)',borderRadius:10,position:'relative',display:'grid',placeItems:'center'}}>
      {camOff ? (
        <div style={{width:80,height:80,borderRadius:40,background:'#3b6fe8',display:'grid',placeItems:'center',color:'#fff',fontSize:36,fontWeight:600}}>V</div>
      ) : (
        <div style={{width:120,height:120,borderRadius:60,background:'linear-gradient(135deg,#c9dcff,#6d8fc9)'}}/>
      )}
      <div style={{position:'absolute',bottom:10,left:12,color:'#fff',fontSize:12,background:'rgba(0,0,0,0.5)',padding:'3px 8px',borderRadius:4}}>{name}</div>
    </div>
  );
}

// ── SCENE 6: CAMERA ────────────────────────────────────────
function SceneCamera(){
  const {localTime:t} = useSprite();

  // camera path
  const path = [[-80,400],[280,260],[720,500],[1080,280],[500,560],[900,440],[1380,360]];
  const totalDur = 6;
  let cx=path[0][0],cy=path[0][1];
  if (t>=0.5 && t<=totalDur+0.5){
    const lt = t-0.5;
    const seg = totalDur/(path.length-1);
    const i = Math.floor(lt/seg);
    const sp = (lt - i*seg)/seg;
    const a = path[Math.min(i,path.length-1)];
    const b = path[Math.min(i+1,path.length-1)];
    const e = Easing.easeInOutCubic(sp);
    cx = a[0]+(b[0]-a[0])*e;
    cy = a[1]+(b[1]-a[1])*e;
  }
  const radius = 130;
  const showCam = t>=0.5 && t<7;
  const maskStyle = showCam ? {
    WebkitMaskImage:`radial-gradient(circle ${radius}px at ${cx}px ${cy}px, transparent 0, transparent ${radius-30}px, black ${radius}px)`,
    maskImage:`radial-gradient(circle ${radius}px at ${cx}px ${cy}px, transparent 0, transparent ${radius-30}px, black ${radius}px)`,
  } : {};

  return (
    <div style={{position:'absolute',inset:0,opacity:Math.min(1,t/0.4)}}>
      <SceneLabel n="05" title="A câmera física" highlight="não vê." sub="Nem webcam, nem câmera externa capturam o app."/>
      <div style={{position:'absolute',inset:0,top:130}}><ZoomBg/></div>
      <div style={{position:'absolute',left:80,right:80,top:180,bottom:100,...maskStyle}}>
        <AppFrame
          tab="transcricao"
          transcript={[
            {who:'E',text:'Como organiza squads remotos?'},
            {who:'V',text:'Uso Team Topologies + contratos de API claros.'},
          ]}
          suggestion={{q:'SQUADS REMOTOS',text:'Stream-aligned + platform + enabling. Métricas: DORA + cadência de deploys.'}}
          recording
        />
      </div>
      {showCam && <CamReticle x={cx} y={cy} r={radius}/>}
      {t>7 && <div style={{position:'absolute',inset:0,background:BG,opacity:Easing.easeInCubic((t-7)/1)}}/>}
    </div>
  );
}
function CamReticle({x,y,r}){
  return (
    <div style={{position:'absolute',left:x,top:y,transform:'translate(-50%,-50%)',pointerEvents:'none',zIndex:35}}>
      <div style={{width:r*2,height:r*2,borderRadius:r,border:`2px solid ${SKY}`,boxShadow:`0 0 0 1px rgba(0,0,0,0.3), 0 0 60px ${SKY}33 inset`}}/>
      {[['L','T'],['R','T'],['L','B'],['R','B']].map(([h,v],i)=>{
        const style={position:'absolute',width:20,height:20};
        if (h==='L') style.left=14; else style.right=14;
        if (v==='T') { style.top=14; style.borderTop=`2px solid ${SKY}`; } else { style.bottom=14; style.borderBottom=`2px solid ${SKY}`; }
        if (h==='L') style.borderLeft=`2px solid ${SKY}`; else style.borderRight=`2px solid ${SKY}`;
        return <div key={i} style={style}/>;
      })}
      <div style={{position:'absolute',left:'50%',top:'50%',width:30,height:1,background:SKY,transform:'translate(-50%,-50%)'}}/>
      <div style={{position:'absolute',left:'50%',top:'50%',width:1,height:30,background:SKY,transform:'translate(-50%,-50%)'}}/>
      <div style={{position:'absolute',left:'50%',top:-34,transform:'translateX(-50%)',background:'#0a1730',color:SKY,padding:'3px 10px',borderRadius:4,fontSize:10,fontFamily:"'JetBrains Mono',monospace",letterSpacing:'0.12em',whiteSpace:'nowrap',border:`1px solid ${SKY}55`}}>REC · NO SIGNAL</div>
      <div style={{position:'absolute',top:22,right:40,width:8,height:8,borderRadius:4,background:'#ff4040',animation:'blink 1s steps(2) infinite'}}/>
    </div>
  );
}

// ── SCENE 7: OUTRO ──────────────────────────────────────────
function SceneOutro(){
  const {localTime:t} = useSprite();
  return (
    <div style={{position:'absolute',inset:0,background:BG,display:'grid',placeItems:'center'}}>
      {/* Mascot left */}
      <div style={{position:'absolute',left:'18%',top:'50%',transform:`translate(-50%,-50%) scale(${0.6+0.4*Easing.easeOutBack(Math.min(1,t/0.8))})`,opacity:Math.min(1,t/0.4)}}>
        <img src="mascot.png" style={{width:280,height:280,objectFit:'contain',filter:'drop-shadow(0 20px 60px rgba(158,197,255,0.2))'}}/>
        <div style={{position:'absolute',top:-10,right:-30,background:'#fff',color:'#0a1730',padding:'8px 14px',borderRadius:14,fontSize:13,fontWeight:500,boxShadow:'0 8px 24px rgba(0,0,0,0.4)',opacity:t>1?1:0,transform:t>1?'scale(1)':'scale(0.6)',transition:'all .4s cubic-bezier(.34,1.56,.64,1)'}}>
          "o importante é não ser pego 😏"
        </div>
      </div>

      {/* Text right */}
      <div style={{position:'absolute',left:'52%',top:'50%',transform:'translateY(-50%)',maxWidth:640}}>
        <div style={{fontSize:11,color:SKY,letterSpacing:'0.2em',fontFamily:"'JetBrains Mono',monospace",marginBottom:18,opacity:Math.min(1,Math.max(0,(t-0.6)/0.4))}}>PARROT · AI</div>
        <div style={{fontSize:62,fontWeight:700,color:TEXT,letterSpacing:'-0.035em',lineHeight:1.0,opacity:Math.min(1,Math.max(0,(t-1.0)/0.5))}}>
          E é assim<br/>
          que você entra no<br/>
          <span style={{color:SKY,fontStyle:'italic',fontFamily:"'Fraunces','Georgia',serif",fontWeight:500}}>emprego dos sonhos.</span>
        </div>
        <div style={{marginTop:28,display:'flex',alignItems:'center',gap:14,opacity:Math.min(1,Math.max(0,(t-3.2)/0.5))}}>
          <div style={{padding:'12px 22px',background:SKY,color:'#0a1730',borderRadius:8,fontWeight:600,fontSize:15,letterSpacing:'-0.01em'}}>parrot.ai</div>
          <div style={{fontSize:13,color:ACCENT}}>Plano Gold · entrevistas ilimitadas</div>
        </div>
      </div>

      {/* Stars overlay */}
      <Starfield/>
    </div>
  );
}

// ── Helpers ─────────────────────────────────────────────────
function SceneLabel({n,title,highlight,sub}){
  return (
    <div style={{position:'absolute',left:40,top:28,zIndex:10,maxWidth:900}}>
      <div style={{fontSize:11,letterSpacing:'0.22em',color:SKY,fontFamily:"'JetBrains Mono',monospace",marginBottom:6}}>CENA {n}</div>
      <div style={{fontSize:34,fontWeight:700,color:TEXT,letterSpacing:'-0.03em',lineHeight:1.05,marginBottom:8,whiteSpace:'nowrap'}}>
        {title} {highlight && <span style={{color:SKY,fontStyle:'italic',fontFamily:"'Fraunces','Georgia',serif",fontWeight:500}}>{highlight}</span>}
      </div>
      <div style={{fontSize:14,color:ACCENT,letterSpacing:'-0.005em'}}>{sub}</div>
    </div>
  );
}
function MouseCursor({x,y,click}){
  return (
    <div style={{position:'absolute',left:x,top:y,pointerEvents:'none',zIndex:40,transform:'translate(-4px,-4px)'}}>
      {click && <div style={{position:'absolute',left:0,top:0,width:30,height:30,borderRadius:15,border:`2px solid ${SKY}`,transform:'translate(-12px,-12px)',animation:'ping 0.4s ease-out'}}/>}
      <svg width="20" height="22" viewBox="0 0 20 22">
        <path d="M2 2 L2 16 L6.5 12 L9.5 18.5 L12 17 L9 11 L14 11 Z" fill="#0a1730" stroke="#fff" strokeWidth="1.2"/>
      </svg>
    </div>
  );
}

Object.assign(window,{MasterScene});