// === Escena 03 — "El excel, de cerca" · audio real 39.16s ===
// LOCUCIÓN: "Acércate a uno de esos excels... cualquiera. El archivo se llama final, versión
//   tres... y dentro hay una pestaña que pone antigua, no tocar. Una celda grita error de
//   referencia. El total está escrito a mano... y no cuadra con la suma. Hay filas pintadas de
//   verde y naranja que solo entiende quien las pintó, y una nota al margen: ¿cobrado en
//   efectivo?. Sin permisos, sin copia, a un clic de romperse. Y de ahí... están saliendo
//   decisiones de tu negocio. Eso tan tuyo se merece algo mejor."
// UI: adaptación fiel de slide-flex-excel.jsx del master (slide 21) con datos del taller.
// BEATS: zoom-in desde el enjambre · cada defecto se ilumina con su mención · badges de dolor ·
//   pulso global ("decisiones de tu negocio") · desatura y encoge ("algo mejor") → giro.
function Escena03({ t }){
  const T = {
    zoom:      0.3,  // "Acércate a uno de esos excels"        → zoom
    nombre:   3.4,  // "El archivo se llama final"            → nombre del archivo
    pestana:  6.6,  // "una pestaña que pone antigua"         → pestaña
    ref:     10.4,  // "error de referencia"                  → celda #REF
    total:   11.8,  // "El total está escrito a mano"         → total
    notaTotal:14.5, // "no cuadra con la suma"                → nota
    fillV:    16.5,  // "filas pintadas de verde"              → relleno verde
    fillN:   17.0,                                         // (apoyo) relleno naranja
    notaEf:  21.8,  // "cobrado en efectivo"                  → nota al margen
    badges:  [23.3, 24.3, 25.1],   // "Sin permisos" · "sin copia" · "a un clic de romperse"
    pulso:   28.5,  // "decisiones de tu negocio"             → pulso
    mejor:   31.6,  // "se merece algo mejor"                 → remate
  };
  const zoomP = clamp((t-T.zoom)/1.6, 0, 1), zoomE = Easing.easeInOutCubic(zoomP);
  const sc = lerp(0.42, 1, zoomE);
  const nombreOn = t >= T.nombre && t < T.nombre+1.6;
  const nombreSweep = nombreOn ? clamp((t-T.nombre)/1.0, 0, 1) : 0;
  const pestOn = t >= T.pestana && t < T.pestana+1.4;
  const pestPulse = pestOn ? Math.sin((t-T.pestana)/1.4*Math.PI) : 0;
  const refP = clamp((t-T.ref)/0.45, 0, 1), refE = Easing.easeOutBack(refP);
  const totalOn = t >= T.total;
  const totalLatido = totalOn ? 12 + 5*Math.sin((t-T.total)*3.2) : 0;
  const notaTotalP = clamp((t-T.notaTotal)/0.45, 0, 1);
  const fillVP = clamp((t-T.fillV)/0.5, 0, 1);
  const fillNP = clamp((t-T.fillN)/0.5, 0, 1);
  const notaEfP = clamp((t-T.notaEf)/0.5, 0, 1), notaEfE = Easing.easeOutBack(notaEfP);
  const badgeP = (i)=> clamp((t-T.badges[i])/0.5, 0, 1);
  const pulsoOn = t >= T.pulso && t < T.pulso+1.0;
  const pulso = pulsoOn ? Math.sin((t-T.pulso)/1.0*Math.PI) : 0;
  const mejorP = clamp((t-T.mejor)/1.4, 0, 1), mejorE = Easing.easeInOutCubic(mejorP);

  const ROWS = [
    { trabajo:'Desmontaje motor',   quien:'JL', h:'2,5',  imp:'112,50' },
    { trabajo:'Cambio correa dist.',quien:'MT', h:'1',    imp:'45,00', fillV:true },
    { trabajo:'Revisión frenos',    quien:'JL', h:'1,5',  imp:'#¡REF!', ref:true },
    { trabajo:'Diagnosis OBD',      quien:'—',  h:'0,5',  imp:'22,50', fillN:true, notaEf:true },
    { trabajo:'Alineado dirección', quien:'MT', h:'1',    imp:'48,00' },
    { trabajo:'Cambio de aceite',   quien:'JL', h:'0,5',  imp:'19,80' },
  ];

  const badges = [
    { l:'Sin permisos',                 left:-158, top:116,  rot:-2.5, icon:'lock' },
    { l:'Sin copia de seguridad',       right:-120, top:170, rot:2,    icon:'cloud' },
    { l:'v3(2) — ¿cuál es la buena?',   left:60,  bottom:-30, rot:-1.5, icon:'doc' },
  ];
  const badgeIcon = (icon)=> icon==='lock' ? (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><rect x="5" y="11" width="14" height="9" rx="2" stroke="#B91C1C" strokeWidth="1.8" fill="none"/><path d="M8 11 V8 a4 4 0 0 1 8 0" stroke="#B91C1C" strokeWidth="1.8" fill="none"/><path d="M4 21 L20 4" stroke="#B91C1C" strokeWidth="2" strokeLinecap="round"/></svg>
  ) : icon==='cloud' ? (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M7 18 a4.5 4.5 0 0 1 0-9 a5.5 5.5 0 0 1 10.5 1.5 a4 4 0 0 1 -0.5 7.5 z" stroke="#B91C1C" strokeWidth="1.8" fill="none"/><path d="M4 21 L20 4" stroke="#B91C1C" strokeWidth="2" strokeLinecap="round"/></svg>
  ) : (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M6 2 h8 l4 4 v16 h-12 z" stroke="#B91C1C" strokeWidth="1.8" fill="none"/><path d="M6 8 h12 M6 12 h12" stroke="#B91C1C" strokeWidth="1.4"/></svg>
  );

  return (
    <SlideCanvas variant="problem">
      <div style={{position:'absolute', top:52, left:0, right:0, textAlign:'center', zIndex:8, opacity:clamp(zoomP*1.5,0,1)}}>
        <div className="f-mono" style={{fontSize:13, letterSpacing:'3px', color:'#64748B', marginBottom:8}}>UNO DE ESOS EXCELS · CUALQUIERA</div>
        <div className="f-plex" style={{fontSize:40, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em'}}>De aquí salen decisiones de tu negocio</div>
      </div>

      <div style={{position:'absolute', left:385, top:200, width:1150, height:610, transform:`scale(${sc * lerp(1, 0.92, mejorE)}) ${pulsoOn?`scale(${1+pulso*0.015})`:''}`, transformOrigin:'50% 45%', filter:`saturate(${1-mejorE*0.85}) brightness(${1-mejorE*0.06})`, opacity:1-mejorE*0.15, zIndex:4}}>
        {/* Ventana Excel */}
        <div style={{position:'absolute', inset:0, background:'#fff', borderRadius:10, overflow:'hidden', border:'1px solid #C9CFD6', boxShadow:'0 30px 80px rgba(15,23,42,0.35)'}}>
          {/* Barra título */}
          <div style={{height:36, background:'#185C37', display:'flex', alignItems:'center', gap:10, padding:'0 12px'}}>
            <div style={{width:18, height:18, background:'#fff', borderRadius:3, color:'#185C37', fontSize:11, fontWeight:900, display:'flex', alignItems:'center', justifyContent:'center'}}>X</div>
            <span className="f-mono" style={{fontSize:10, color:'rgba(255,255,255,0.75)', background:'rgba(0,0,0,0.18)', borderRadius:100, padding:'2px 10px'}}>Autoguardado: desactivado</span>
            <span className="f-mono" style={{fontSize:11.5, color:'#fff', margin:'0 auto', position:'relative', padding:'2px 8px'}}>
              tiempos_TALLER_FINAL_v3(2).xlsx — Sin guardar
              {nombreOn && <span style={{position:'absolute', left:`${nombreSweep*90}%`, top:0, bottom:0, width:'12%', background:'linear-gradient(90deg, transparent, rgba(255,220,24,0.45), transparent)'}}/>}
              {nombreOn && <span style={{position:'absolute', inset:-2, border:'2px solid rgba(255,220,24,0.7)', borderRadius:5}}/>}
            </span>
            <div style={{display:'flex', gap:5}}>
              {['—','□','✕'].map((c,i)=><span key={i} style={{fontSize:10, color:'rgba(255,255,255,0.8)'}}>{c}</span>)}
            </div>
          </div>
          {/* Ribbon */}
          <div style={{height:30, background:'#F3F2F1', display:'flex', alignItems:'center', gap:14, padding:'0 12px', borderBottom:'1px solid #E1DFDD'}}>
            <span style={{fontSize:10.5, fontWeight:700, color:'#fff', background:'#107C41', borderRadius:3, padding:'3px 12px'}}>Archivo</span>
            {['Inicio','Insertar','Fórmulas','Datos','Revisar','Vista'].map((m,i)=><span key={m} style={{fontSize:10.5, color:'#444', borderBottom: i===0?'2px solid #107C41':'none', paddingBottom:2}}>{m}</span>)}
          </div>
          {/* Barra de fórmulas: el total a mano */}
          <div style={{height:26, display:'flex', alignItems:'center', gap:10, padding:'0 12px', borderBottom:'1px solid #E1DFDD', background:'#FAFAFA'}}>
            <span className="f-mono" style={{fontSize:10, color:'#666', width:30}}>E9</span>
            <span className="f-mono" style={{fontSize:10, color: totalOn?'#C00000':'#666', fontWeight: totalOn?800:400}}>247,80   ← escrito a mano (no es fórmula)</span>
          </div>
          {/* Grid */}
          <div style={{display:'grid', gridTemplateColumns:'34px 1fr 64px 64px 110px 1fr', fontSize:11}}>
            {/* Cabecera de columnas */}
            {['','A','B','C','D','E'].map((c,i)=><div key={i} className="f-mono" style={{background:'#F3F2F1', border:'0.5px solid #E1DFDD', padding:'3px 6px', textAlign:'center', color:'#666', fontSize:9}}>{c}</div>)}
            {/* Fila 1 cabeceras usuario */}
            {['1','Trabajo','Quién','Horas','Importe',''].map((c,i)=>(
              <div key={i} className={i===0?'f-mono':'f-plex'} style={{border:'0.5px solid #E1DFDD', padding:'5px 8px', background: i===0?'#F3F2F1':'#DDEBF7', fontWeight: i===0?400:700, color: i===0?'#999':'#1F3864', fontSize: i===0?9:11, textAlign: i===0?'center':'left'}}>{c}</div>
            ))}
            {/* Filas de datos */}
            {ROWS.map((r,ri)=>(
              <React.Fragment key={ri}>
                <div className="f-mono" style={{border:'0.5px solid #E1DFDD', padding:'5px 6px', background:'#F3F2F1', color:'#999', fontSize:9, textAlign:'center'}}>{ri+2}</div>
                {[r.trabajo, r.quien, r.h, r.imp, ''].map((c,ci)=>{
                  const isRef = r.ref && ci===3;
                  const fillV = r.fillV && fillVP>0;
                  const fillN = r.fillN && fillNP>0;
                  return (
                    <div key={ci} className={ci>=1&&ci<=3?'f-mono':'f-plex'} style={{position:'relative', border:'0.5px solid #E1DFDD', padding:'5px 8px', textAlign: ci>=1&&ci<=3?'center':'left', fontSize:10.5,
                      background: isRef ? `rgba(192,0,0,${0.1+refP*0.08})` : fillV ? `rgba(112,173,71,${0.28*fillVP})` : fillN ? `rgba(237,125,49,${0.3*fillNP})` : '#fff',
                      color: isRef ? '#C00000' : '#333', fontWeight: isRef?800:400,
                      transform: isRef && refP<1 ? `scale(${lerp(1.25,1,refE)})` : 'none'}}>
                      {isRef ? '#¡REF!' : c}
                      {/* Nota efectivo */}
                      {r.notaEf && ci===4 && notaEfP>0 && (
                        <span className="f-plex" style={{position:'absolute', left:6, top:'50%', transform:`translateY(-50%) rotate(-1.2deg) scale(${lerp(1.15,1,notaEfE)})`, fontSize:10.5, fontStyle:'italic', fontWeight:700, color:'#C00000', whiteSpace:'nowrap', opacity:clamp(notaEfP*1.3,0,1)}}>¿cobrado en efectivo?</span>
                      )}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
            {/* Fila 8 vacía + fila TOTAL */}
            {['8','','','','',''].map((c,i)=><div key={i} className="f-mono" style={{border:'0.5px solid #E1DFDD', padding:'5px 6px', background: i===0?'#F3F2F1':'#fff', color:'#999', fontSize:9, textAlign:'center'}}>{c}</div>)}
            {['9','TOTAL','','','247,80',''].map((c,i)=>(
              <div key={i} className="f-mono" style={{position:'relative', border:'0.5px solid #E1DFDD', padding:'5px 8px', background: i===0?'#F3F2F1':i===4?'#FFF2CC':'#fff', fontWeight: i===1||i===4?800:400, color: i===0?'#999':'#333', fontSize: i===0?9:11, textAlign: i===0?'center':i===4?'center':'left',
                boxShadow: i===4 && totalOn ? `inset 0 0 0 2.5px #DC2626, 0 0 ${totalLatido}px rgba(220,38,38,0.55)` : 'none'}}>
                {c}
                {i===4 && notaTotalP>0 && (
                  <span className="f-plex" style={{position:'absolute', left:'104%', top:'50%', transform:'translateY(-50%)', fontSize:12, fontStyle:'italic', fontWeight:800, color:'#C00000', whiteSpace:'nowrap', opacity:clamp(notaTotalP*1.3,0,1)}}>← ¿¿no cuadra??</span>
                )}
              </div>
            ))}
          </div>
          {/* Pestañas de hoja */}
          <div style={{position:'absolute', bottom:0, left:0, right:0, height:28, borderTop:'1px solid #E1DFDD', display:'flex', alignItems:'center', gap:2, padding:'0 10px', background:'#FAFAFA'}}>
            <span className="f-mono" style={{fontSize:9.5, background:'#fff', border:'1px solid #E1DFDD', borderBottom:'2.5px solid #107C41', padding:'2px 12px', color:'#107C41', fontWeight:700}}>Hoja1</span>
            <span className="f-mono" style={{fontSize:9.5, color:'#999', padding:'2px 12px'}}>Hoja1 (2)</span>
            <span className="f-mono" style={{fontSize:9.5, color: pestOn?'#C00000':'#999', padding:'2px 12px', fontWeight: pestOn?800:400, background: pestOn?`rgba(192,0,0,${0.08+pestPulse*0.1})`:'transparent', borderRadius:4, transform: pestOn?`scale(${1+pestPulse*0.08})`:'none', border: pestOn?'1.5px solid rgba(192,0,0,0.5)':'none'}}>antigua NO TOCAR</span>
          </div>
        </div>

        {/* Badges de dolor */}
        {badges.map((b,i)=>{
          const p = badgeP(i), e = Easing.easeOutBack(p);
          if (p <= 0) return null;
          return (
            <div key={i} style={{position:'absolute', ...(b.left!==undefined?{left:b.left}:{right:b.right}), ...(b.top!==undefined?{top:b.top}:{bottom:b.bottom}), display:'flex', alignItems:'center', gap:8, background:'#FEF2F2', border:'1.5px solid #FECACA', borderRadius:100, padding:'9px 18px', transform:`rotate(${b.rot}deg) scale(${lerp(0.6,1,e)})`, opacity:clamp(p*1.3,0,1), boxShadow:'0 14px 34px rgba(220,38,38,0.22)', zIndex:6}}>
              {badgeIcon(b.icon)}
              <span className="f-plex" style={{fontSize:14, fontWeight:800, color:'#B91C1C', whiteSpace:'nowrap'}}>{b.l}</span>
            </div>
          );
        })}
      </div>

      {/* Remate "se merece algo mejor" */}
      {mejorP > 0.4 && (
        <div style={{position:'absolute', bottom:140, left:0, right:0, textAlign:'center', opacity:clamp((mejorP-0.4)/0.5,0,1), zIndex:8}}>
          <span className="f-plex" style={{fontSize:26, fontWeight:800, color:'#0F172A'}}>Eso tan tuyo... <span className="grad-text">se merece algo mejor.</span></span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { Escena03 });