// === escena-05 — El libro sano ===
function EscenaCC05({ t }){

  const T = {
    mas:      1.23,   // "mira más cosas"
    invis:    4.15,   // "no está viendo tu libro diario"
    dos:     10.95,   // "dos asientos"
    porque:  13.61,   // "lo sabe porque el asiento lleva dentro"
    renum:   20.90,   // "Reparte los números por fecha"
    amort:   25.12,   // "Calcula la amortización"
    cierre:  29.35,   // "prepara el cierre del ejercicio"
    salida:  34.90,   // "Recojamos lo que acabas de ver"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const Bloque = ({ x, y, w, beat, icono, titulo, children, color='#0085FF' }) => {
    const p = ap(beat, 0.6);
    return (
      <div style={{
        position:'absolute', left:x, top:y, width:w,
        opacity:p, transform:`translateY(${(1-p)*18}px)`,
      }}>
        <div style={{
          background:'#fff', borderRadius:16, border:`1px solid ${color}3A`,
          boxShadow:`0 16px 44px ${color}18`, padding:'22px 26px', minHeight:230,
        }}>
          <div className="f-mono" style={{fontSize:15, color, letterSpacing:'.08em'}}>{icono}</div>
          <div className="f-plex" style={{fontSize:28, fontWeight:600, color:'#0F172A', marginTop:8}}>{titulo}</div>
          <div style={{marginTop:14}}>{children}</div>
        </div>
      </div>
    );
  };

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="Y YA QUE MIRA" title="Mira más cosas" />

      {/* Los dos hallazgos: invisibles y duplicados */}
      <Bloque x={130} y={250} w={780} beat={T.invis} icono="SALUD DEL LIBRO DIARIO" color="#EF4444"
              titulo="Asientos que tu libro no ve">
        {[['12','sin número'],['184','apuntes sin ejercicio']].map(([n,l],i)=>{
          const p = ap(T.invis + 0.5 + i*0.3, 0.45, Easing.easeOutBack);
          return (
            <div key={l} style={{
              display:'flex', alignItems:'baseline', gap:14, marginTop:12,
              opacity:p, transform:`translateY(${(1-p)*10}px)`,
            }}>
              <span className="f-plex" style={{fontSize:46, fontWeight:300, color:'#EF4444'}}>{n}</span>
              <span style={{fontSize:21, color:'#64748B'}}>{l}</span>
            </div>
          );
        })}
      </Bloque>

      <Bloque x={960} y={250} w={820} beat={T.dos} icono="ASIENTOS DUPLICADOS" color="#FB8C00"
              titulo="Dos asientos, una factura">
        <div style={{display:'flex', alignItems:'center', gap:16, marginTop:6}}>
          <div style={{padding:'12px 16px', borderRadius:10, background:'#F8FAFC',
                       border:'1px solid #E2E8F0', fontSize:19, color:'#0F172A'}}>Asiento 1.284</div>
          <div style={{padding:'12px 16px', borderRadius:10, background:'#F8FAFC',
                       border:'1px solid #E2E8F0', fontSize:19, color:'#0F172A'}}>Asiento 1.902</div>
        </div>
        <svg width="360" height="54" style={{overflow:'visible', marginTop:6}}>
          <path d="M60,6 L170,40" stroke="#FB8C00" strokeWidth="3" fill="none"
            strokeDasharray="120" strokeDashoffset={120*(1-ap(T.porque,0.7,Easing.easeInOutCubic))}/>
          <path d="M280,6 L180,40" stroke="#FB8C00" strokeWidth="3" fill="none"
            strokeDasharray="120" strokeDashoffset={120*(1-ap(T.porque+0.25,0.7,Easing.easeInOutCubic))}/>
        </svg>
        <div style={{
          display:'inline-block', padding:'10px 16px', borderRadius:10,
          background:'rgba(251,140,0,0.10)', border:'1px solid rgba(251,140,0,0.4)',
          fontSize:20, color:'#0F172A', opacity: ap(T.porque+0.9, 0.5),
        }}>Factura FC-35810</div>
        <div style={{fontSize:19, color:'#64748B', marginTop:10, opacity:ap(T.porque+1.3,0.5)}}>
          No lo adivina por el importe: lo lleva dentro
        </div>
      </Bloque>

      {/* Lo pesado, en tres píldoras que entran con la voz */}
      <div style={{position:'absolute', left:0, right:0, top:660, display:'flex', justifyContent:'center', gap:20}}>
        {[
          { b:T.renum,  t1:'Reenumerar',    t2:'reparte los números por fecha' },
          { b:T.amort,  t1:'Amortizaciones',t2:'elemento a elemento' },
          { b:T.cierre, t1:'Cierre',        t2:'con los saldos delante' },
        ].map(p=>{
          const q = ap(p.b, 0.5, Easing.easeOutBack);
          return (
            <div key={p.t1} style={{
              width:420, padding:'26px 28px', background:'#fff', borderRadius:16,
              border:'1px solid #E2E8F0', boxShadow:'0 14px 40px rgba(15,23,42,0.07)',
              opacity:q, transform:`translateY(${(1-q)*20}px)`,
            }}>
              <div className="f-plex" style={{fontSize:30, fontWeight:600, color:'#0F172A'}}>{p.t1}</div>
              <div style={{fontSize:20, color:'#64748B', marginTop:8}}>{p.t2}</div>
            </div>
          );
        })}
      </div>

      <div style={{
        position:'absolute', left:0, right:0, top:930, textAlign:'center',
        fontSize:26, color:'#64748B', opacity: ap(T.salida, 0.6),
      }}>Recojamos lo que acabas de ver</div>

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