// === 12:15 · Ventas (14s) — kanban drag + F6 venta rápida del mismo motor ===

function SlidePipeline({ t }){
  const show = (at, dur=0.5) => clamp((t-at)/dur, 0, 1);

  const cols = [
    { id:'cont', label:'Contactado',  color:'#64748B', bg:'#F1F5F9', count:5 },
    { id:'demo', label:'Demo',        color:'#0085FF', bg:'#DBEAFE', count:4 },
    { id:'prop', label:'Propuesta',   color:'#F59E0B', bg:'#FEF3C7', count:3 },
    { id:'neg',  label:'Negociación', color:'#8B5CF6', bg:'#EDE9FE', count:2 },
    { id:'gan',  label:'Ganada',      color:'#10B981', bg:'#D1FAE5', count:0 },
  ];
  const cards = {
    cont: [{ name:'Distrib. del Sur', val:'4.200 €',  prob:'15%' },{ name:'Logística Norte', val:'6.200 €', prob:'20%' }],
    demo: [{ name:'Grupo Vega',       val:'8.400 €',  prob:'35%', stale:true },{ name:'Hermanos Díaz', val:'9.800 €', prob:'40%' }],
    prop: [{ name:'Acme Corp',        val:'18.000 €', prob:'70%', id:'acme' },{ name:'Tecnimax', val:'12.500 €', prob:'55%' }],
    neg:  [{ name:'Central SL',       val:'14.400 €', prob:'80%' }],
    gan:  [],
  };

  const dragStart = 3.0, dragEnd = 5.0;
  const dragging = t >= dragStart && t < dragEnd;
  const dragDone = t >= dragEnd;

  const keyAt = 7.4, pressAt = 8.0;
  const dialogAt = 8.3;
  const emitAt = 10.4;
  const emitted = t >= emitAt + 0.3;

  return (
    <SlideCanvas variant="light-soft">
      <TimeBadge t={t} hora="12:15" label="Repaso del pipeline"/>
      <DemoHeader t={t} eyebrow="CRM · OPORTUNIDADES" title={<>Arrastras la oportunidad. <span className="grad-text">Y la facturas sin salir.</span></>}/>

      <div style={{position:'absolute',top:170,left:100,right:100,bottom:60,background:'#fff',borderRadius:12,boxShadow:'0 30px 80px rgba(0,133,255,0.15)',overflow:'hidden',border:'1px solid #E2E8F0',opacity:show(0.5,0.7)}}>
        <BrowserChrome url="play.dinaup.com/App/CRM/MyPipeLine"/>
        <DinaupAppHeader breadcrumb={["CRM","Pipeline"]}/>

        <div style={{padding:'14px 24px',background:'#FAFBFC',height:'calc(100% - 142px)',display:'flex',flexDirection:'column',gap:11,position:'relative'}}>

          {/* KPIs */}
          <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
            {[
              { l:'Pipeline Total', v:'129.400 €', c:'#2e7d32', at:1.0 },
              { l:'Ponderado',      v: dragDone ? '38.200 €' : '36.400 €', c:'#1565c0', at:1.15, shift:true },
              { l:'Abiertas',       v:'14', c:'#6a1b9a', at:1.3 },
              { l:'Cierre este mes',v:'4',  c:'#19AB00', at:1.45 },
              { l:'Estancadas',     v:'1',  c:'#bf360c', at:1.6 },
            ].map((k,i)=>{
              const p = clamp((t-k.at)/0.4,0,1);
              const hl = k.shift && t >= 5.0 && t < 7.0;
              return (
                <div key={i} style={{padding:'7px 13px',background: hl ? 'rgba(21,101,192,0.14)' : '#fff',border:`1px solid ${hl ? k.c : `${k.c}30`}`,borderRadius:8,opacity:p,display:'flex',alignItems:'center',gap:8}}>
                  <div style={{fontSize:9.5,color:'#94A3B8',letterSpacing:1,textTransform:'uppercase',fontWeight:700}}>{k.l}</div>
                  <div className="f-mono" style={{fontSize:13.5,fontWeight:700,color:k.c}}>{k.v}</div>
                </div>
              );
            })}
            <div style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:8,opacity:show(6.8,0.5)}}>
              <span style={{fontSize:11,color:'#64748B'}}>venta rápida</span>
              <KeyCap t={t} label="F6" start={keyAt} pressT={pressAt} size={36}/>
            </div>
          </div>

          {/* Columnas */}
          <div style={{flex:1,display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:10,minHeight:0,opacity: t>=dialogAt ? 0.45 : 1,transition:'opacity 350ms'}}>
            {cols.map((col,ci)=>{
              const cp = clamp((t-(1.0+ci*0.13))/0.4,0,1);
              return (
                <div key={col.id} style={{display:'flex',flexDirection:'column',opacity:cp}}>
                  <div style={{padding:'7px 11px',background:col.bg,border:`1px solid ${col.color}35`,borderRadius:8,marginBottom:7,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                    <div style={{fontSize:10.5,fontWeight:700,color:col.color,letterSpacing:0.8,textTransform:'uppercase'}}>{col.label}</div>
                    <div className="f-mono" style={{fontSize:10,fontWeight:700,color:col.color,background:'#fff',padding:'1px 7px',borderRadius:100}}>
                      {col.id==='prop' && dragDone ? col.count-1 : col.id==='neg' && dragDone && !emitted ? col.count+1 : col.id==='gan' && emitted ? col.count+1 : col.count}
                    </div>
                  </div>
                  <div style={{flex:1,display:'flex',flexDirection:'column',gap:6,background:'#F8FAFC',border:'1px solid #EEF2F7',borderRadius:8,padding:6}}>
                    {(cards[col.id]||[]).map((c,i)=>{
                      const isAcme = c.id === 'acme';
                      if (isAcme && (dragging || dragDone)) return null;
                      return (
                        <div key={i} style={{padding:'9px 11px',background: c.stale ? 'rgba(255,111,0,0.08)' : '#fff',border: c.stale ? '1px solid rgba(255,111,0,0.4)' : `1px solid ${col.color}35`,borderLeft:`3px solid ${c.stale ? '#FF6F00' : col.color}`,borderRadius:8,opacity:clamp((t-1.9-ci*0.1-i*0.1)/0.3,0,1)}}>
                          <div style={{fontSize:11.5,fontWeight:600,color:'#0F172A',marginBottom:3}}>{c.name}</div>
                          <div style={{display:'flex',alignItems:'center',gap:6,fontSize:10}}>
                            <span className="f-mono" style={{color:'#2e7d32',fontWeight:700}}>{c.val}</span>
                            <span style={{padding:'1px 6px',background:'rgba(21,101,192,0.1)',color:'#1565c0',borderRadius:100,fontSize:8.5,fontWeight:700}}>{c.prob}</span>
                          </div>
                          {c.stale && <div style={{marginTop:5,padding:'2px 7px',background:'rgba(255,111,0,0.15)',borderRadius:4,fontSize:8.5,color:'#BF360C',fontWeight:700}}>⚠️ Estancada 23 días</div>}
                        </div>
                      );
                    })}
                    {/* Acme aterrizando en Negociación */}
                    {col.id==='neg' && dragDone && !emitted && (
                      <div style={{padding:'9px 11px',background:'#fff',border:'1px solid rgba(139,92,246,0.5)',borderLeft:'3px solid #8B5CF6',borderRadius:8,animation:'defCardDrop 0.5s ease-out',boxShadow:'0 6px 18px rgba(139,92,246,0.2)'}}>
                        <div style={{fontSize:11.5,fontWeight:600,color:'#0F172A',marginBottom:3}}>Acme Corp</div>
                        <div style={{display:'flex',alignItems:'center',gap:6,fontSize:10}}>
                          <span className="f-mono" style={{color:'#2e7d32',fontWeight:700}}>18.000 €</span>
                          <span style={{padding:'1px 6px',background:'rgba(21,101,192,0.1)',color:'#1565c0',borderRadius:100,fontSize:8.5,fontWeight:700}}>95%</span>
                        </div>
                      </div>
                    )}
                    {/* Acme ganada tras emitir la factura */}
                    {col.id==='gan' && emitted && (
                      <div style={{padding:'9px 11px',background:'#fff',border:'1px solid rgba(16,185,129,0.5)',borderLeft:'3px solid #10B981',borderRadius:8,animation:'defCardDrop 0.5s ease-out',boxShadow:'0 6px 18px rgba(16,185,129,0.2)'}}>
                        <div style={{fontSize:11.5,fontWeight:600,color:'#0F172A',marginBottom:3}}>Acme Corp</div>
                        <div style={{display:'flex',alignItems:'center',gap:6,fontSize:10}}>
                          <span className="f-mono" style={{color:'#2e7d32',fontWeight:700}}>18.000 €</span>
                          <span style={{padding:'1px 6px',background:'rgba(16,185,129,0.12)',color:'#059669',borderRadius:100,fontSize:8.5,fontWeight:700}}>✓ Ganada</span>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>

          {/* Tarjeta volando */}
          {dragging && (()=>{
            const p = clamp((t-dragStart)/(dragEnd-dragStart), 0, 1);
            const e = Easing.easeInOutCubic(p);
            const x = lerp(697, 1037, e);
            const y = lerp(93, 151, e) - Math.sin(p*Math.PI)*26;
            return (
              <div style={{position:'absolute',left:x,top:y,width:300,padding:'9px 11px',background:'#fff',border:'2px solid #0085FF',borderLeft:'3px solid #F59E0B',borderRadius:8,boxShadow:'0 20px 50px rgba(0,133,255,0.3)',transform:`rotate(${lerp(0,3,p)}deg) scale(1.06)`,zIndex:10}}>
                <div style={{fontSize:11.5,fontWeight:600,color:'#0F172A',marginBottom:3}}>Acme Corp</div>
                <div style={{display:'flex',gap:6,fontSize:10}}><span className="f-mono" style={{color:'#2e7d32',fontWeight:700}}>18.000 €</span><span style={{padding:'1px 6px',background:'rgba(21,101,192,0.1)',color:'#1565c0',borderRadius:100,fontSize:8.5,fontWeight:700}}>70%</span></div>
              </div>
            );
          })()}

          {/* Modal Venta rápida (F6) */}
          {t >= dialogAt && (()=>{
            const p = clamp((t-dialogAt)/0.5, 0, 1);
            const e = Easing.easeOutBack(p);
            const pressing = t >= emitAt && t < emitAt + 0.3;
            return (
              <div style={{position:'absolute',left:'50%',top:'50%',transform:`translate(-50%,-52%) scale(${lerp(0.85,1,e)})`,opacity:clamp(p*1.3,0,1),width:480,background:'#fff',borderRadius:16,border:'1px solid #E2E8F0',boxShadow:'0 40px 100px rgba(15,23,42,0.3)',zIndex:20,overflow:'hidden'}}>
                <div style={{padding:'14px 20px',background:'#0F172A',display:'flex',alignItems:'center',gap:10}}>
                  <KeyCap t={t} label="F6" start={dialogAt} size={28}/>
                  <span className="f-plex" style={{fontSize:15,fontWeight:700,color:'#fff'}}>Venta rápida</span>
                  <span style={{marginLeft:'auto',color:'rgba(255,255,255,0.4)',fontSize:13}}>×</span>
                </div>
                <div style={{padding:'18px 20px',display:'flex',flexDirection:'column',gap:12}}>
                  <div style={{display:'flex',gap:10}}>
                    <div style={{flex:1,background:'#F8FAFC',border:'1px solid rgba(0,133,255,0.35)',borderRadius:8,padding:'9px 12px'}}>
                      <div className="f-mono" style={{fontSize:8.5,color:'#94A3B8',letterSpacing:1,textTransform:'uppercase',marginBottom:3}}>Cliente</div>
                      <div style={{fontSize:13,fontWeight:700,color:'#0F172A'}}>Acme Corp <span style={{fontSize:10,color:'#059669',fontWeight:600}}>· preseleccionado</span></div>
                    </div>
                    <div style={{width:130,background:'#F8FAFC',border:'1px solid #E2E8F0',borderRadius:8,padding:'9px 12px'}}>
                      <div className="f-mono" style={{fontSize:8.5,color:'#94A3B8',letterSpacing:1,textTransform:'uppercase',marginBottom:3}}>Importe</div>
                      <div className="f-mono" style={{fontSize:13,fontWeight:700,color:'#0F172A'}}>18.000 €</div>
                    </div>
                  </div>
                  <div style={{background:'#F8FAFC',border:'1px solid #E2E8F0',borderRadius:8,padding:'9px 12px',fontSize:12,color:'#334155'}}>
                    Implantación Dinaup · proyecto anual
                  </div>
                  <button className="dn-btn" style={{justifyContent:'center',padding:'11px',fontSize:13,background: emitted ? '#10B981' : 'var(--dn-primary)',transform: pressing ? 'scale(0.96)' : 'scale(1)',transition:'all 150ms'}}>
                    {emitted ? '✓ Factura F-2025-0252 emitida' : 'Emitir factura'}
                  </button>
                  {emitted && (()=>{
                    const tp = clamp((t-emitAt-0.5)/0.4, 0, 1);
                    return (
                      <div style={{display:'flex',alignItems:'center',gap:8,fontSize:11.5,color:'#059669',fontWeight:600,opacity:tp}}>
                        <span>⚡</span> Misma ficha. Mismo motor. El asiento ya está propuesto en Contabilidad.
                      </div>
                    );
                  })()}
                </div>
              </div>
            );
          })()}
        </div>
      </div>

      <style>{`
        @keyframes defValueFlash { 0%{background:rgba(21,101,192,0.2)} 100%{background:transparent} }
        @keyframes defCardDrop { 0%{transform:translateY(-15px) scale(1.05);opacity:0} 100%{transform:translateY(0) scale(1);opacity:1} }
      `}</style>
      <SocialCaption t={t} cues={CAPTIONS.slide_pipeline}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlidePipeline });