// === Escena 06 — "Cerrar el mes" (recapitulación + límites + eco) ===
// El marcador es lo ÚNICO que se mueve en la barra: los demás recuentos se cuentan una vez al
// cargar (Conciliar40Service.cs:349, 418), y por eso aquí salen atenuados y se enseña el ↻.
// Nunca dice 100 con uno pendiente: Math.Min(99, Floor(...)), y el numerador solo sube con CUBIERTOS.
// Los tres límites se dicen en voz alta: es formación, no un folleto.
function EscenaCN06({ t }){
  // LOCUCIÓN (audio/escena-06.mp3): vuelve arriba → lo único que sube → no te va a mentir →
  // no dirá cien por cien, se queda en noventa y nueve → cien es cien → solo cuenta los enteros →
  // una a medias no cierra nada → mes conciliado → pulsa recargar → tres cosas que no hace →
  // alguien lo sube · no genera asientos · deshacer va en la ficha → ECO.
  const T = {
    barra:0.14,      // "Vuelve arriba"
    unico:2.41,      // "lo único que sube mientras trabajas"
    mentir:4.5,      // "no te va a mentir"
    no100:6.88,      // "no dirá cien por cien"
    n99:8.43,        // "se queda en noventa y nueve"
    cien:9.35,       // "Cien es cien de verdad"
    enteros:10.76,   // "solo cuenta los que están enteros"
    nocierra:15.63,  // "no cierra nada"
    conciliado:17.71,// "Cuando ponga mes conciliado"
    recargar:18.69,  // "pulsa recargar"
    limites:21.51,   // "tres cosas que esta ventana no hace"
    l1:26.65,        // "alguien lo sube"
    l2:28.11,        // "No genera asientos"
    l3:33.35,        // "en la ficha del movimiento"
    eco1:37.52,      // "Un mes, de arriba abajo"
    eco2:39.39,      // "nada se escribe hasta que pulsas"
  };

  const baP = clamp((t-T.barra)/0.7,0,1), baE = Easing.easeOutCubic(baP);
  const unGlow = t >= T.unico && t < T.unico+1.5 ? Math.sin((t-T.unico)/1.5*Math.PI) : 0;
  const apagados = clamp((t-T.unico)/0.6,0,1);      // los KPI que NO se mueven se retiran a un lado

  // El porcentaje: 97 → 99, y NUNCA 100 con uno pendiente
  const pct = useCountUp(97, 99, T.n99, 0.9, t);
  const cerrado = T.conciliado <= t;
  const noP = clamp((t-T.no100)/0.5,0,1), noE = Easing.easeOutCubic(noP);
  const noTacha = Easing.easeInOutCubic(clamp((t-T.no100-0.5)/0.55,0,1));
  const ciP = clamp((t-T.cien)/0.45,0,1), ciE = Easing.easeOutBack(ciP);

  const enP = clamp((t-T.enteros)/0.6,0,1), enE = Easing.easeOutCubic(enP);
  const ncP = clamp((t-T.nocierra)/0.5,0,1), ncE = Easing.easeOutBack(ncP);
  const coP = clamp((t-T.conciliado)/0.5,0,1), coE = Easing.easeOutBack(coP);
  const reGlow = t >= T.recargar && t < T.recargar+1.5 ? Math.sin((t-T.recargar)/1.5*Math.PI) : 0;

  // Los límites. El bloque anterior se retira.
  const outA = clamp((t-T.limites)/0.55,0,1);
  const liP = clamp((t-T.limites)/0.65,0,1), liE = Easing.easeOutCubic(liP);

  // Eco
  const veloOp = t < T.eco1 ? 0 : clamp((t-T.eco1)/0.7,0,1)*0.94;
  const e1P = clamp((t-T.eco1)/0.6,0,1), e1E = Easing.easeOutCubic(e1P);
  const e2P = clamp((t-T.eco2)/0.6,0,1), e2E = Easing.easeOutCubic(e2P);

  const LIMITES = [
    { start:T.l1, tit:'No trae el extracto',      sub:'Alguien lo sube. Aquí no hay conexión con tu banco.' },
    { start:T.l2, tit:'No genera asientos',       sub:'Escribe el cobro o el pago. La contabilidad es otra ventana.' },
    { start:T.l3, tit:'No deshace la conciliación', sub:'Deshacer se hace en la ficha del movimiento, no aquí.' },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="CERRAR EL MES" title={<span>El marcador no miente</span>}/>

      {/* ══════ ACTO A · el marcador ══════ */}
      <div style={{position:'absolute', inset:0, opacity:(1-outA)*(1-veloOp/0.94*0.9), transform:`translateY(${outA*-24}px)`}}>
        {baP > 0 && outA < 1 && (
          <div style={{position:'absolute', left:0, right:0, top:266, display:'flex', justifyContent:'center', alignItems:'flex-start', gap:24,
                       opacity:baE, transform:`translateY(${(1-baE)*18}px)`}}>
            {/* El mes */}
            <div style={{display:'inline-flex', alignItems:'center', gap:11, padding:'12px 20px', borderRadius:99,
                         border:'2px solid #E2E8F0', background:'#fff', opacity:1-apagados*0.62}}>
              <span style={{color:'#94A3B8', fontSize:18}}>◀</span>
              <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>Agosto</span>
              <span style={{color:'#94A3B8', fontSize:18}}>▶</span>
            </div>

            {/* EL marcador: lo único que se mueve */}
            <div style={{minWidth:400, padding:'18px 26px', borderRadius:14, background:'#fff',
                         border:`3px solid ${cerrado ? '#059669' : '#E2E8F0'}`, lineHeight:1.25,
                         boxShadow:0 < unGlow ? `0 0 ${unGlow*50}px rgba(0,133,255,0.45)` : '0 12px 34px rgba(15,23,42,0.08)'}}>
              <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', gap:16}}>
                <b className="f-plex" style={{fontSize:52, color:cerrado ? '#059669' : '#0F172A'}}>
                  {cerrado ? 100 : Math.round(pct)}%
                </b>
                <span className="f-plex" style={{fontSize:21, color:'#94A3B8'}}>
                  {cerrado ? '128 de 128' : '126 de 128'}
                </span>
              </div>
              <div style={{height:10, borderRadius:99, background:'#EEF2F6', marginTop:10}}>
                <div style={{height:'100%', borderRadius:99, background:cerrado ? '#059669' : '#0085FF',
                             width:`${cerrado ? 100 : Math.round(pct)}%`}}/>
              </div>
              <div className="f-plex" style={{fontSize:19, fontWeight:cerrado ? 700 : 400, color:cerrado ? '#059669' : '#94A3B8', marginTop:8}}>
                {cerrado ? 'Mes conciliado' : 'quedan 2 por conciliar'}
              </div>
            </div>

            {/* Los recuentos que NO se mueven: se apagan a propósito */}
            <div style={{display:'flex', flexDirection:'column', gap:8, paddingTop:6, opacity:1-apagados*0.68, filter:apagados > 0 ? 'saturate(0.35)' : 'none'}}>
              <span className="f-plex" style={{fontSize:19, color:'#64748B'}}>entran · 12.430,55 €</span>
              <span className="f-plex" style={{fontSize:19, color:'#64748B'}}>con sugerencias · 37</span>
            </div>

            {/* El ↻ */}
            {coP > 0 && (
              <span style={{display:'inline-flex', alignItems:'center', justifyContent:'center', width:56, height:56, borderRadius:10,
                            border:'1px solid #E2E8F0', background:'#fff',
                            boxShadow:0 < reGlow ? `0 0 ${reGlow*36}px rgba(0,133,255,0.6)` : 'none',
                            transform:`scale(${lerp(0.85,1,coE)})`}}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={0 < reGlow ? '#0085FF' : '#64748B'} strokeWidth="2.2"
                     style={{transform:`rotate(${clamp((t-T.recargar)/0.9,0,1)*360}deg)`}}>
                  <path d="M20 11 a8 8 0 1 0-2.3 5.7" strokeLinecap="round"/><path d="M20 5 v6 h-6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
            )}
          </div>
        )}

        {/* El 100 que no puede salir */}
        {noP > 0 && outA < 1 && (
          <div style={{position:'absolute', left:0, right:0, top:494, display:'flex', justifyContent:'center', alignItems:'center', gap:32,
                       opacity:noE, transform:`translateY(${(1-noE)*12}px)`}}>
            <span style={{position:'relative', display:'inline-block'}}>
              <span className="f-plex" style={{fontSize:78, fontWeight:800, color:'#CBD5E1'}}>100 %</span>
              <span style={{position:'absolute', left:-8, right:-8, top:'52%', height:7, borderRadius:4, background:'#EF4444',
                            transform:`scaleX(${noTacha}) rotate(-6deg)`, transformOrigin:'left'}}/>
            </span>
            {ciP > 0 && (
              <span className="f-plex" style={{fontSize:34, fontWeight:600, color:'#0F172A', opacity:clamp(ciP*1.3,0,1),
                                               transform:`scale(${lerp(0.9,1,ciE)})`}}>
                con un movimiento pendiente.<br/>Cien es cien de verdad.
              </span>
            )}
          </div>
        )}

        {/* Cubierto ≠ tocado */}
        {enP > 0 && outA < 1 && (
          <div style={{position:'absolute', left:0, right:0, top:672, display:'flex', justifyContent:'center', gap:28,
                       opacity:clamp(enP*1.2,0,1), transform:`translateY(${(1-enE)*14}px)`}}>
            {[{ ok:true,  tit:'Cubierto',  sub:'No le queda ni un euro por explicar', pie:'cuenta para el marcador' },
              { ok:false, tit:'Tocado',    sub:'Una factura atada a una liquidación de cincuenta', pie:'no cierra nada' }].map((c,i)=>{
              const p = clamp((t-T.enteros-i*0.5)/0.5,0,1);
              const avisa = !c.ok && 0 < ncP;
              return (
                <div key={c.tit} style={{width:560, padding:'28px 32px', borderRadius:16, background:'#fff',
                                         border:`2px solid ${c.ok ? 'rgba(16,185,129,0.45)' : (avisa ? 'rgba(251,140,0,0.5)' : '#E2E8F0')}`,
                                         boxShadow:'0 16px 40px rgba(15,23,42,0.06)',
                                         opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-Easing.easeOutCubic(p))*10}px) scale(${avisa ? lerp(1,1.02,ncE) : 1})`}}>
                  <div style={{display:'flex', alignItems:'center', gap:13}}>
                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke={c.ok ? '#059669' : '#B45309'} strokeWidth="2.4">
                      {c.ok ? <><circle cx="12" cy="12" r="10"/><path d="M7 12.5 L10.5 16 L17 9" strokeLinecap="round"/></>
                            : <><circle cx="12" cy="12" r="10"/><path d="M12 7.5 v5.5" strokeLinecap="round"/><circle cx="12" cy="16.5" r="1" fill="#B45309" stroke="none"/></>}
                    </svg>
                    <span className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A'}}>{c.tit}</span>
                  </div>
                  <div className="f-plex" style={{fontSize:21, color:'#64748B', marginTop:11, lineHeight:1.35}}>{c.sub}</div>
                  <div className="f-plex" style={{fontSize:21, fontWeight:700, color:c.ok ? '#059669' : '#7a5b00', marginTop:12}}>
                    {c.pie}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* ══════ ACTO B · los tres límites, en voz alta ══════ */}
      {liP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:300, opacity:liE*(1-veloOp/0.94*0.9),
                     transform:`translateY(${(1-liE)*20}px)`}}>
          <div className="f-plex" style={{textAlign:'center', fontSize:19, fontWeight:700, letterSpacing:'3px', color:'#94A3B8'}}>
            TRES COSAS QUE ESTA VENTANA NO HACE
          </div>
          <div style={{display:'flex', justifyContent:'center', gap:26, marginTop:48}}>
            {LIMITES.map((l,i)=>{
              const p = clamp((t-l.start)/0.55,0,1), e = Easing.easeOutBack(p);
              return (
                <div key={l.tit} style={{width:520, minHeight:400, padding:'44px 38px 46px', borderRadius:20, background:'#fff',
                                         border:'1px solid #E2E8F0', boxShadow:'0 22px 54px rgba(15,23,42,0.08)',
                                         opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*16}px)`}}>
                  <span style={{display:'inline-flex', alignItems:'center', justifyContent:'center', width:66, height:66, borderRadius:99,
                                background:'rgba(239,68,68,0.10)'}}>
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2.4">
                      <circle cx="12" cy="12" r="9"/><path d="M6 18 L18 6" strokeLinecap="round"/>
                    </svg>
                  </span>
                  <div className="f-plex" style={{fontSize:36, fontWeight:800, color:'#0F172A', marginTop:26, lineHeight:1.2}}>{l.tit}</div>
                  <div className="f-plex" style={{fontSize:24, color:'#64748B', marginTop:16, lineHeight:1.45}}>{l.sub}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ══════ ECO · bookend con la escena 1 ══════ */}
      {veloOp > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {e1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:420, textAlign:'center', fontSize:74, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:e1E, transform:`translateY(${(1-e1E)*18}px)`}}>
          Un mes, de arriba abajo.
        </div>
      )}
      {e2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:530, textAlign:'center', fontSize:74, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:e2E, transform:`translateY(${(1-e2E)*18}px)`}}>
          <span className="grad-text">Nada se escribe hasta que pulsas.</span>
        </div>
      )}
      {e2P > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:690, display:'flex', justifyContent:'center',
                     opacity:clamp((t-T.eco2-0.7)/0.6,0,1)}}>
          <DinaupLogo size={30}/>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCN06 });