// === 19:42 · El trimestre (12s) — libros generados y enviados al asesor en un clic ===

function SlideTrimestre({ t }){
  const sendAt = 8.2;
  const sent = t >= sendAt + 0.3;
  const adj = [
    { n:'Libro Facturas Emitidas',  s:'142 KB' },
    { n:'Libro Facturas Recibidas', s:'198 KB' },
    { n:'Libro de IVA',             s:'84 KB'  },
    { n:'Extracto Bancario',        s:'64 KB'  },
  ];

  return (
    <SlideCanvas variant="light-soft">
      <TimeBadge t={t} hora="19:42" label="Último clic del día"/>
      <DemoHeader t={t} eyebrow="PYMES · CIERRE DE TRIMESTRE" title={<>El trimestre, al asesor: <span className="grad-text">un clic y enviado.</span></>}/>

      {/* Generación del paquete */}
      <div style={{position:'absolute',top:290,left:315,width:490,opacity:clamp((t-0.6)/0.5,0,1),transform:`translateY(${(1-Easing.easeOutCubic(clamp((t-0.6)/0.5,0,1)))*16}px)`}}>
        <div style={{background:'#fff',border:'1px solid #E2E8F0',borderRadius:14,boxShadow:'0 24px 60px rgba(0,133,255,0.12)',padding:'22px 24px'}}>
          <div className="f-mono" style={{fontSize:10,fontWeight:700,letterSpacing:2,color:'#94A3B8',textTransform:'uppercase',marginBottom:14}}>Dinaup genera · Q4 2025</div>
          {adj.map((a,i)=>{
            const p = clamp((t-(2.4+i*0.45))/0.5, 0, 1);
            const e = Easing.easeOutCubic(p);
            const building = p > 0 && p < 0.85;
            return (
              <div key={i} style={{display:'flex',alignItems:'center',gap:11,padding:'11px 13px',marginBottom:8,background:'#F8FAFC',border:`1px solid ${p>=0.85 ? 'rgba(16,185,129,0.35)' : '#E2E8F0'}`,borderRadius:9,opacity:e,transform:`translateX(${(1-e)*-16}px)`,transition:'border-color 300ms'}}>
                <div style={{width:26,height:30,background:'#10B981',borderRadius:3,display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontSize:8,fontWeight:700,flexShrink:0}}>XLS</div>
                <div style={{flex:1}}>
                  <div className="f-plex" style={{fontSize:13,fontWeight:600,color:'#0F172A'}}>{a.n}.xlsx</div>
                  <div className="f-mono" style={{fontSize:10,color:'#94A3B8'}}>{building ? 'generando…' : `✓ listo · ${a.s}`}</div>
                </div>
                {building
                  ? <span style={{fontSize:13,color:'var(--dn-primary)',animation:'defSpinQ 1s linear infinite'}}>⟳</span>
                  : <span style={{fontSize:13,color:'#10B981'}}>✓</span>}
              </div>
            );
          })}
          <div style={{marginTop:6,fontSize:11.5,color:'#64748B',lineHeight:1.5}}>
            Salen de lo que ya hiciste durante el día. <b style={{color:'#0F172A'}}>Nada que buscar.</b>
          </div>
        </div>
      </div>

      {/* Flecha */}
      <div style={{position:'absolute',top:443,left:835,opacity:clamp((t-3.4)/0.5,0,1)}}>
        <svg width="90" height="24" viewBox="0 0 90 24">
          <path d="M4 12 H74 M62 4 L74 12 L62 20" stroke="var(--dn-primary)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
        </svg>
      </div>

      {/* Email */}
      <div style={{position:'absolute',top:290,left:965,width:640,opacity:clamp((t-3.6)/0.5,0,1),transform:`translateY(${(1-Easing.easeOutCubic(clamp((t-3.6)/0.5,0,1)))*16}px)`}}>
        <div style={{background:'#fff',borderRadius:14,border:'1px solid #E2E8F0',boxShadow:'0 24px 60px rgba(139,92,246,0.12)',overflow:'hidden'}}>
          <div style={{padding:'11px 18px',background:'#0F172A',color:'#fff',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <div style={{fontSize:13,fontWeight:600}}>Nuevo mensaje</div>
            <div style={{display:'flex',gap:8,fontSize:11,color:'rgba(255,255,255,0.5)'}}>— □ ×</div>
          </div>
          <div style={{padding:'14px 20px'}}>
            <div style={{display:'flex',borderBottom:'1px solid #F1F5F9',padding:'9px 0',fontSize:13,alignItems:'center',gap:10}}>
              <div style={{color:'#64748B',width:60}}>Para:</div>
              <div className="f-mono" style={{color:'#0F172A',fontSize:12}}>
                <Typewriter text="asesor@gestoria-lopez.com" start={4.2} cps={30} t={t}/>
              </div>
            </div>
            <div style={{display:'flex',borderBottom:'1px solid #F1F5F9',padding:'9px 0',fontSize:13,alignItems:'center',gap:10}}>
              <div style={{color:'#64748B',width:60}}>Asunto:</div>
              <div style={{color:'#0F172A',fontWeight:600,fontSize:13}}>
                <Typewriter text="Libros Q4 2025 · Panadería El Molino" start={5.3} cps={30} t={t}/>
              </div>
            </div>
            {/* Adjuntos */}
            {t >= 5.2 && (()=>{
              const p = clamp((t-5.2)/0.4, 0, 1);
              return (
                <div style={{marginTop:12,opacity:p}}>
                  <div style={{fontSize:10,color:'#94A3B8',letterSpacing:1,fontWeight:600,marginBottom:6}}>4 ADJUNTOS · 488 KB</div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:6}}>
                    {adj.map((a,i)=>{
                      const pi = clamp((t-5.3-i*0.25)/0.35, 0, 1);
                      return (
                        <div key={i} style={{display:'flex',alignItems:'center',gap:8,padding:'7px 10px',background:'#F8FAFC',border:'1px solid #E2E8F0',borderRadius:6,fontSize:11,opacity:pi}}>
                          <div style={{width:18,height:22,background:'#10B981',borderRadius:2,display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontSize:6.5,fontWeight:700,flexShrink:0}}>XLS</div>
                          <span style={{fontWeight:500,color:'#0F172A',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{a.n}.xlsx</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })()}
            {/* Enviar */}
            <div style={{marginTop:14,display:'flex',justifyContent:'flex-end',alignItems:'center',gap:12}}>
              {sent && (()=>{
                const p = clamp((t-sendAt-0.5)/0.4, 0, 1);
                const e = Easing.easeOutBack(p);
                return (
                  <span style={{display:'inline-flex',alignItems:'center',gap:8,fontSize:12,color:'#059669',fontWeight:600,opacity:clamp(p*1.3,0,1),transform:`translateX(${(1-e)*10}px)`}}>
                    ✓ El asesor ya tiene todo el trimestre
                  </span>
                );
              })()}
              <button className="dn-btn" style={{
                padding:'9px 24px',fontSize:13,
                transform: t >= sendAt && t < sendAt+0.3 ? 'scale(0.95)' : 'scale(1)',
                background: sent ? '#10B981' : 'var(--dn-primary)',
                animation: t >= 7.2 && t < sendAt ? 'defSendPulse 1.2s ease-in-out infinite' : 'none',
                transition:'all 150ms',
              }}>
                {sent ? '✓ Enviado' : 'Enviar ✉'}
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Remate */}
      <div style={{position:'absolute',left:0,right:0,bottom:205,textAlign:'center',opacity:clamp((t-10.2)/0.5,0,1)}}>
        <div className="f-plex" style={{fontSize:22,fontWeight:500,color:'#0F172A',letterSpacing:'-0.015em'}}>
          Se acabó el <span style={{color:'#64748B',fontStyle:'italic'}}>«mándame las facturas de octubre»</span>.
        </div>
      </div>

      <style>{`
        @keyframes defSpinQ{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
        @keyframes defSendPulse{0%,100%{box-shadow:0 4px 14px rgba(0,133,255,0.3)}50%{box-shadow:0 4px 22px rgba(0,133,255,0.6)}}
      `}</style>
      <SocialCaption t={t} cues={CAPTIONS.slide_trimestre}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideTrimestre });