// === Escena 05 — "Cuarenta y tres" (seleccionar varios y agrupar) ===
// El modo selección cambia lo que hace el clic: ya no abre, marca. Y el gasto va POR MES porque
// es un documento contable (AgruparSeleccionU.razor:37-38). El intruso fuera de escala se SEÑALA,
// nunca se desmarca solo: mediana × 10 y suelo de 20 € (AgruparYConciliarService.cs:330-342).
function EscenaCN05({ t }){
  // LOCUCIÓN (audio/escena-05.mp3): el caso que a mano no se hace nunca → comisiones de céntimos →
  // buscas comisión banco → salen cuarenta y tres → seleccionar varios → ya no abre, marca →
  // marcar todos → 43 marcados → no un gasto: uno por cada mes → es un documento contable →
  // enero acabaría en diciembre, en otro trimestre → da de alta → se ha colado una → te la señala.
  const T = {
    head:1.27,       // "el caso que a mano no se hace nunca"
    lista:3.54,      // "las comisiones de céntimos"
    buscar:5.17,     // "Buscas comisión banco"
    n43:6.85,        // "Salen cuarenta y tres"
    modo:8.64,       // "Pulsas seleccionar varios"
    casillas:11.63,  // "ya no abre, marca"
    todos:13.05,     // "Marcar todos"
    marcados:15.06,  // "cuarenta y tres marcados, mil doscientos euros"
    pormes:20.89,    // "No un gasto: uno por cada mes"
    porque:23.91,    // "un gasto es un documento contable"
    diciembre:27.54, // "acabaría contabilizado en diciembre"
    trimestre:29.4,  // "Y en otro trimestre"
    alta:30.93,      // "Da de alta el gasto de cada mes"
    intruso:36.82,   // "se ha colado una que no pinta nada"
    noquita:39.55,   // "No la quita"
    senala:40.44,    // "Te la señala"
    salida:41.52,    // "Quitarla es cosa tuya"
  };

  const lsP = clamp((t-T.lista)/0.6,0,1), lsE = Easing.easeOutCubic(lsP);
  const n43 = useCountUp(0, 43, T.n43, 1.0, t);
  const modoOn = T.modo <= t;
  const modoGlow = t >= T.modo && t < T.modo+1.4 ? Math.sin((t-T.modo)/1.4*Math.PI) : 0;
  const casillas = T.casillas <= t;
  const marcadas = T.todos <= t;
  const mcP = clamp((t-T.marcados)/0.5,0,1);

  const pmP = clamp((t-T.pormes)/0.65,0,1), pmE = Easing.easeOutBack(pmP);
  const poP = clamp((t-T.porque)/0.55,0,1), poE = Easing.easeOutCubic(poP);
  const diP = clamp((t-T.diciembre)/0.55,0,1), diE = Easing.easeOutCubic(diP);
  const trP = clamp((t-T.trimestre)/0.5,0,1), trE = Easing.easeOutBack(trP);
  const inP = clamp((t-T.intruso)/0.6,0,1), inE = Easing.easeOutBack(inP);
  const nqP = clamp((t-T.noquita)/0.45,0,1);
  const seP = clamp((t-T.senala)/0.45,0,1), seE = Easing.easeOutBack(seP);
  const saP = clamp((t-T.salida)/0.55,0,1), saE = Easing.easeOutCubic(saP);

  // Cursor: aparca → "Seleccionar varios" (8.64) → "Marcar todos" (13.05) → alta del gasto (30.93)
  const cursor = { frames:[
    { t:0.8,  x:1790, y:1010 },
    { t:8.0,  x:1790, y:1010 },
    { t:8.5,  x:270,  y:906 },
    { t:12.4, x:270,  y:906 },
    { t:12.9, x:492,  y:906 },
    { t:30.3, x:492,  y:906 },
    { t:30.8, x:1610, y:512 },
  ], clicks:[T.modo, T.todos, T.alta] };

  // ── Fila de comisión. `raro` = el intruso fuera de escala ──
  const Com = ({ i, concepto, fecha, importe, raro })=>{
    const p = clamp((t-T.lista-i*0.05)/0.35,0,1);
    const avisada = raro && 0 < inP;
    return (
      <div style={{display:'grid', gridTemplateColumns:'34px 1fr auto', alignItems:'center', gap:14,
                   height:66, padding:'0 16px', borderBottom:'1px solid #EEF2F6',
                   opacity:clamp(p*1.4,0,1),
                   background:avisada ? `rgba(251,140,0,${0.10+inE*0.06})` : (marcadas ? 'rgba(56,189,248,0.14)' : 'transparent'),
                   boxShadow:avisada ? 'inset 4px 0 0 #FB8C00' : 'none'}}>
        {casillas
          ? <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke={marcadas ? '#0085FF' : '#94A3B8'} strokeWidth="2.2">
              <rect x="3.5" y="3.5" width="17" height="17" rx="3"/>
              {marcadas && <path d="M7.5 12.3 L10.8 15.6 L16.8 8.6" strokeLinecap="round" strokeLinejoin="round"/>}
            </svg>
          : <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2.2">
              <path d="M6 18 L17 7" strokeLinecap="round"/><path d="M17 15 V7 H9" strokeLinecap="round"/>
            </svg>}
        <div style={{minWidth:0, lineHeight:1.3}}>
          <div className="f-plex" style={{fontSize:18, fontWeight:500, color:'#0F172A', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{concepto}</div>
          <div className="f-plex" style={{fontSize:15, color:'#94A3B8'}}>{fecha} · Comisiones bancarias</div>
        </div>
        <span className="f-mono" style={{fontSize:19, fontWeight:700, color:avisada ? '#7a5b00' : '#B42318'}}>
          {importe.toLocaleString('es-ES',{minimumFractionDigits:2})}
        </span>
      </div>
    );
  };

  const Mes = ({ i, mes, n, suma }) => {
    const p = clamp((t-T.pormes-i*0.16)/0.5,0,1), e = Easing.easeOutBack(p);
    const dado = T.alta <= t;
    return (
      <div style={{marginTop:i === 0 ? 0 : 14, opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*14}px)`}}>
        <div style={{display:'flex', alignItems:'center', gap:14, padding:'13px 18px', borderRadius:9, background:'#F1F5F9'}}>
          <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>{mes}</span>
          <span className="f-plex" style={{fontSize:17, color:'#94A3B8'}}>({n})</span>
          <span className="f-mono" style={{fontSize:20, fontWeight:700, color:'#0F172A', marginLeft:'auto'}}>{suma}</span>
          <span style={{display:'inline-flex', alignItems:'center', gap:8, padding:'8px 18px', borderRadius:9,
                        background:dado ? 'rgba(16,185,129,0.16)' : '#0085FF',
                        transform:dado ? `scale(${lerp(0.9,1,clamp((t-T.alta-i*0.12)/0.4,0,1))})` : 'none'}}>
            {dado && <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="3"><path d="M6 12.5 L10 16.5 L18 7.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
            <span className="f-plex" style={{fontSize:17, fontWeight:700, color:dado ? '#059669' : '#fff'}}>
              {dado ? 'Gasto dado de alta' : 'Dar de alta el gasto'}
            </span>
          </span>
        </div>
      </div>
    );
  };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="LOS MUCHOS PEQUEÑOS" title={<span>Cuarenta y tres, de una vez</span>}/>

      {/* ── Izquierda: la lista, el buscador y el modo selección ── */}
      {lsP > 0 && (
        <div style={{position:'absolute', left:100, top:288, width:800, opacity:lsE, transform:`translateY(${(1-lsE)*18}px)`}}>
          {/* El clic cambia de oficio */}
          {T.casillas <= t && t < T.pormes && (
            <div className="f-plex" style={{position:'absolute', left:-30, right:-30, top:-52, textAlign:'center', fontSize:24, fontWeight:700, color:'#0085FF',
                                            opacity:clamp((t-T.casillas)/0.5,0,1)}}>
              El clic cambia de oficio: ya no abre, marca.
            </div>
          )}
          <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', boxShadow:'0 24px 58px rgba(15,23,42,0.10)', overflow:'hidden'}}>
            <div style={{padding:'14px 16px', borderBottom:'1px solid #EEF2F6'}}>
              <div className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0F172A'}}>Movimientos del mes</div>
              <div className="f-plex" style={{fontSize:16, color:marcadas ? '#0085FF' : '#94A3B8', fontWeight:marcadas ? 700 : 400}}>
                {marcadas && 0 < mcP ? '43 marcados · 1.204,50 €' : (modoOn ? 'Pulsa los movimientos que quieras juntar en un gasto' : '43 de 128 con el filtro puesto')}
              </div>
            </div>
            {/* El buscador */}
            <div style={{display:'flex', alignItems:'center', gap:10, padding:'12px 16px', borderBottom:'1px solid #EEF2F6'}}>
              <div style={{flex:'1 1 auto', display:'inline-flex', alignItems:'center', gap:10, padding:'11px 16px',
                           borderRadius:9, border:'1px solid #E2E8F0'}}>
                <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M20 20 L16 16"/></svg>
                <span className="f-mono" style={{fontSize:18, color:'#0F172A'}}>
                  <Typewriter text="comisión banco" start={T.buscar} cps={13} t={t} caret/>
                </span>
              </div>
              {0 < clamp((t-T.n43)/0.4,0,1) && (
                <span className="f-plex" style={{fontSize:17, color:'#64748B', minWidth:80, textAlign:'center'}}>1 de {Math.round(n43)}</span>
              )}
            </div>
            <Com i={0} concepto="COMISION BANCO MANTENIMIENTO" fecha="03/06" importe={-3.5}/>
            <Com i={1} concepto="COMISION TRANSFERENCIA SEPA" fecha="07/06" importe={-0.6}/>
            <Com i={2} concepto="COMISION BANCO ADMINISTRACION" fecha="12/06" importe={-2.4}/>
            <Com i={3} concepto="COMISION MANTENIMIENTO TARJETA" fecha="21/07" importe={-4.0}/>
            <Com i={4} concepto="COMISION BANCO CUSTODIA VALORES" fecha="04/08" importe={-598.0} raro/>
            <Com i={5} concepto="COMISION TRANSFERENCIA SEPA" fecha="11/08" importe={-0.6}/>
            {/* El pie: seleccionar varios NO acota, es un MODO */}
            <div style={{display:'flex', alignItems:'center', gap:10, padding:'12px 16px', borderTop:'1px solid #E2E8F0'}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:9, padding:'10px 18px', borderRadius:9,
                            background:modoOn ? '#0085FF' : '#fff', border:`1px solid ${modoOn ? '#0085FF' : '#E2E8F0'}`,
                            boxShadow:0 < modoGlow ? `0 0 ${modoGlow*32}px rgba(0,133,255,0.6)` : 'none'}}>
                <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke={modoOn ? '#fff' : '#64748B'} strokeWidth="2.2">
                  <rect x="3.5" y="3.5" width="17" height="17" rx="3"/>
                  {modoOn && <path d="M7.5 12.3 L10.8 15.6 L16.8 8.6" strokeLinecap="round" strokeLinejoin="round"/>}
                </svg>
                <span className="f-plex" style={{fontSize:18, fontWeight:700, color:modoOn ? '#fff' : '#64748B'}}>Seleccionar varios</span>
              </span>
              {modoOn && (
                <span style={{display:'inline-flex', alignItems:'center', padding:'10px 18px', borderRadius:9, border:'1px solid #E2E8F0'}}>
                  <span className="f-plex" style={{fontSize:18, fontWeight:600, color:'#334155'}}>
                    {marcadas ? 'Quitar (43)' : 'Marcar todos'}
                  </span>
                </span>
              )}
            </div>
          </div>
        </div>
      )}

      {/* ── Derecha: el reparto por meses ── */}
      {pmP > 0 && (
        <div style={{position:'absolute', left:960, top:288, width:860, opacity:pmE, transform:`translateY(${(1-pmE)*18}px)`}}>
          <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', boxShadow:'0 24px 58px rgba(15,23,42,0.10)', padding:'22px 26px'}}>
            <div className="f-plex" style={{fontSize:20, fontWeight:700, color:'#0F172A', marginBottom:5}}>Agrupar en gastos</div>
            <div className="f-plex" style={{fontSize:17, color:'#94A3B8', marginBottom:18}}>Un gasto por mes, y un pago por cada movimiento con su día.</div>
            <Mes i={0} mes="Junio 2026"  n={18} suma="−284,20 €"/>
            <Mes i={1} mes="Julio 2026"  n={15} suma="−271,70 €"/>
            <Mes i={2} mes="Agosto 2026" n={10} suma="−648,60 €"/>

            {/* El intruso: se señala, no se quita */}
            {inP > 0 && (
              <div style={{display:'flex', alignItems:'flex-start', gap:13, marginTop:20, padding:'16px 20px', borderRadius:10,
                           background:'rgba(251,140,0,0.10)', borderLeft:'4px solid #FB8C00',
                           opacity:clamp(inP*1.3,0,1), transform:`translateY(${(1-inE)*10}px)`}}>
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#B45309" strokeWidth="2.3" style={{flexShrink:0, marginTop:3}}>
                  <path d="M12 3.5 L22 20 H2 z" strokeLinejoin="round"/><path d="M12 10 v4" strokeLinecap="round"/><circle cx="12" cy="17" r="1" fill="#B45309" stroke="none"/>
                </svg>
                <div>
                  <div className="f-plex" style={{fontSize:21, fontWeight:700, color:'#7a5b00', lineHeight:1.3}}>
                    Una se sale de escala: 598,00 € entre comisiones de céntimos.
                  </div>
                  {seP > 0 && (
                    <div className="f-plex" style={{fontSize:19, color:'#7a5b00', marginTop:7, opacity:clamp(seP*1.3,0,1),
                                                    transform:`translateY(${(1-seE)*6}px)`}}>
                      {nqP > 0 && <b>No la quita. </b>}Te la señala. Quitarla es cosa tuya.
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>

          {/* El porqué del reparto por meses */}
          {poP > 0 && (
            <div style={{marginTop:26, opacity:clamp(poP*1.2,0,1), transform:`translateY(${(1-poE)*12}px)`}}>
              <div className="f-plex" style={{fontSize:27, fontWeight:600, color:'#334155', lineHeight:1.4}}>
                Un gasto es un documento contable.
              </div>
              {diP > 0 && (
                <div style={{display:'flex', alignItems:'center', gap:16, flexWrap:'wrap', marginTop:16, opacity:clamp(diP*1.3,0,1),
                             transform:`translateY(${(1-diE)*10}px)`}}>
                  <span style={{display:'inline-flex', alignItems:'center', padding:'9px 19px', borderRadius:99,
                                background:'#F1F5F9', border:'1px solid #E2E8F0'}}>
                    <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#334155'}}>enero</span>
                  </span>
                  <svg width="46" height="18" viewBox="0 0 46 18" fill="none">
                    <path d="M2 9 H36" stroke="#EF4444" strokeWidth="3" strokeLinecap="round"
                          strokeDasharray="34" strokeDashoffset={34*(1-Easing.easeInOutCubic(clamp((t-T.diciembre)/0.6,0,1)))}/>
                    <path d="M30 3 L38 9 L30 15" stroke="#EF4444" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
                          opacity={clamp((t-T.diciembre-0.45)/0.25,0,1)}/>
                  </svg>
                  <span style={{display:'inline-flex', alignItems:'center', padding:'9px 19px', borderRadius:99,
                                background:'rgba(239,68,68,0.10)', border:'1px solid rgba(239,68,68,0.35)'}}>
                    <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#B42318'}}>contabilizado en diciembre</span>
                  </span>
                  {trP > 0 && (
                    <span className="f-plex" style={{fontSize:23, fontWeight:800, color:'#B42318',
                                                     transform:`scale(${lerp(0.8,1,trE)})`, opacity:clamp(trP*1.3,0,1)}}>
                      y en otro trimestre
                    </span>
                  )}
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {saP > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:1000, textAlign:'center', fontSize:30, fontWeight:600,
                                        color:'#64748B', opacity:saE, transform:`translateY(${(1-saE)*10}px)`}}>
          La ventana avisa. La decisión sigue siendo tuya.
        </div>
      )}

      <ScriptedCursor frames={cursor.frames} t={t} clickTimes={cursor.clicks}/>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCN05 });