// === escena-06 — El mapa entero (recapitulación + eco) ===
// El mapa se construye beat a beat y queda ENTERO al final: es la imagen que el contable va a
// querer capturar de pantalla. Por eso nada se va: cada ficha se queda cuando entra la siguiente.

function EscenaCU06({ t }){

  const T = {
    cinco:   0.10,   // "Cinco fichas y ya está"
    f1:      2.49,   // "La entidad lleva"
    f2:      6.19,   // "La categoría lleva"
    f3:      9.79,   // "El impuesto y la retención"
    f4:     13.06,   // "El inmovilizado lleva las tres"
    f5:     16.31,   // "el ejercicio lleva la serie"
    reserva:20.51,   // "las dos cuentas de reserva"
    regla:  28.12,   // "busca en la ficha"
    eco:    30.77,   // ÚNICA COSA (eco)
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const FICHAS = [
    { b:T.f1, n:'01', ficha:'La entidad',              lleva:['Subcuenta de cliente','Subcuenta de proveedor'] },
    { b:T.f2, n:'02', ficha:'La categoría',            lleva:['Cuenta de ingresos','Cuenta de gastos'] },
    { b:T.f3, n:'03', ficha:'El impuesto · la retención', lleva:['Repercutido y soportado','Recargo y rectificativas'] },
    { b:T.f4, n:'04', ficha:'El inmovilizado', lleva:['Bien, amortización y dotación','(las tres, en el propio bien)'] },
    { b:T.f5, n:'05', ficha:'El ejercicio',            lleva:['La serie que numera','(no es una cuenta, y manda)'] },
  ];

  return (
    <SlideCanvas variant="promise">

      <div style={{position:'absolute', left:0, right:0, top:100, textAlign:'center'}}>
        <div className="f-plex" style={{
          fontSize:50, fontWeight:700, color:'#0F172A', letterSpacing:'-0.02em',
          opacity: ap(T.cinco, 0.6),
        }}>Cinco fichas, y ya está</div>
      </div>

      {/* EL MAPA: se construye y no se va */}
      <div style={{
        position:'absolute', left:'50%', top:210, transform:'translateX(-50%)', width:1620,
        display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:18,
      }}>
        {FICHAS.map((f,i)=>{
          const p = ap(f.b, 0.55, Easing.easeOutBack);
          const nueva = t >= f.b && t < f.b + 1.8;
          return (
            <div key={f.n} style={{
              gridColumn: i === 3 ? 'span 1' : i === 4 ? 'span 2' : 'span 1',
              background:'#fff', borderRadius:16,
              border:`1px solid ${nueva ? 'rgba(0,133,255,0.5)' : '#E2E8F0'}`,
              boxShadow: nueva ? '0 22px 56px rgba(0,133,255,0.16)' : '0 10px 30px rgba(15,23,42,0.06)',
              padding:'24px 28px',
              opacity:p, transform:`translateY(${(1-p)*20}px)`,
            }}>
              <div className="f-mono" style={{fontSize:15, color:'#0085FF', letterSpacing:'.1em'}}>{f.n}</div>
              <div className="f-plex" style={{fontSize:30, fontWeight:700, color:'#0F172A', marginTop:8}}>{f.ficha}</div>
              {f.lleva.map((l,j)=>(
                <div key={l} style={{
                  fontSize:20, color:'#64748B', marginTop:8,
                  opacity: ap(f.b + 0.4 + j*0.25, 0.4),
                }}>· {l}</div>
              ))}
            </div>
          );
        })}
      </div>

      {/* La reserva, detrás de todas: es la única que no vive en la ficha del dato */}
      <div style={{
        position:'absolute', left:'50%', top:640, transform:'translateX(-50%)',
        padding:'16px 26px', borderRadius:12,
        background:'rgba(16,185,129,0.07)', border:'1px solid rgba(16,185,129,0.35)',
        fontSize:22, color:'#0F172A', opacity: ap(T.reserva, 0.6),
      }}>Y detrás de todas, las dos cuentas de reserva de la empresa</div>

      {/* La regla de bolsillo */}
      <div style={{
        position:'absolute', left:0, right:0, top:700, textAlign:'center',
        opacity: ap(T.regla, 0.6),
      }}>
        <div className="f-plex" style={{fontSize:34, fontWeight:600, color:'#0F172A'}}>
          ¿Un asiento con una cuenta que no esperabas?
        </div>
        <div style={{fontSize:28, color:'#64748B', marginTop:8}}>
          No busques en el asiento: busca en la ficha de la que salió.
        </div>
      </div>

      {/* EL ECO */}
      <div style={{position:'absolute', left:0, right:0, top:840, textAlign:'center'}}>
        <div className="f-plex grad-text" style={{
          fontSize:64, fontWeight:800, letterSpacing:'-0.02em',
          opacity: ap(T.eco, 0.6), transform:`translateY(${(1-ap(T.eco,0.6))*18}px)`,
        }}>Cada cuenta se dice una vez, en su ficha.</div>
        <div className="f-plex" style={{
          fontSize:64, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:6,
          opacity: ap(T.eco + 2.4, 0.6),
        }}>El asiento solo la usa.</div>
      </div>

      <div style={{position:'absolute', left:'50%', bottom:50, transform:'translateX(-50%)', opacity:ap(T.eco+2.4,0.8)}}>
        <DinaupLogo size={38} />
      </div>

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