// === Escena 01 — "Teclear lo que ya está escrito" · audio real 29.70s ===
// LOCUCIÓN: "Piensa en la última factura que metiste en tu programa. Te llegó por email,
//   abriste el PDF, y a teclear: fecha, número, proveedor, base, IVA... unos minutos por
//   factura. Ahora multiplica por todas las del mes. Eso no es una tarde... son días.
//   Días tecleando cosas que ya están escritas en un PDF. Pues eso es lo que se acabó.
//   Mira cómo entran ahora... y qué es lo único que haces tú."
// BEATS: ping-pong ocular PDF→campo (5 campos, uno por palabra) · zoom-out + pila del mes
//   cayendo acelerando · "una tarde" tachado → "SON DÍAS" · freeze + franja Dinaup que empuja.
function Escena03({ t }){
  const T = {
    win:      0.3,   // "Piensa en la última factura"          → ventana
    pdfGlow:  4.8,   // "abriste el PDF"                       → glow del PDF
    ty:       [7.0, 7.7, 8.3, 9.1, 9.9],   // "fecha" · "número" · "proveedor" · "base" · "IVA"
    zoomOut: 13.2,   // "Ahora multiplica"                     → zoom out
    stack0:  13.5,                                           // (apoyo) la pila crece
    tacha:   16.1,   // "Eso no es una tarde"                  → tachado
    dias:    18.0,   // "son días"                             → "días"
    freeze:  23.7,   // "Pues eso es lo que se acabó"          → congela
    franja:  24.1,                                           // (apoyo) franja
    cortina: 26.4,   // "Mira cómo entran ahora"               → cortina de salida
  };
  const tv = Math.min(t, T.freeze + 2.0);   // tras el freeze solo se mueve la franja

  const FIELDS = [
    { k:'Fecha',      v:'04/11/2025' },
    { k:'Nº factura', v:'END-887421' },
    { k:'Proveedor',  v:'Endesa Energía S.A.' },
    { k:'Base',       v:'238,40 €' },
    { k:'IVA 21%',    v:'50,07 €' },
  ];
  const typing = (i)=> tv >= T.ty[i] && tv < T.ty[i]+0.55;
  const done   = (i)=> tv >= T.ty[i]+0.5;

  const winP = clamp((t-T.win)/0.6, 0, 1), winE = Easing.easeOutCubic(winP);
  const glowOn = tv >= T.pdfGlow && tv < T.pdfGlow+1.2;

  // Zoom-out del mundo viejo al aparecer la pila
  const zoP = clamp((tv-T.zoomOut)/0.9, 0, 1), zoE = Easing.easeInOutCubic(zoP);
  const worldScale = lerp(1, 0.72, zoE), worldY = lerp(0, -96, zoE);

  // Pila del mes: 24 PDFs en cascada ACELERANDO (desfase decreciente)
  const stackDelay = (i)=> { let d=0; for(let k=0;k<i;k++) d += Math.max(0.05, 0.30 - k*0.012); return d; };
  const nMes = useCountUp(1, 84, T.stack0+0.3, 3.2, tv);

  const tachaP = clamp((tv-T.tacha)/0.5, 0, 1);
  const diasP  = clamp((tv-T.dias)/0.55, 0, 1), diasE = Easing.easeOutBack(diasP);

  const franjaP  = clamp((t-T.franja)/0.9, 0, 1), franjaE = Easing.easeOutCubic(franjaP);
  const cortinaP = clamp((t-T.cortina)/2.8, 0, 1), cortinaE = Easing.easeInOutQuad(cortinaP);
  const dimP = clamp((t-T.cortina)/1.8, 0, 1);

  // highlight de la zona del PDF que se está "leyendo con el ojo" (ámbar = atención)
  const pdfZone = (i)=> (typing(i) || (tv >= T.ty[i]-0.3 && tv < T.ty[i]))
    ? {borderRadius:4, boxShadow:'0 0 0 3px rgba(217,119,6,0.55)', background:'rgba(217,119,6,0.12)'} : {};

  return (
    <SlideCanvas variant="problem">
      {/* Rótulo fijo desde el frame 0 (hook mudo) */}
      <div style={{position:'absolute', top:58, left:0, right:0, textAlign:'center', zIndex:8}}>
        <div className="f-mono" style={{fontSize:13, letterSpacing:'3px', color:'#64748B', marginBottom:8}}>ENTRADA DE FACTURAS · HOY</div>
        <div className="f-plex" style={{fontSize:44, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em'}}>Teclear lo que ya está escrito</div>
      </div>

      {/* Mundo viejo: PDF + formulario gris (se encoge al llegar la pila) */}
      <div style={{position:'absolute', inset:0, transform:`scale(${worldScale}) translateY(${worldY}px)`, transformOrigin:'50% 46%'}}>

        {/* Visor PDF genérico (izquierda) */}
        <div style={{position:'absolute', left:250, top:196, width:660, height:700, background:'#2B3240', borderRadius:10, overflow:'hidden', boxShadow:'0 30px 70px rgba(0,0,0,0.45)', opacity:winP, transform:`translateY(${(1-winE)*26}px)`}}>
          <div style={{height:38, background:'#1F2530', display:'flex', alignItems:'center', gap:7, padding:'0 14px'}}>
            {[0,1,2].map((i)=><div key={i} style={{width:11,height:11,borderRadius:100,background:'#5A6372'}}/>)}
            <div className="f-mono" style={{fontSize:11, color:'#8A94A6', marginLeft:10}}>factura-endesa-nov.pdf</div>
          </div>
          <div style={{margin:'22px 26px', background:'#fff', borderRadius:4, height:600, padding:'26px 30px', position:'relative', boxShadow: glowOn?'0 0 0 4px rgba(217,119,6,0.4)':'none'}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
              <div style={pdfZone(2)}>
                <div className="f-plex" style={{fontSize:20, fontWeight:800, color:'#0F172A'}}>ENDESA ENERGÍA S.A.</div>
                <div className="f-mono" style={{fontSize:9.5, color:'#94A3B8'}}>B-81948077 · Ribera del Loira 60, Madrid</div>
              </div>
              <div className="f-mono" style={{fontSize:11, color:'#64748B', textAlign:'right'}}>
                <div style={pdfZone(1)}>Nº END-887421</div>
                <div style={pdfZone(0)}>Fecha 04/11/2025</div>
              </div>
            </div>
            <div style={{height:1, background:'#E2E8F0', margin:'16px 0'}}/>
            {[['Término de potencia · 4,6 kW','82,11'],['Término de energía · 312 kWh','131,04'],['Alquiler equipos de medida','4,06'],['Impuesto electricidad 5,11%','21,19']].map((l,i)=>(
              <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'6px 0', fontSize:12.5, color:'#475569'}}>
                <span>{l[0]}</span><span className="f-mono" style={{color:'#94A3B8'}}>{l[1]}</span>
              </div>
            ))}
            <div style={{position:'absolute', left:30, right:30, bottom:26}}>
              <div style={{height:1, background:'#E2E8F0', marginBottom:10}}/>
              <div style={{display:'flex', justifyContent:'space-between', padding:'2px 0'}}><span style={{fontSize:12, color:'#64748B'}}>Base imponible</span><span className="f-mono" style={{fontSize:13, fontWeight:600, color:'#0F172A', ...pdfZone(3)}}>238,40 €</span></div>
              <div style={{display:'flex', justifyContent:'space-between', padding:'2px 0'}}><span style={{fontSize:12, color:'#64748B'}}>IVA 21%</span><span className="f-mono" style={{fontSize:13, fontWeight:600, color:'#0F172A', ...pdfZone(4)}}>50,07 €</span></div>
              <div style={{display:'flex', justifyContent:'space-between', padding:'6px 0 0'}}><span style={{fontSize:13, fontWeight:700, color:'#0F172A'}}>TOTAL</span><span className="f-mono" style={{fontSize:17, fontWeight:800, color:'#0F172A'}}>288,47 €</span></div>
            </div>
          </div>
        </div>

        {/* Formulario gris noventero (derecha) */}
        <div style={{position:'absolute', left:990, top:236, width:660, height:620, background:'#DDE1E7', borderRadius:6, overflow:'hidden', boxShadow:'0 26px 60px rgba(0,0,0,0.40)', border:'1px solid #B9C0CC', opacity:winP, transform:`translateY(${(1-winE)*30}px)`}}>
          <div style={{height:34, background:'linear-gradient(180deg,#8E99AB,#6F7A8E)', display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 12px'}}>
            <div style={{fontSize:12, fontWeight:700, color:'#fff', fontFamily:"'Open Sans',sans-serif"}}>Registro de facturas — Módulo compras</div>
            <div style={{display:'flex', gap:6}}>{['—','□','×'].map((c,i)=><div key={i} style={{width:20,height:18,background:'#CBD2DC',borderRadius:2,fontSize:10,textAlign:'center',lineHeight:'18px',color:'#3D4657'}}>{c}</div>)}</div>
          </div>
          <div style={{padding:'22px 26px', display:'flex', flexDirection:'column', gap:11}}>
            {FIELDS.map((f,i)=>{
              const act = typing(i);
              return (
                <div key={i} style={{background:'#E9ECEF', border:`2px solid ${act?'#8A94A6':'#C6CCD6'}`, borderRadius:3, padding:'7px 12px', boxShadow: act?'inset 0 1px 3px rgba(0,0,0,0.12), 0 0 0 3px rgba(120,130,150,0.25)':'inset 0 1px 3px rgba(0,0,0,0.10)'}}>
                  <div className="f-mono" style={{fontSize:9, letterSpacing:'1.2px', color:'#7C8698', textTransform:'uppercase', marginBottom:2}}>{f.k}</div>
                  <div style={{minHeight:22, fontSize:15, fontWeight:600, color:'#3D4657', fontFamily:"'Open Sans',sans-serif"}}>
                    <Typewriter text={f.v} start={T.ty[i]} cps={13} t={tv} caret={act}/>
                    {!act && !done(i) && <span style={{opacity:0.5+0.5*Math.sin(tv*4), color:'#7C8698'}}>|</span>}
                  </div>
                </div>
              );
            })}
            <div style={{marginTop:6, display:'flex', justifyContent:'flex-end', gap:8}}>
              <div style={{padding:'8px 22px', background:'#C6CCD6', border:'1px solid #A6AEBC', borderRadius:3, fontSize:12.5, fontWeight:600, color:'#3D4657'}}>Guardar</div>
              <div style={{padding:'8px 22px', background:'#C6CCD6', border:'1px solid #A6AEBC', borderRadius:3, fontSize:12.5, fontWeight:600, color:'#3D4657'}}>Nueva</div>
            </div>
          </div>
        </div>

        {/* Pila del mes (aparece con el zoom-out) */}
        {zoP > 0 && (
          <div style={{position:'absolute', left:210, right:210, top:948, display:'flex', gap:14, flexWrap:'wrap', justifyContent:'center'}}>
            {Array.from({length:24}).map((_,i)=>{
              let d=0; for(let k=0;k<i;k++) d += Math.max(0.05, 0.30 - k*0.012);
              const p = clamp((tv-(T.stack0+d))/0.35, 0, 1);
              const e = Easing.easeOutBack(p);
              return (
                <div key={i} style={{width:44, height:56, background:'#fff', borderRadius:5, border:'1px solid #CBD5E1', boxShadow:'0 8px 18px rgba(0,0,0,0.28)', opacity:clamp(p*1.4,0,1), transform:`translateY(${(1-e)*-46}px) rotate(${(i%5-2)*2.5}deg)`, display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <div className="f-mono" style={{fontSize:9, fontWeight:800, color:'#EF4444'}}>PDF</div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Contador del mes + tachado + SON DÍAS */}
      {zoP > 0.4 && (
        <div style={{position:'absolute', top:800, left:0, right:0, textAlign:'center', zIndex:9}}>
          <span className="f-mono" style={{fontSize:26, fontWeight:700, color:'#475569'}}>× {nMes} este mes</span>
          <span style={{display:'inline-block', width:36}}/>
          <span className="f-plex" style={{position:'relative', fontSize:26, fontWeight:600, color:'#94A3B8'}}>
            una tarde
            <span style={{position:'absolute', left:-4, right:-4, top:'52%', height:4, background:'#EF4444', borderRadius:3, transform:`scaleX(${Easing.easeInOutCubic(tachaP)})`, transformOrigin:'0 50%'}}/>
          </span>
          {diasP > 0 && (
            <span className="f-plex" style={{display:'inline-block', marginLeft:26, fontSize:44, fontWeight:800, color:'#F87171', letterSpacing:'-0.02em', opacity:clamp(diasP*1.3,0,1), transform:`translateY(${(1-diasE)*-22}px) scale(${lerp(0.7,1,diasE)})`}}>SON DÍAS</span>
          )}
        </div>
      )}

      {/* Freeze-dim + página Dinaup limpia (el puente al mundo nuevo — sin barras) */}
      {dimP > 0 && <div style={{position:'absolute', inset:0, background:'#0B1220', opacity:dimP*0.35, zIndex:11}}/>}
      {franjaP > 0 && (
        <div style={{position:'absolute', inset:0, background:'#F8FAFC', opacity:Easing.easeInOutQuad(cortinaP), zIndex:12, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
          <DinaupLogo size={52}/>
          <RuedaDivider style={{margin:'26px 0 28px'}}/>
          <div className="f-plex" style={{fontSize:54, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em', opacity:clamp((t-T.cortina-0.5)/0.6,0,1), transform:`translateY(${(1-Easing.easeOutCubic(clamp((t-T.cortina-0.5)/0.6,0,1)))*20}px)`}}>Mira cómo <span className="grad-text">entran ahora</span></div>
          <div style={{fontSize:19, color:'#64748B', marginTop:16, opacity:clamp((t-T.cortina-1.1)/0.6,0,1)}}>— y qué es lo único que haces tú.</div>
        </div>
      )}

    </SlideCanvas>
  );
}
Object.assign(window, { Escena03 });