// === escena-02 — El asiento sale de la factura ===
function EscenaCC02({ t }){

  const T = {
    panel:    1.38,   // "lo primero que ves es cuánto te falta"
    cifra:    4.15,   // "Ciento cuarenta y siete"
    familias: 8.36,   // "Partidas por familias"
    pulsa:   14.38,   // "Eliges el mes y pulsas contabilizar"
    propone: 19.07,   // "te enseña lo que va a hacer"
    fila:    20.50,   // "una fila por operación"
    marcas:  24.75,   // "Tú marcas lo que apruebas"
    fuera:   28.50,   // "se queda fuera"
    enlace:  32.71,   // "cada factura queda atada a su asiento"
    remate:  38.09,   // "Nunca más se contabiliza dos veces"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const FAMILIAS = [['Ventas',96],['Compras',38],['Cobros',13],['Pagos',0],['Nóminas',0]];
  const FILAS = [
    { op:'FC-35810 · Talleres Marbán',  cuenta:'700 Ventas',      imp:'1.210,00' },
    { op:'FC-35816 · Autos del Sur',    cuenta:'700 Ventas',      imp:'  484,00' },
    { op:'Endesa Energía',              cuenta:'628 Suministros', imp:'  204,33' },
    { op:'FC-35797 · Ayto. Alicante',   cuenta:'700 Ventas',      imp:'9.680,50' },
  ];
  const n = useCountUp(0, 147, T.cifra, 1.1, t);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL PANEL" title="Lo primero: cuánto te falta" />

      {/* IZQUIERDA — el panel */}
      <div style={{position:'absolute', left:130, top:250, width:640, opacity:ap(T.panel,0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 20px 50px rgba(15,23,42,0.08)', padding:'28px 32px'}}>

          <div style={{display:'flex', alignItems:'baseline', gap:14}}>
            <span className="f-plex" style={{fontSize:88, fontWeight:300, color:'#EF4444', letterSpacing:'-0.02em'}}>
              {Math.round(n)}
            </span>
            <span style={{fontSize:22, color:'#64748B'}}>sin contabilizar</span>
          </div>

          <div style={{marginTop:20}}>
            {FAMILIAS.map(([f,c],i)=>{
              const p = ap(T.familias + i*0.16, 0.45, Easing.easeOutBack);
              return (
                <div key={f} style={{
                  display:'flex', justifyContent:'space-between', alignItems:'center',
                  padding:'13px 0', borderTop: i ? '1px solid #F1F5F9':'none',
                  opacity: p * (c ? 1 : 0.45), transform:`translateY(${(1-p)*12}px)`,
                }}>
                  <span style={{fontSize:22, color:'#0F172A'}}>{f}</span>
                  <span className="f-mono" style={{fontSize:24, fontWeight:700, color: c ? '#0085FF':'#94A3B8'}}>{c}</span>
                </div>
              );
            })}
          </div>

          {/* Mes + botón: protagonista solo en su beat */}
          <div style={{display:'flex', gap:12, alignItems:'center', marginTop:24, opacity:ap(T.pulsa-1.2,0.5)}}>
            <div style={{padding:'11px 16px', borderRadius:10, background:'#F1F5F9',
                         border:'1px solid #E2E8F0', fontSize:20, color:'#0F172A'}}>Agosto 2026</div>
            <div style={{
              padding:'13px 22px', borderRadius:12, background:'#0085FF', color:'#fff',
              fontSize:20, fontWeight:600, boxShadow:'0 10px 28px rgba(0,133,255,0.34)',
              transform:`scale(${1 + 0.05*Math.sin(clamp((t-T.pulsa)/0.5,0,1)*Math.PI)})`,
            }}>Contabilizar agosto</div>
          </div>
        </div>
      </div>

      {/* DERECHA — lo que va a hacer, ANTES de escribir nada */}
      <div style={{position:'absolute', left:840, top:250, width:940, opacity:ap(T.propone,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)', padding:'24px 28px'}}>
          <div className="f-mono" style={{fontSize:16, color:'#0085FF', letterSpacing:'.08em'}}>
            LO QUE VA A ESCRIBIR
          </div>

          {FILAS.map((f,i)=>{
            const p = ap(T.fila + i*0.14, 0.45, Easing.easeOutBack);
            const desmarcada = i === 2 && t >= T.fuera;
            return (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'34px 1fr 210px 130px', alignItems:'center', gap:14,
                padding:'15px 0', borderTop: i ? '1px solid #F1F5F9':'none',
                opacity: p * (desmarcada ? 0.35 : 1),
                filter: desmarcada ? 'saturate(0.55)' : 'none',
                transform:`translateY(${(1-p)*14}px)`,
              }}>
                <div style={{
                  width:24, height:24, borderRadius:6,
                  border:`2px solid ${desmarcada ? '#CBD5E1' : '#0085FF'}`,
                  background: (!desmarcada && t >= T.marcas) ? '#0085FF' : 'transparent',
                  opacity: ap(T.marcas, 0.4),
                }}/>
                <span style={{fontSize:20, color:'#0F172A'}}>{f.op}</span>
                <span className="f-mono" style={{fontSize:18, color:'#0085FF'}}>{f.cuenta}</span>
                <span className="f-mono" style={{fontSize:19, textAlign:'right', color:'#0F172A'}}>{f.imp} €</span>
              </div>
            );
          })}

          {/* EL ENLACE en los dos sentidos */}
          <div style={{
            marginTop:22, padding:'18px 20px', borderRadius:14,
            background:'rgba(16,185,129,0.07)', border:'1px solid rgba(16,185,129,0.4)',
            opacity: ap(T.enlace, 0.6), transform:`translateY(${(1-ap(T.enlace,0.6))*16}px)`,
          }}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'center', gap:22}}>
              <span className="f-plex" style={{fontSize:24, color:'#0F172A'}}>Factura FC-35810</span>
              <svg width="150" height="40" style={{overflow:'visible'}}>
                <path d="M6,14 L136,14" stroke="#10B981" strokeWidth="3" fill="none"
                  strokeDasharray="130" strokeDashoffset={130*(1-ap(T.enlace+0.3,0.6,Easing.easeInOutCubic))}/>
                <polygon points="144,14 132,8 132,20" fill="#10B981" opacity={ap(T.enlace+0.8,0.3)}/>
                <path d="M144,28 L14,28" stroke="#10B981" strokeWidth="3" fill="none"
                  strokeDasharray="130" strokeDashoffset={130*(1-ap(T.enlace+0.9,0.6,Easing.easeInOutCubic))}/>
                <polygon points="6,28 18,22 18,34" fill="#10B981" opacity={ap(T.enlace+1.4,0.3)}/>
              </svg>
              <span className="f-plex" style={{fontSize:24, color:'#0F172A'}}>Asiento 1.284</span>
            </div>
            <div className="f-plex" style={{
              textAlign:'center', marginTop:14, fontSize:32, fontWeight:700, color:'#10B981',
              opacity: ap(T.remate, 0.5),
            }}>Nunca más se contabiliza dos veces</div>
          </div>
        </div>
      </div>

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