// === escena-03 — Impuestos y retenciones ===
function EscenaCU03({ t }){

  const T = {
    impuesto:  2.08,   // "se escribe en el impuesto"
    veintiuno: 5.06,   // "del veintiuno por ciento"
    ventas:    8.34,   // "La de ventas"
    compras:  11.65,   // "La de compras"
    recargo:  15.20,   // "recargo de equivalencia"
    rect:     19.35,   // "para las rectificativas"
    reserva:  24.79,   // "se usan las de siempre"
    reten:    28.94,   // "Las retenciones funcionan igual"
    salida:   36.04,   // "la regla que ahorra más trabajo"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const Campo = ({ l, v, beat, tenue }) => {
    const p = ap(beat, 0.45);
    const activo = t >= beat && t < beat + 2.4;
    return (
      <div style={{
        display:'grid', gridTemplateColumns:'1fr 250px', gap:14, alignItems:'center',
        padding:'13px 14px', marginTop:8, borderRadius:10,
        background: activo ? 'rgba(0,133,255,0.08)':'#F8FAFC',
        border:`1px solid ${activo ? 'rgba(0,133,255,0.45)':'#EEF2F7'}`,
        opacity: p * (tenue ? 0.55 : 1),
      }}>
        <span style={{fontSize:20, color:'#64748B'}}>{l}</span>
        <span className="f-mono" style={{fontSize:20, color:'#0F172A', textAlign:'right'}}>{v}</span>
      </div>
    );
  };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL IMPUESTO Y LA RETENCIÓN" title="El iva no se escribe en el asiento" />

      {/* La ficha del impuesto */}
      <div style={{position:'absolute', left:150, top:260, width:840, opacity: ap(T.impuesto, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 20px 50px rgba(15,23,42,0.08)', padding:'26px 30px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>FICHA DEL IMPUESTO</div>
          <div className="f-plex" style={{
            fontSize:40, fontWeight:700, color:'#0F172A', marginTop:6,
            opacity: ap(T.veintiuno, 0.5),
          }}>iva 21 %</div>

          <Campo l="Subcuenta de ventas (repercutido)"  v="477000021" beat={T.ventas} />
          <Campo l="Subcuenta de compras (soportado)"   v="472000021" beat={T.compras} />
          <Campo l="Recargo de equivalencia · ventas"   v="477000052" beat={T.recargo} />
          <Campo l="Recargo de equivalencia · compras"  v="472000052" beat={T.recargo + 0.5} />
          <Campo l="Rectificativas · ventas"            v="—" beat={T.rect} tenue={t >= T.reserva} />
          <Campo l="Rectificativas · compras"           v="—" beat={T.rect + 0.5} tenue={t >= T.reserva} />

          <div style={{
            marginTop:16, padding:'14px 16px', borderRadius:10,
            background:'rgba(16,185,129,0.07)', border:'1px solid rgba(16,185,129,0.35)',
            fontSize:20, color:'#0F172A', opacity: ap(T.reserva, 0.6),
          }}>Si las dejas vacías, se usan las de siempre. Es lo que hace casi todo el mundo.</div>
        </div>
      </div>

      {/* La retención, en paralelo: misma forma, menos campos */}
      <div style={{position:'absolute', left:1040, top:260, width:740, opacity: ap(T.reten, 0.6),
                   transform:`translateY(${(1-ap(T.reten,0.6))*22}px)`}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 20px 50px rgba(15,23,42,0.08)', padding:'26px 30px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>FICHA DE LA RETENCIÓN</div>
          <div className="f-plex" style={{fontSize:40, fontWeight:700, color:'#0F172A', marginTop:6}}>IRPF 15 %</div>

          <Campo l="Subcuenta de ventas"  v="473000015" beat={T.reten + 0.8} />
          <Campo l="Subcuenta de compras" v="475100015" beat={T.reten + 1.4} />

          <div style={{
            marginTop:16, fontSize:21, color:'#64748B', opacity: ap(T.reten + 2.0, 0.6),
          }}>Funcionan igual: su ficha, y dentro sus dos cuentas.</div>
        </div>
      </div>

      {/* Anticipación del clímax */}
      <div style={{
        position:'absolute', left:0, right:0, top:940, textAlign:'center',
        fontSize:28, color:'#0F172A', fontWeight:600, opacity: ap(T.salida, 0.6),
      }}>Y ahora la regla que ahorra más trabajo de todas</div>

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