// === 10:00 · Contabilidad (12s) — asientos ya redactados, confirmas el lote ===

function SlideContabilidad({ t }){
  const WIN_W = 1150, WIN_H = 660, WIN_L = (1920-WIN_W)/2, WIN_T = 185;

  const asientos = [
    { d:'04/11', prov:'Endesa',               con:'Fra. END-887421 · suministros',   cta:'6280000', imp:'288,47 €'   },
    { d:'05/11', prov:'Vodafone',             con:'Fra. VF-2025-11-002 · telecom',   cta:'6290000', imp:'120,00 €'   },
    { d:'02/11', prov:'Cafetería Los Robles', con:'Venta F-2025-0247',               cta:'7000000', imp:'1.210,00 €' },
    { d:'06/11', prov:'Movistar',             con:'Fra. FM-112334 · telecom',        cta:'6290000', imp:'79,99 €'    },
    { d:'01/11', prov:'Amazon EU',            con:'Fra. AMZ-0923 · material',        cta:'6000000', imp:'145,00 €'   },
  ];

  const clickAt = 6.8;
  const confirmed = (i) => t >= clickAt + 0.3 + i*0.22;
  const allDone = t >= clickAt + 0.3 + 5*0.22;

  // Botón "Confirmar lote": cabecera interna de la ventana.
  const btnX = WIN_L + WIN_W - 130, btnY = WIN_T + 76 + 65 + 40;
  const cursorFrames = [
    { t:0.0, x:1700, y:1120 },
    { t:4.6, x:1700, y:1120 },
    { t:6.4, x:btnX, y:btnY },
    { t:12,  x:btnX, y:btnY },
  ];

  return (
    <SlideCanvas variant="light-soft">
      <TimeBadge t={t} hora="10:00" label="La contabilidad, sola"/>
      <DemoHeader t={t} eyebrow="PYMES · CONTABILIDAD" title={<>Los asientos llegan <span className="grad-text">ya redactados.</span></>}/>

      <div style={{position:'absolute',top:WIN_T,left:WIN_L,width:WIN_W,height:WIN_H,background:'#fff',borderRadius:14,overflow:'hidden',boxShadow:'0 30px 80px rgba(0,133,255,0.15)',border:'1px solid #E2E8F0',opacity:clamp((t-0.3)/0.6,0,1),display:'flex',flexDirection:'column'}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/AsientosContables" title="Asientos contables — Dinaup"/>
        <DinaupAppHeader breadcrumb={["Contabilidad","Asientos propuestos"]}/>

        {/* Cabecera interna + botón de lote */}
        <div style={{padding:'18px 28px 12px',display:'flex',alignItems:'center',justifyContent:'space-between',flexShrink:0}}>
          <div>
            <div className="f-plex" style={{fontSize:17,fontWeight:700,color:'#0F172A'}}>
              Asientos propuestos
              <span style={{fontSize:11,color:'#64748B',fontWeight:500,marginLeft:10}}>redactados por la IA al entrar cada factura</span>
            </div>
            <div className="f-mono" style={{fontSize:11,color:'#94A3B8',marginTop:3,letterSpacing:0.5}}>DIARIO GENERAL · NOVIEMBRE 2025</div>
          </div>
          {(()=>{
            const pressing = t >= clickAt && t < clickAt + 0.3;
            return (
              <button className="dn-btn" style={{
                padding:'10px 20px',fontSize:13,
                background: allDone ? '#10B981' : 'var(--dn-primary)',
                transform: pressing ? 'scale(0.94)' : 'scale(1)',
                transition:'all 150ms',
                animation: t > 5.4 && t < clickAt ? 'ctaPulse 1.2s ease-in-out infinite' : 'none',
              }}>
                {allDone ? '✓ 5 contabilizados' : 'Confirmar 5 asientos'}
              </button>
            );
          })()}
        </div>

        {/* Cabeceras */}
        <div style={{display:'grid',gridTemplateColumns:'70px 1.6fr 130px 110px 130px',padding:'8px 28px',background:'#F8FAFC',fontSize:10,color:'#64748B',letterSpacing:0.6,textTransform:'uppercase',fontWeight:600,borderTop:'1px solid #E2E8F0',borderBottom:'1px solid #E2E8F0',opacity:clamp((t-0.8)/0.4,0,1)}}>
          <div>Fecha</div><div>Asiento</div><div>Cuenta PGC</div><div style={{textAlign:'right'}}>Importe</div><div style={{textAlign:'center'}}>Estado</div>
        </div>

        {/* Filas */}
        <div style={{flex:1,padding:'8px 28px 0'}}>
          {asientos.map((a,i)=>{
            const ap = clamp((t-(1.0+i*0.3))/0.4, 0, 1);
            const e = Easing.easeOutCubic(ap);
            const ok = confirmed(i);
            const ctaP = clamp((t-(1.3+i*0.3))/0.4, 0, 1);
            return (
              <div key={i} style={{
                display:'grid',gridTemplateColumns:'70px 1.6fr 130px 110px 130px',
                padding:'13px 14px',marginBottom:8,alignItems:'center',
                background: ok ? 'rgba(16,185,129,0.05)' : '#fff',
                border:`1px solid ${ok ? 'rgba(16,185,129,0.35)' : '#E2E8F0'}`,
                borderRadius:10,fontSize:12.5,color:'#334155',
                opacity:e, transform:`translateY(${(1-e)*10}px)`,
                transition:'background 300ms, border-color 300ms',
              }}>
                <div className="f-mono" style={{fontSize:11}}>{a.d}</div>
                <div style={{display:'flex',alignItems:'center',gap:9,minWidth:0}}>
                  <ProviderLogo name={a.prov} size={24}/>
                  <div style={{minWidth:0}}>
                    <div className="f-plex" style={{fontSize:12.5,fontWeight:600,color:'#0F172A'}}>{a.prov}</div>
                    <div style={{fontSize:10.5,color:'#64748B',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{a.con}</div>
                  </div>
                </div>
                <div>
                  <span className="f-mono" style={{padding:'3px 9px',background:'rgba(0,133,255,0.08)',border:'1px solid rgba(0,133,255,0.25)',borderRadius:6,fontSize:11,fontWeight:700,color:'var(--dn-primary)',opacity:ctaP}}>{a.cta}</span>
                </div>
                <div className="f-mono" style={{textAlign:'right',fontWeight:700,color:'#0F172A'}}>{a.imp}</div>
                <div style={{textAlign:'center'}}>
                  {ok
                    ? <StatusChip label="Contabilizado" color="success" icon="✓" start={clickAt + 0.3 + i*0.22} t={t}/>
                    : <span className="f-mono" style={{fontSize:10,color:'#94A3B8',border:'1px dashed #CBD5E1',padding:'3px 9px',borderRadius:100}}>propuesto</span>}
                </div>
              </div>
            );
          })}
        </div>

        {/* Footer cuadre */}
        <div style={{margin:'0 28px 16px',padding:'12px 18px',background: allDone ? 'linear-gradient(90deg,rgba(16,185,129,0.12),rgba(0,133,255,0.06))' : '#F8FAFC',border:`1px solid ${allDone ? 'rgba(16,185,129,0.4)' : '#E2E8F0'}`,borderRadius:10,display:'flex',alignItems:'center',gap:20,opacity:clamp((t-4.4)/0.5,0,1),transition:'all 300ms',flexShrink:0}}>
          <div style={{fontSize:12,color:'#64748B'}}>Debe <b className="f-mono" style={{color:'#0F172A'}}>1.843,46 €</b></div>
          <div style={{fontSize:12,color:'#64748B'}}>Haber <b className="f-mono" style={{color:'#0F172A'}}>1.843,46 €</b></div>
          <div className="f-mono" style={{fontSize:12,fontWeight:700,color:'#059669'}}>✓ Cuadrado 0,00 €</div>
          <div style={{flex:1}}/>
          {allDone && (()=>{
            const p = clamp((t-(clickAt+1.6))/0.5, 0, 1);
            const e = Easing.easeOutBack(p);
            return (
              <span className="f-plex" style={{fontSize:13,fontWeight:700,color:'#059669',opacity:clamp(p*1.3,0,1),transform:`scale(${lerp(0.8,1,e)})`}}>
                📒 Libro diario actualizado · sin teclear nada
              </span>
            );
          })()}
        </div>
      </div>

      <ScriptedCursor frames={cursorFrames} t={t} clickTimes={[clickAt]}/>
      <style>{`@keyframes ctaPulse{0%,100%{box-shadow:0 4px 14px rgba(0,133,255,0.3)}50%{box-shadow:0 4px 24px rgba(0,133,255,0.65)}}`}</style>
      <SocialCaption t={t} cues={CAPTIONS.slide_contabilidad}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideContabilidad });