// === escena-04 — Las cuentas, y la cuota (CLÍMAX, 67 %) ===
// El clímax es la ARITMÉTICA apareciendo término a término con la voz: con los tres bloques
// puestos, la cuota no hay que calcularla — sale sola.

function EscenaIU04({ t }){

  const T = {
    tercero:  0.10,   // "El tercero son las cuentas"
    bien:     3.95,   // "La del bien"
    acum:     7.58,   // "amortización acumulada"
    dota:    11.70,   // "la de dotación"
    aqui:    15.96,   // "se rellenan aquí, en el bien"
    sola:    20.54,   // "la cuota sale sola"
    anual:   24.85,   // "da la cuota anual"
    meses:   29.09,   // "se reparte por meses"
    dosmil:  34.49,   // "dos mil cuatrocientos treinta y siete"
    coma:    42.02,   // "ochocientos doce"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const CUENTAS = [
    { b:T.bien, cta:'213',  l:'Cuenta del bien',            d:'donde se guarda lo que costó' },
    { b:T.acum, cta:'2813', l:'Amortización acumulada',     d:'lo que se le ha ido restando' },
    { b:T.dota, cta:'681',  l:'Dotación a la amortización', d:'el gasto de cada ejercicio' },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="BLOQUE 3 · LAS CUENTAS" title="Las tres, en el propio bien" />

      {/* Las tres cuentas */}
      <div style={{position:'absolute', left:150, top:250, width:820, opacity: ap(T.tercero, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18,
                     border:`1px solid ${t >= T.aqui ? 'rgba(0,133,255,0.5)' : '#E2E8F0'}`,
                     boxShadow: t >= T.aqui ? '0 22px 56px rgba(0,133,255,0.16)':'0 18px 46px rgba(15,23,42,0.08)',
                     padding:'26px 30px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>
            FICHA DEL INMOVILIZADO · TORNO CNC-4
          </div>

          {CUENTAS.map(c=>{
            const p = ap(c.b, 0.5, Easing.easeOutBack);
            const activa = t >= c.b && t < c.b + 3.0;
            return (
              <div key={c.cta} style={{
                display:'grid', gridTemplateColumns:'110px 1fr', gap:18, alignItems:'center',
                padding:'18px 18px', marginTop:12, borderRadius:12,
                background: activa ? 'rgba(0,133,255,0.09)':'#F8FAFC',
                border:`1px solid ${activa ? 'rgba(0,133,255,0.5)':'#EEF2F7'}`,
                opacity:p, transform:`translateX(${(1-p)*-16}px)`,
              }}>
                <span className="f-mono" style={{fontSize:32, fontWeight:700, color:'#0085FF'}}>{c.cta}</span>
                <div>
                  <div style={{fontSize:23, color:'#0F172A'}}>{c.l}</div>
                  <div style={{fontSize:18, color:'#64748B', marginTop:3}}>{c.d}</div>
                </div>
              </div>
            );
          })}

          <div style={{
            marginTop:18, fontSize:22, color:'#0F172A', fontWeight:600,
            opacity: ap(T.aqui, 0.6),
          }}>Las tres se rellenan aquí, y solo aquí.</div>
        </div>
      </div>

      {/* LA CUOTA — la aritmética, término a término */}
      <div style={{position:'absolute', left:1030, top:250, width:760, opacity: ap(T.sola, 0.6),
                   transform:`translateY(${(1-ap(T.sola,0.6))*20}px)`}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid rgba(16,185,129,0.45)',
                     boxShadow:'0 24px 60px rgba(16,185,129,0.16)', padding:'30px 34px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#10B981', letterSpacing:'.08em'}}>LA CUOTA SALE SOLA</div>

          {/* base ÷ años */}
          <div style={{marginTop:22, opacity: ap(T.anual - 0.6, 0.5)}}>
            <div style={{fontSize:19, color:'#64748B'}}>Total a amortizar ÷ años de vida</div>
            <div style={{display:'flex', alignItems:'center', gap:16, marginTop:10, flexWrap:'wrap'}}>
              <span className="f-mono" style={{fontSize:38, color:'#0F172A'}}>19.500</span>
              <span style={{fontSize:32, color:'#94A3B8'}}>÷</span>
              <span className="f-mono" style={{fontSize:38, color:'#0F172A'}}>8</span>
              <span style={{fontSize:32, color:'#94A3B8'}}>=</span>
              <span className="f-mono" style={{
                fontSize:42, fontWeight:700, color:'#10B981', opacity: ap(T.dosmil, 0.5),
              }}>2.437,50 €</span>
            </div>
            <div style={{fontSize:19, color:'#64748B', marginTop:4, opacity: ap(T.dosmil, 0.5)}}>al año</div>
          </div>

          {/* × meses / 12 */}
          <div style={{marginTop:26, paddingTop:24, borderTop:'1px solid #F1F5F9',
                       opacity: ap(T.meses, 0.6)}}>
            <div style={{fontSize:19, color:'#64748B'}}>Entró en septiembre: cuatro meses de doce</div>
            <div style={{display:'flex', alignItems:'center', gap:16, marginTop:10, flexWrap:'wrap'}}>
              <span className="f-mono" style={{fontSize:34, color:'#0F172A'}}>2.437,50</span>
              <span style={{fontSize:30, color:'#94A3B8'}}>×</span>
              <span className="f-mono" style={{fontSize:34, color:'#FB8C00', fontWeight:700}}>4/12</span>
              <span style={{fontSize:30, color:'#94A3B8'}}>=</span>
              <span className="f-mono" style={{
                fontSize:42, fontWeight:700, color:'#FB8C00', opacity: ap(T.coma, 0.5),
              }}>812,50 €</span>
            </div>
          </div>
        </div>
      </div>

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