// === Escena 05 — "Corregir sin borrar la historia" ===
// El fichaje malo (llegó tarde por caída) queda intacto como prueba. El supervisor reconoce
// el día. Las horas para nómina salen del turno. Todo trazado en el log legal.
function EscenaCH05({ t }){
  // LOCUCIÓN (audio/escena-05.mp3): contexto caída → el fichaje dice 10:00 →
  // candado "nunca se edita" → editor del responsable → corrige a 9:00 →
  // el turno cuenta 300 → a nómina → log legal → cierre.
  const T = {
    fichaje:6.0, candado:12.0,
    editor:18.0, reconoce:24.5,
    turno:31.0, flechaNomina:36.0,
    log:40.0,
  };

  const fichP = clamp((t-T.fichaje)/0.6, 0, 1), fichE = Easing.easeOutBack(fichP);
  const candP = clamp((t-T.candado)/0.5, 0, 1), candE = Easing.easeOutBack(candP);
  const edP = clamp((t-T.editor)/0.6, 0, 1), edE = Easing.easeOutCubic(edP);
  const recoOn = t >= T.reconoce;
  const turnoP = clamp((t-T.turno)/0.6, 0, 1), turnoE = Easing.easeOutBack(turnoP);
  const flechaP = clamp((t-T.flechaNomina)/0.7, 0, 1);
  const logP = clamp((t-T.log)/0.6, 0, 1), logE = Easing.easeOutBack(logP);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="CUANDO ALGO SALE MAL" title={<span>Se corrige el turno. <span className="grad-text">El fichaje no se toca nunca</span></span>}/>

      {/* Contexto: caída del sistema */}
      <div style={{position:'absolute', left:0, right:0, top:200, textAlign:'center', opacity:clamp((t-0.3)/0.6,0,1)}}>
        <div className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:10, fontSize:16, fontWeight:600, color:'#64748B', background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'8px 20px', boxShadow:'0 4px 14px rgba(15,23,42,0.05)'}}>
          <span style={{fontSize:16}}>⚠️</span> El sistema estuvo caído. María José entró a las 9:00, pero fichó a las 10:00.
        </div>
      </div>

      {/* Col 1 — Fichaje intacto (naranja) con candado */}
      <div style={{position:'absolute', left:150, top:310, width:480}}>
        {fichP > 0 && (
          <div style={{background:'#fff', borderRadius:18, border:'1.5px solid rgba(251,140,0,0.4)', boxShadow:'0 22px 55px rgba(251,140,0,0.15)', padding:'26px 30px', transform:`translateY(${(1-fichE)*30}px) scale(${lerp(0.94,1,fichE)})`, opacity:clamp(fichP*1.3,0,1)}}>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:18}}>
              <div style={{width:44, height:44, borderRadius:12, background:'rgba(251,140,0,0.12)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 11 a10 10 0 0 1 12 0 M8.5 13.5 a6.5 6.5 0 0 1 7 0 M11 16 a3 3 0 0 1 2 0" stroke="#FB8C00" strokeWidth="1.9" strokeLinecap="round"/><circle cx="12" cy="19" r="1.4" fill="#FB8C00"/></svg>
              </div>
              <div>
                <div className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2px', color:'#FB8C00'}}>FICHAJE · LA PRUEBA</div>
                <div className="f-plex" style={{fontSize:19, fontWeight:800, color:'#0F172A'}}>Lo que marcó el reloj</div>
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              {[['Entrada','10:00'],['Salida','14:00'],['Registrado','a prueba de inspección']].map((r,i)=>(
                <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'10px 14px', background:'#FFF8F0', borderRadius:10, border:'1px solid #FEEBD4'}}>
                  <span className="f-plex" style={{fontSize:14, fontWeight:600, color:'#92400E'}}>{r[0]}</span>
                  <span className="f-mono" style={{fontSize:14, fontWeight:700, color:'#0F172A'}}>{r[1]}</span>
                </div>
              ))}
            </div>
            {/* Candado "intocable" */}
            {candP > 0 && (
              <div style={{position:'absolute', right:-16, top:-16, display:'flex', alignItems:'center', gap:8, padding:'8px 16px', borderRadius:100, background:'#0F172A', boxShadow:'0 12px 28px rgba(15,23,42,0.35)', transform:`scale(${lerp(0.5,1,candE)})`, opacity:clamp(candP*1.4,0,1)}}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><rect x="5" y="10" width="14" height="10" rx="2" fill="#fff"/><path d="M8 10 V7 a4 4 0 0 1 8 0 v3" stroke="#fff" strokeWidth="2.4" fill="none"/></svg>
                <span className="f-mono" style={{fontSize:12, fontWeight:700, color:'#fff', letterSpacing:'1px'}}>NUNCA SE EDITA</span>
              </div>
            )}
          </div>
        )}
      </div>

      {/* Col 2 — Editor del supervisor (verde) */}
      <div style={{position:'absolute', left:720, top:310, width:480}}>
        {edP > 0 && (
          <div style={{background:'#fff', borderRadius:18, border:`1.5px solid ${recoOn?'rgba(16,185,129,0.5)':'#E2E8F0'}`, boxShadow: recoOn?'0 22px 55px rgba(16,185,129,0.16)':'0 16px 40px rgba(15,23,42,0.06)', padding:'26px 30px', transform:`translateY(${(1-edE)*30}px)`, opacity:edP, transition:'border 350ms, box-shadow 350ms'}}>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:18}}>
              <div style={{width:44, height:44, borderRadius:12, background:'rgba(16,185,129,0.12)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 20 h4 L18 10 l-4-4 L4 16 z" stroke="#10B981" strokeWidth="1.9" strokeLinejoin="round"/><path d="M13 7 l4 4" stroke="#10B981" strokeWidth="1.9"/></svg>
              </div>
              <div>
                <div className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2px', color:'#059669'}}>EDITOR DEL RESPONSABLE</div>
                <div className="f-plex" style={{fontSize:19, fontWeight:800, color:'#0F172A'}}>Reconoce el día real</div>
              </div>
            </div>
            <div className="f-plex" style={{fontSize:13, fontWeight:600, color:'#94A3B8', marginBottom:8}}>Horario realizado</div>
            <div style={{display:'flex', alignItems:'center', gap:12, padding:'16px 18px', background: recoOn?'rgba(16,185,129,0.08)':'#F8FAFC', borderRadius:12, border:`1.5px solid ${recoOn?'rgba(16,185,129,0.4)':'#E2E8F0'}`, transition:'all 350ms'}}>
              <span className="f-mono" style={{fontSize:24, fontWeight:700, color: recoOn?'#059669':'#94A3B8', transition:'color 350ms'}}>
                {recoOn ? '9:00' : '10:00'}
              </span>
              <span style={{color:'#CBD5E1'}}>→</span>
              <span className="f-mono" style={{fontSize:24, fontWeight:700, color:'#0F172A'}}>14:00</span>
              {recoOn && <span style={{marginLeft:'auto'}}><StatusChip label="Corregido" color="success" start={T.reconoce} t={t}/></span>}
            </div>
            <div className="f-plex" style={{marginTop:12, fontSize:13, color:'#64748B', lineHeight:1.4}}>
              El responsable ajusta la entrada de 10:00 a 9:00. El fichaje de al lado no se mueve.
            </div>
          </div>
        )}
      </div>

      {/* Col 3 — Turno → nómina */}
      <div style={{position:'absolute', right:120, top:340, width:410}}>
        {turnoP > 0 && (
          <div style={{background:'#0F172A', borderRadius:18, boxShadow:'0 24px 55px rgba(15,23,42,0.3)', padding:'26px 30px', transform:`scale(${lerp(0.9,1,turnoE)})`, opacity:clamp(turnoP*1.3,0,1)}}>
            <div className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2px', color:'#56E16A'}}>TURNO · LA CUENTA</div>
            <div className="f-plex" style={{fontSize:22, fontWeight:800, color:'#fff', marginTop:4, marginBottom:16}}>Las horas salen de aquí</div>
            {[['Realizado','300 min'],['Retraso','0 min'],['Saldo neto','0 min']].map((r,i)=>(
              <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'9px 0', borderBottom: i<2?'1px solid rgba(255,255,255,0.1)':'none'}}>
                <span className="f-plex" style={{fontSize:14, color:'rgba(255,255,255,0.6)'}}>{r[0]}</span>
                <span className="f-mono" style={{fontSize:15, fontWeight:700, color:'#fff'}}>{r[1]}</span>
              </div>
            ))}
            {flechaP > 0.5 && (
              <div style={{marginTop:16, display:'flex', alignItems:'center', justifyContent:'center', gap:10, padding:'10px 0', borderRadius:100, background:'rgba(86,225,106,0.14)', border:'1px solid rgba(86,225,106,0.3)', opacity:clamp((flechaP-0.5)/0.5,0,1)}}>
                <span className="f-mono" style={{fontSize:13, fontWeight:700, color:'#56E16A', letterSpacing:'1px'}}>→ A NÓMINA</span>
              </div>
            )}
          </div>
        )}
      </div>

      {/* Log legal */}
      {logP > 0 && (
        <div style={{position:'absolute', left:'50%', top:820, transform:`translateX(-50%) translateY(${(1-logE)*14}px)`, opacity:clamp(logP*1.3,0,1)}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:14, background:'#0F172A', borderRadius:100, padding:'12px 24px', boxShadow:'0 14px 36px rgba(15,23,42,0.25)'}}>
            <span style={{fontSize:15}}>🔒</span>
            <span className="f-mono" style={{fontSize:12, fontWeight:700, color:'#56E16A', letterSpacing:'1.5px'}}>LOG LEGAL</span>
            <span className="f-mono" style={{fontSize:12, color:'rgba(255,255,255,0.7)'}}>09:41 · María José · entrada 10:00 → 09:00 · responsable · hash sha256:c7a1…</span>
          </div>
        </div>
      )}

      {/* Cierre */}
      <div style={{position:'absolute', left:0, right:0, top:900, textAlign:'center', opacity:clamp((t-44.5)/0.8,0,1)}}>
        <div className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A'}}>
          La prueba se conserva. La cuenta se corrige. <span style={{color:'#64748B', fontWeight:500}}>Y todo queda trazado.</span>
        </div>
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCH05 });