// === Escena 01 — "El mapa" (contrato) ===
// Extracto en crudo → la carga de 8 pasos con su recuento → el reparto de la ventana
// (banco a la izquierda, tus facturas a la derecha, el mes arriba) → LA ÚNICA COSA como promesa.
// Los 8 pasos son literales de Conciliar40Service.cs:266-270.
function EscenaCN01({ t }){
  // LOCUCIÓN (audio/escena-01.mp3): esta es la ventana de conciliar → nombre a cada línea →
  // no verás una lista → ocho pasos → extracto/ventas/compras/pedidos → cuántas filas →
  // ya lo sabe todo → ningún clic vuelve a esperar → mira el reparto → el banco / tus facturas →
  // un mes entero → no hay fases ni etapas → de arriba abajo → un mes, de arriba abajo → nada se escribe.
  const T = {
    head:0.0,        // "Esta es la ventana de conciliar"
    extracto:3.2,    // "nombre a cada línea de tu extracto"
    carga:6.25,      // "no verás una lista"
    pasos:11.01,     // "Ocho pasos"
    p2:12.33,        // "el extracto del mes"
    p3:13.58,        // "tus ventas"
    p4:14.54,        // "tus compras"
    p5:15.48,        // "tus pedidos"
    filas:17.97,     // "cuántas filas ha traído"
    todo:20.79,      // "la ventana ya lo sabe todo"
    rapido:23.39,    // "ningún clic vuelve a esperar"
    ventana:25.27,   // "Ahora mira el reparto"
    izq:28.08,       // "lo que movió el banco"
    der:30.41,       // "tus facturas"
    mes:33.85,       // "se trabaja un mes entero"
    etapas:35.77,    // "No hay fases ni etapas"
    abajo:38.36,     // "de arriba abajo"
    unica1:39.55,    // "Un mes, de arriba abajo"
    unica2:42.05,    // "nada se escribe hasta que pulsas"
    salida:44.48,    // "Empecemos por lo primero"
  };

  // ── Los 8 pasos, literales del servicio. verde = instante en que ese paso queda hecho ──
  const PASOS = [
    { n:'Cuenta bancaria',          filas:'1',   verde:11.9 },
    { n:'Extracto del mes',         filas:'128', verde:T.p2 },
    { n:'Ventas',                   filas:'240', verde:T.p3 },
    { n:'Compras',                  filas:'180', verde:T.p4 },
    { n:'Pedidos',                  filas:'46',  verde:T.p5 },
    { n:'Presupuestos',             filas:'12',  verde:16.5 },
    { n:'Referencias del concepto', filas:'37',  verde:17.6 },
    { n:'Operaciones pendientes',   filas:'312', verde:19.9 },
  ];

  const headP = clamp((t-T.head)/0.7,0,1), headE = Easing.easeOutCubic(headP);

  // Acto 1 · el extracto en crudo. Se va cuando entra la carga.
  const exP = clamp((t-T.extracto)/0.6,0,1), exE = Easing.easeOutCubic(exP);
  const exOut = clamp((t-T.carga)/0.45,0,1);

  // Acto 2 · el panel de carga. Se retira cuando entra la ventana.
  const cgP = clamp((t-T.carga)/0.7,0,1), cgE = Easing.easeOutBack(cgP);
  const cgOut = clamp((t-T.ventana)/0.5,0,1);
  const hechos = PASOS.filter(p => t >= p.verde).length;
  const filasGlow = t >= T.filas && t < T.filas+1.3 ? Math.sin((t-T.filas)/1.3*Math.PI) : 0;
  const todoP = clamp((t-T.todo)/0.5,0,1), todoE = Easing.easeOutBack(todoP);
  const rapidoPulse = t >= T.rapido && t < T.rapido+1.1 ? Math.sin((t-T.rapido)/1.1*Math.PI) : 0;

  // Acto 3 · la ventana. Se atenúa bajo La Única Cosa.
  const vnP = clamp((t-T.ventana)/0.8,0,1), vnE = Easing.easeOutCubic(vnP);
  const izqP = clamp((t-T.izq)/0.55,0,1), izqE = Easing.easeOutCubic(izqP);
  const derP = clamp((t-T.der)/0.55,0,1), derE = Easing.easeOutCubic(derP);
  const mesGlow = t >= T.mes && t < T.mes+1.4 ? Math.sin((t-T.mes)/1.4*Math.PI) : 0;
  const etP = clamp((t-T.etapas)/0.5,0,1);
  const etTacha = Easing.easeInOutCubic(clamp((t-T.etapas-0.55)/0.6,0,1));
  const flechaP = Easing.easeInOutCubic(clamp((t-T.abajo)/1.0,0,1));

  // Acto 4 · La Única Cosa
  const veloOp = t < T.unica1 ? 0 : clamp((t-T.unica1)/0.7,0,1)*0.92;
  const u1P = clamp((t-T.unica1)/0.6,0,1), u1E = Easing.easeOutCubic(u1P);
  const u2P = clamp((t-T.unica2)/0.6,0,1), u2E = Easing.easeOutCubic(u2P);
  const salP = clamp((t-T.salida)/0.6,0,1), salE = Easing.easeOutCubic(salP);

  // ── Una fila de extracto en crudo (lo que llega del banco) ──
  const FilaCruda = ({ fecha, concepto, importe, i })=>{
    const p = clamp((t-T.extracto-i*0.14)/0.5,0,1), e = Easing.easeOutCubic(p);
    return (
      <div style={{display:'grid', gridTemplateColumns:'120px 1fr 210px', alignItems:'center', gap:22,
                   padding:'26px 34px', borderBottom:'1px solid #E2E8F0',
                   opacity:e, transform:`translateY(${(1-e)*14}px)`}}>
        <span className="f-mono" style={{fontSize:22, color:'#94A3B8'}}>{fecha}</span>
        <span className="f-mono" style={{fontSize:22, color:'#334155', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{concepto}</span>
        <span className="f-mono" style={{fontSize:24, fontWeight:700, color:0 < importe ? '#086F0C' : '#B42318', textAlign:'right'}}>
          {(0 < importe ? '+' : '') + importe.toLocaleString('es-ES',{minimumFractionDigits:2})} €
        </span>
      </div>
    );
  };

  // ── Un chip de paso de carga: gris → girando → verde con su recuento ──
  const ChipPaso = ({ p, i })=>{
    const ent = clamp((t-T.pasos-i*0.09)/0.35,0,1);
    const ok = t >= p.verde;
    const now = !ok && t >= p.verde-1.1;
    const col = ok ? '#059669' : (now ? '#0085FF' : '#94A3B8');
    const numP = clamp((t-p.verde)/0.35,0,1);
    return (
      <span style={{display:'inline-flex', alignItems:'center', gap:9, fontSize:25, color:col,
                    fontWeight:now ? 700 : 500, opacity:ent, transform:`translateY(${(1-ent)*8}px)`}}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={col} strokeWidth="2.4"
             style={now ? {transform:`rotate(${(t-(p.verde-1.1))*300}deg)`} : null}>
          {ok
            ? <><circle cx="12" cy="12" r="10" fill="rgba(5,150,105,0.14)" stroke="none"/><path d="M7 12.5 L10.5 16 L17 9" strokeLinecap="round" strokeLinejoin="round"/></>
            : (now
              ? <path d="M21 12a9 9 0 1 1-6.2-8.5" strokeLinecap="round"/>
              : <circle cx="12" cy="12" r="9"/>)}
        </svg>
        {p.n}
        {0 < numP && (
          <b className="f-mono" style={{fontSize:24, color:'#0F172A', opacity:numP,
               textShadow:0 < filasGlow ? `0 0 ${filasGlow*18}px rgba(0,133,255,0.9)` : 'none'}}>{p.filas}</b>
        )}
      </span>
    );
  };

  // ── Una fila de la lista de movimientos (maqueta de la ventana) ──
  const Mov = ({ i, concepto, fecha, importe, evidente, hecho })=>(
    <div style={{display:'grid', gridTemplateColumns:'34px 1fr auto', alignItems:'center', gap:14,
                 height:66, padding:'0 16px', borderBottom:'1px solid #EEF2F6',
                 borderLeft:`4px solid ${evidente ? '#38BDF8' : 'transparent'}`,
                 background:i === 0 ? 'rgba(0,133,255,0.09)' : 'transparent',
                 opacity:hecho ? 0.6 : 1}}>
      <svg width="25" height="25" viewBox="0 0 24 24" fill="none"
           stroke={hecho ? '#059669' : (0 < importe ? '#059669' : '#EF4444')} strokeWidth="2.2">
        {hecho ? <><circle cx="12" cy="12" r="10"/><path d="M7 12.5 L10.5 16 L17 9" strokeLinecap="round"/></>
               : <><path d={0 < importe ? 'M18 6 L7 17' : 'M6 18 L17 7'} strokeLinecap="round"/><path d={0 < importe ? 'M7 9 v8 h8' : '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}</div>
      </div>
      <span className="f-mono" style={{fontSize:19, fontWeight:700, color:0 < importe ? '#086F0C' : '#B42318'}}>
        {(0 < importe ? '+' : '') + importe.toLocaleString('es-ES',{minimumFractionDigits:2})}
      </span>
    </div>
  );

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="CONCILIAR · CÓMO SE USA" title={<span>El banco, con nombre y apellidos</span>}/>

      {/* ─────────── ACTO 1 · el extracto en crudo ─────────── */}
      {exP > 0 && exOut < 1 && (
        <div style={{position:'absolute', left:300, top:352, width:1320, opacity:(1-exOut)*headE,
                     transform:`translateY(${(1-exE)*22 - exOut*28}px)`}}>
          <div style={{background:'#fff', borderRadius:20, border:'1px solid #E2E8F0', boxShadow:'0 30px 70px rgba(15,23,42,0.11)', overflow:'hidden'}}>
            <div style={{padding:'20px 34px', borderBottom:'1px solid #E2E8F0', background:'#F8FAFC'}}>
              <span className="f-plex" style={{fontSize:17, fontWeight:700, letterSpacing:'2.6px', color:'#94A3B8'}}>LO QUE LLEGA DEL BANCO</span>
            </div>
            <FilaCruda i={0} fecha="12/08" concepto="TRANSF /Bizum DE RESOEX S.L.( FRANCISCO QUIJADA...) (Ext: 71689)" importe={1234.56}/>
            <FilaCruda i={1} fecha="14/08" concepto="LIQUIDACION PASARELA REF 88214 PERIODO 01-15 AGO" importe={12430.55}/>
            <FilaCruda i={2} fecha="14/08" concepto="COMISION BANCO MANTENIMIENTO" importe={-3.5}/>
          </div>
        </div>
      )}

      {/* ─────────── ACTO 2 · la carga: 8 pasos con su recuento ─────────── */}
      {cgP > 0 && cgOut < 1 && (
        <div style={{position:'absolute', left:300, top:346, width:1320, opacity:(1-cgOut),
                     transform:`scale(${lerp(0.95,1,cgE)}) translateY(${(1-cgE)*20 - cgOut*26}px)`}}>
          <div style={{background:'#fff', borderRadius:20, border:'1px solid #E2E8F0', boxShadow:'0 30px 70px rgba(15,23,42,0.11)', padding:'40px 46px 46px'}}>
            <div style={{display:'flex', alignItems:'center', gap:18}}>
              <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#FB8C00" strokeWidth="2.2">
                <rect x="3" y="4" width="7" height="16" rx="1.5"/><rect x="14" y="4" width="7" height="16" rx="1.5"/>
              </svg>
              <div style={{lineHeight:1.3}}>
                <div className="f-plex" style={{fontSize:32, fontWeight:700, color:'#0F172A'}}>
                  {hechos < PASOS.length ? PASOS[hechos].n + '...' : 'Terminando...'}
                </div>
                <div className="f-plex" style={{fontSize:20, color:'#94A3B8'}}>
                  paso {Math.min(hechos+1, PASOS.length)} de {PASOS.length} · lleva {Math.max(0, Math.floor(t-T.carga))} s
                </div>
              </div>
            </div>
            <div style={{height:9, borderRadius:99, background:'#EEF2F6', marginTop:26, overflow:'hidden'}}>
              <div style={{height:'100%', width:`${hechos/PASOS.length*100}%`, background:'#0085FF', borderRadius:99}}/>
            </div>
            <div style={{display:'flex', flexWrap:'wrap', gap:'16px 40px', marginTop:32}}>
              {PASOS.map((p,i)=> <ChipPaso key={p.n} p={p} i={i}/>)}
            </div>
            {todoP > 0 && (
              <div style={{display:'flex', alignItems:'baseline', gap:14, flexWrap:'wrap', marginTop:34, paddingTop:26, borderTop:'1px solid #F1F5F9',
                           opacity:todoP, transform:`translateY(${(1-todoE)*12}px)`}}>
                <span className="f-plex" style={{fontSize:34, fontWeight:800, color:'#059669'}}>Ya lo sabe todo</span>
                <span className="f-plex" style={{fontSize:27, color:'#64748B',
                        textShadow:0 < rapidoPulse ? `0 0 ${rapidoPulse*20}px rgba(0,133,255,0.75)` : 'none'}}>
                  · a partir de aquí, ningún clic espera
                </span>
              </div>
            )}
          </div>
        </div>
      )}

      {/* ─────────── ACTO 3 · la ventana entera ─────────── */}
      {vnP > 0 && (
        <div style={{position:'absolute', left:110, top:230, width:1700, opacity:vnE*(1-veloOp/0.92*0.8),
                     transform:`translateY(${(1-vnE)*26}px)`, filter:veloOp > 0 ? 'saturate(0.55)' : 'none'}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 34px 80px rgba(15,23,42,0.13)', overflow:'hidden'}}>
            <BrowserChrome url="play.dinaup.com/App/Pymes/BankAccounts/Account" title="Conciliar"/>

            {/* Barra: el mes manda sobre todo lo demás */}
            <div style={{display:'flex', alignItems:'center', gap:20, padding:'18px 24px', borderBottom:'1px solid #EEF2F6', background:'#FBFCFE'}}>
              <div style={{display:'inline-flex', alignItems:'center', gap:11, padding:'9px 18px', borderRadius:99,
                           border:`2px solid ${0 < mesGlow ? '#0085FF' : '#E2E8F0'}`, background:'#fff',
                           boxShadow:0 < mesGlow ? `0 0 ${mesGlow*34}px rgba(0,133,255,0.5)` : 'none'}}>
                <span style={{color:'#94A3B8', fontSize:18}}>◀</span>
                <span className="f-plex" style={{fontSize:22, fontWeight:700, color:0 < mesGlow ? '#0085FF' : '#0F172A'}}>Agosto</span>
                <span style={{color:'#94A3B8', fontSize:18}}>▶</span>
              </div>
              <div style={{minWidth:250, padding:'8px 16px', border:'1px solid #E2E8F0', borderRadius:10, lineHeight:1.25}}>
                <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', gap:12}}>
                  <b className="f-plex" style={{fontSize:22, color:'#0F172A'}}>4%</b>
                  <span className="f-plex" style={{fontSize:17, color:'#94A3B8'}}>5 de 128</span>
                </div>
                <div style={{height:7, borderRadius:99, background:'#EEF2F6', marginTop:5}}>
                  <div style={{height:'100%', width:'4%', background:'#0085FF', borderRadius:99}}/>
                </div>
                <div className="f-plex" style={{fontSize:15, color:'#94A3B8', marginTop:4}}>quedan 123 por conciliar</div>
              </div>
              <span className="f-plex" style={{fontSize:18, color:'#64748B'}}>entran · 12.430,55 €</span>
              <span className="f-plex" style={{fontSize:18, color:'#64748B'}}>salen · 8.210,00 €</span>
            </div>

            {/* Las dos mitades */}
            <div style={{display:'flex', gap:16, padding:16, background:'#F6F8FB', height:534}}>
              <div style={{width:790, flexShrink:0, background:'#fff', borderRadius:14, position:'relative',
                           border:`2px solid ${izqP > 0 ? '#0085FF' : '#E2E8F0'}`, overflow:'hidden',
                           boxShadow:izqP > 0 ? `0 18px 44px rgba(0,133,255,${izqE*0.2})` : 'none'}}>
                <div style={{padding:'14px 16px', borderBottom:'1px solid #EEF2F6'}}>
                  <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0F172A'}}>Movimientos del mes</span>
                  <span className="f-plex" style={{fontSize:16, color:'#94A3B8'}}> · 123 pendientes</span>
                </div>
                <Mov i={0} concepto="TRANSF /Bizum DE RESOEX S.L. (Ext: 71689)" fecha="12/08 · Transferencia" importe={1234.56} evidente/>
                <Mov i={1} concepto="LIQUIDACION PASARELA REF 88214" fecha="14/08 · Liquidación" importe={12430.55}/>
                <Mov i={2} concepto="COMISION BANCO MANTENIMIENTO" fecha="14/08 · Comisiones" importe={-3.5}/>
                <Mov i={3} concepto="RECIBO SUMINISTRO ELECTRICO AGOSTO" fecha="15/08 · Recibo" importe={-412.9}/>
                <Mov i={4} concepto="TRANSF DE ALMACENES DEL SUR SL FRA 1042" fecha="16/08" importe={2860.0} hecho/>
                <Mov i={5} concepto="PAGO TARJETA COMBUSTIBLE" fecha="17/08" importe={-78.4}/>
                {/* La flecha: se baja de arriba abajo */}
                {flechaP > 0 && (
                  <div style={{position:'absolute', left:14, top:78, height:396, pointerEvents:'none'}}>
                    <svg width="38" height="396" viewBox="0 0 38 396" fill="none">
                      <path d="M19 8 V378" stroke="#0085FF" strokeWidth="4" strokeLinecap="round"
                            strokeDasharray="370" strokeDashoffset={370*(1-flechaP)}/>
                      <path d="M9 366 L19 378 L29 366" stroke="#0085FF" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"
                            opacity={clamp((flechaP-0.82)/0.18,0,1)}/>
                    </svg>
                  </div>
                )}
              </div>
              {/* Derecha: el desglose */}
              <div style={{flex:'1 1 auto', background:'#fff', borderRadius:14,
                           border:`2px solid ${derP > 0 ? '#10B981' : '#E2E8F0'}`, padding:'16px 20px',
                           boxShadow:derP > 0 ? `0 18px 44px rgba(16,185,129,${derE*0.2})` : 'none'}}>
                <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0F172A'}}>Desglosar liquidación</span>
                <div style={{marginTop:18, paddingTop:14, borderTop:'1px solid #F1F5F9'}}>
                  {['Venta 1001 · RESOEX, S.L.','Venta 1002 · RESOEX, S.L.','Compra A-4471 · Suministros Vega'].map((s,i)=>(
                    <div key={s} style={{display:'flex', justifyContent:'space-between', alignItems:'center',
                                         padding:'16px 8px', borderBottom:'1px solid #F4F7FA',
                                         borderLeft:'4px dashed #38BDF8', paddingLeft:14,
                                         opacity:clamp((derP-i*0.12)*1.4,0,1)}}>
                      <span className="f-plex" style={{fontSize:18, color:'#334155'}}>{s}</span>
                      <span className="f-mono" style={{fontSize:18, fontWeight:700, color:'#0F172A'}}>{['1.234,56','980,00','412,90'][i]} €</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Rótulos del reparto */}
          {izqP > 0 && (
            <div className="f-plex" style={{position:'absolute', left:24, top:-46, fontSize:20, fontWeight:700, letterSpacing:'2px', color:'#0085FF',
                                            opacity:izqE, transform:`translateY(${(1-izqE)*10}px)`}}>EL BANCO</div>
          )}
          {derP > 0 && (
            <div className="f-plex" style={{position:'absolute', left:836, top:-46, fontSize:20, fontWeight:700, letterSpacing:'2px', color:'#059669',
                                            opacity:derE, transform:`translateY(${(1-derE)*10}px)`}}>TUS FACTURAS</div>
          )}
        </div>
      )}

      {/* "No hay fases ni etapas": las 4 etapas de la ventana vieja, tachadas */}
      {etP > 0 && veloOp < 0.5 && (
        <div style={{position:'absolute', left:0, right:0, top:966, display:'flex', justifyContent:'center', gap:14,
                     opacity:etP*(1-veloOp/0.92)}}>
          {['Sin clasificar','Sin operación','Para confirmar','Residuos'].map((e,i)=>(
            <span key={e} style={{position:'relative', display:'inline-block', padding:'10px 22px', borderRadius:99,
                                  background:'#F1F5F9', border:'1px solid #E2E8F0'}}>
              <span className="f-plex" style={{fontSize:21, color:'#94A3B8'}}>{e}</span>
              <span style={{position:'absolute', left:10, right:10, top:'50%', height:3, borderRadius:2, background:'#EF4444',
                            transform:`scaleX(${clamp((etTacha-i*0.1)*1.5,0,1)})`, transformOrigin:'left'}}/>
            </span>
          ))}
        </div>
      )}

      {/* ─────────── ACTO 4 · La Única Cosa (promesa) ─────────── */}
      {veloOp > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {u1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:404, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          Un mes, de arriba abajo.
        </div>
      )}
      {u2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:518, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">Nada se escribe hasta que pulsas.</span>
        </div>
      )}
      {salP > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:690, textAlign:'center', fontSize:34, fontWeight:500,
                                        color:'#64748B', opacity:salE, transform:`translateY(${(1-salE)*12}px)`}}>
          Empecemos por lo primero: por dónde.
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCN01 });