// === escena-03 — La dotación del periodo (CLÍMAX, 60 %) ===
// La imagen-momento: la tabla completa, y el prorrateo del que entró en septiembre.

function EscenaIC03({ t }){

  const T = {
    abres:    0.10,   // "Abres amortizaciones"
    tabla:    4.96,   // "te enseña la tabla"
    fila:     6.95,   // "Una fila por elemento"
    toca:    12.54,   // "cuánto le toca este periodo"
    sept:    16.98,   // "si el torno entró en septiembre"   → EL MOMENTO
    nopasa:  21.55,   // "Ni se pasa"
    ultima:  25.91,   // "la última cuota son trescientos"
    motivo:  31.32,   // "salen igual, con el motivo"
    peor:    37.54,   // "Desaparecer sería peor"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const FILAS = [
    { n:'Torno CNC-4',       base:'19.500,00', vida:'8', ya:'      0,00', meses:'4',  cuota:'  812,50', parcial:true },
    { n:'Furgoneta Master',  base:'28.000,00', vida:'6', ya:'18.666,68', meses:'12', cuota:'4.666,67' },
    { n:'Elevador 2 col.',   base:' 5.800,00', vida:'10',ya:' 5.500,00', meses:'12', cuota:'  300,00', tope:true },
    { n:'Servidor rack',     base:' 4.200,00', vida:'0', ya:'      0,00', meses:'—',  cuota:'—', problema:'sin años de vida' },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="AMORTIZACIONES" title="La tabla, antes de escribir nada" />

      <div style={{position:'absolute', left:'50%', top:250, transform:'translateX(-50%)', width:1620,
                   opacity: ap(T.abres, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid rgba(0,133,255,0.35)',
                     boxShadow:'0 24px 60px rgba(0,133,255,0.14)', overflow:'hidden'}}>

          <div style={{display:'flex', gap:14, alignItems:'center', padding:'18px 26px',
                       borderBottom:'1px solid #E2E8F0'}}>
            <span style={{padding:'9px 14px', borderRadius:9, background:'#F1F5F9',
                          border:'1px solid #E2E8F0', fontSize:19, color:'#0F172A'}}>Ejercicio 2026</span>
            <span style={{fontSize:19, color:'#64748B'}}>01/01/2026 – 31/12/2026</span>
          </div>

          {/* Cabecera */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 190px 100px 190px 100px 190px', gap:14,
                       padding:'12px 26px', borderBottom:'2px solid #F1F5F9'}}>
            {['ELEMENTO','BASE','VIDA','YA AMORTIZADO','MESES','DOTACIÓN'].map((h,i)=>(
              <span key={h} className="f-mono" style={{fontSize:14, color:'#64748B', letterSpacing:'.07em',
                     textAlign: i ? 'right':'left'}}>{h}</span>
            ))}
          </div>

          {FILAS.map((f,i)=>{
            const p = ap(T.fila + i*0.18, 0.45, Easing.easeOutBack);
            const resaltaSept = f.parcial && t >= T.sept && t < T.sept + 4.0;
            const resaltaTope = f.tope   && t >= T.ultima && t < T.ultima + 4.0;
            const resaltaProb = f.problema && t >= T.motivo;
            const fondo = resaltaSept ? 'rgba(251,140,0,0.10)'
                        : resaltaTope ? 'rgba(16,185,129,0.10)'
                        : resaltaProb ? 'rgba(239,68,68,0.06)' : 'transparent';
            return (
              <div key={f.n} style={{
                display:'grid', gridTemplateColumns:'1fr 190px 100px 190px 100px 190px', gap:14, alignItems:'center',
                padding:'18px 26px', borderTop: i ? '1px solid #F8FAFC':'none',
                background:fondo, opacity: p * (f.problema ? 0.75 : 1),
                transform:`translateY(${(1-p)*12}px)`,
              }}>
                <span style={{fontSize:21, color:'#0F172A'}}>{f.n}</span>
                <span className="f-mono" style={{fontSize:19, textAlign:'right', color:'#0F172A'}}>{f.base}</span>
                <span className="f-mono" style={{fontSize:19, textAlign:'right',
                      color: f.vida==='0' ? '#EF4444':'#0F172A'}}>{f.vida==='0'?'—':f.vida}</span>
                <span className="f-mono" style={{fontSize:19, textAlign:'right', color:'#64748B'}}>{f.ya}</span>
                <span className="f-mono" style={{fontSize:19, textAlign:'right',
                      color: resaltaSept ? '#FB8C00':'#64748B', fontWeight: resaltaSept?700:400}}>{f.meses}</span>
                <span className="f-mono" style={{fontSize:21, textAlign:'right', fontWeight:700,
                      color: f.problema ? '#94A3B8' : (t>=T.toca ? '#10B981':'#94A3B8')}}>{f.cuota}</span>
              </div>
            );
          })}

          {/* El motivo de la que no se puede calcular */}
          {t >= T.motivo - 0.3 && (
            <div style={{
              padding:'16px 26px', background:'rgba(239,68,68,0.06)',
              borderTop:'1px solid rgba(239,68,68,0.25)', fontSize:20, color:'#0F172A',
              opacity: ap(T.motivo, 0.5),
            }}>
              <b style={{color:'#EF4444'}}>Servidor rack</b> · sin años de vida: sin eso no hay cuota que calcular
            </div>
          )}
        </div>

        {/* Las dos reglas, como pies de la tabla */}
        <div style={{display:'flex', gap:18, marginTop:20}}>
          <div style={{
            flex:1, padding:'18px 22px', borderRadius:14, background:'#fff',
            border:'1px solid rgba(251,140,0,0.4)', opacity: ap(T.sept, 0.6),
          }}>
            <div className="f-plex" style={{fontSize:26, fontWeight:600, color:'#0F172A'}}>Prorratea por meses</div>
            <div style={{fontSize:20, color:'#64748B', marginTop:6}}>
              El torno entró en septiembre: cuatro meses de doce
            </div>
          </div>
          <div style={{
            flex:1, padding:'18px 22px', borderRadius:14, background:'#fff',
            border:'1px solid rgba(16,185,129,0.4)', opacity: ap(T.ultima, 0.6),
          }}>
            <div className="f-plex" style={{fontSize:26, fontWeight:600, color:'#0F172A'}}>Nunca se pasa</div>
            <div style={{fontSize:20, color:'#64748B', marginTop:6}}>
              Al elevador le quedan 300 €: la última cuota son 300 €
            </div>
          </div>
        </div>
      </div>

      <div style={{
        position:'absolute', left:0, right:0, bottom:40, textAlign:'center',
        fontSize:24, color:'#64748B', opacity: ap(T.peor, 0.6),
      }}>Los que no se pueden calcular salen igual, con el motivo. Desaparecer sería peor.</div>

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