// === 11:30 · Te llaman (13s) — F2 → buscas "Acme" → ficha 360° en cascada ===

function SlideFicha360({ t }){
  const callAt = 0.5;
  const keyAt = 1.5, pressAt = 2.2;
  const searchAt = 2.6;
  const fichaAt = 4.6;

  const tabs = [
    { l:'Ventas',   icon:'📤', at:5.4, main:'12 facturas · 48.000 €', sub:'2 pendientes · 1.840 €', c:'#0085FF' },
    { l:'Compras',  icon:'📥', at:6.1, main:'También es tu proveedor', sub:'3 facturas recibidas este año', c:'#8B5CF6' },
    { l:'Bancos',   icon:'🏦', at:6.8, main:'3.200 €', sub:'última transferencia · 3 nov', c:'#10B981' },
    { l:'Análisis', icon:'📊', at:7.5, main:'Factura media 2.100 €', sub:'Paga siempre a 30 días', c:'#F59E0B' },
  ];

  const fichaP = clamp((t-fichaAt)/0.6, 0, 1);
  const fichaE = Easing.easeOutCubic(fichaP);

  return (
    <SlideCanvas variant="light-soft">
      <TimeBadge t={t} hora="11:30" label="Te llama un cliente"/>
      <DemoHeader t={t} eyebrow="CRM · FICHA 360°" title={<>Te llaman. <span className="grad-text">F2. Lo tienes todo.</span></>}/>

      {/* Toast llamada entrante */}
      {t >= callAt && (()=>{
        const p = clamp((t-callAt)/0.5, 0, 1);
        const e = Easing.easeOutBack(p);
        const ring = Math.sin(t*6)*0.5+0.5;
        return (
          <div style={{position:'absolute',top:44,right:60,zIndex:20,display:'flex',alignItems:'center',gap:12,padding:'12px 18px',background:'rgba(15,23,42,0.94)',border:'1px solid rgba(255,255,255,0.12)',borderRadius:14,boxShadow:'0 14px 38px rgba(15,23,42,0.3)',opacity:clamp(p*1.3,0,1),transform:`translateY(${(1-e)*-14}px)`}}>
            <div style={{position:'relative',width:36,height:36,borderRadius:100,background:'#10B981',display:'flex',alignItems:'center',justifyContent:'center',fontSize:16}}>
              📞
              <div style={{position:'absolute',inset:-4,borderRadius:100,border:'2px solid rgba(16,185,129,0.6)',transform:`scale(${1+ring*0.25})`,opacity:1-ring}}/>
            </div>
            <div>
              <div className="f-plex" style={{fontSize:13,fontWeight:700,color:'#fff'}}>Acme Corp · entrante</div>
              <div style={{fontSize:11,color:'rgba(255,255,255,0.6)'}}>«¿Cuánto os debemos exactamente?»</div>
            </div>
          </div>
        );
      })()}

      {/* Ventana */}
      <div style={{position:'absolute',top:185,left:250,right:250,bottom:60,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)}}>
        <BrowserChrome url="play.dinaup.com/App/CRM" title="CRM — Dinaup"/>
        <DinaupAppHeader breadcrumb={["CRM","Entidades"]}/>

        <div style={{position:'relative',height:'calc(100% - 142px)',background:'#F8FAFC'}}>

          {/* Estado inicial + hint de tecla */}
          {t < fichaAt + 0.25 && (
            <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:18,opacity:1 - clamp((t-fichaAt)/0.25,0,1)}}>
              {t >= keyAt && (
                <div style={{display:'flex',alignItems:'center',gap:14}}>
                  <KeyCap t={t} label="F2" start={keyAt} pressT={pressAt} size={62}/>
                  <span className="f-plex" style={{fontSize:16,color:'#64748B',opacity:clamp((t-keyAt-0.2)/0.4,0,1)}}>buscar cualquier entidad</span>
                </div>
              )}
              {/* Buscador */}
              {t >= searchAt && (()=>{
                const p = clamp((t-searchAt)/0.4, 0, 1);
                const e = Easing.easeOutBack(p);
                return (
                  <div style={{width:520,background:'#fff',border:'1px solid #E2E8F0',borderRadius:14,boxShadow:'0 24px 60px rgba(15,23,42,0.16)',overflow:'hidden',opacity:clamp(p*1.3,0,1),transform:`scale(${lerp(0.9,1,e)})`}}>
                    <div style={{display:'flex',alignItems:'center',gap:10,padding:'14px 18px',borderBottom:'1px solid #F1F5F9'}}>
                      <span style={{color:'#94A3B8',fontSize:15}}>🔍</span>
                      <span className="f-mono" style={{fontSize:15,color:'#0F172A'}}>
                        <Typewriter text="acme" start={searchAt+0.3} cps={9} t={t} caret/>
                      </span>
                    </div>
                    {t >= searchAt + 1.0 && (()=>{
                      const rp = clamp((t-searchAt-1.0)/0.3, 0, 1);
                      return (
                        <div style={{padding:'10px 14px',display:'flex',alignItems:'center',gap:12,background:'rgba(0,133,255,0.06)',borderLeft:'3px solid var(--dn-primary)',opacity:rp}}>
                          <div style={{width:34,height:34,borderRadius:8,background:'#0F172A',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,fontWeight:700}}>AC</div>
                          <div style={{flex:1}}>
                            <div className="f-plex" style={{fontSize:14,fontWeight:700,color:'#0F172A'}}>Acme Corp</div>
                            <div style={{fontSize:11,color:'#64748B'}}>B-84112233 · Madrid</div>
                          </div>
                          <span className="f-mono" style={{fontSize:10,color:'#94A3B8'}}>↵ abrir</span>
                        </div>
                      );
                    })()}
                  </div>
                );
              })()}
            </div>
          )}

          {/* Ficha 360° */}
          {t >= fichaAt && (
            <div style={{position:'absolute',inset:0,padding:'22px 30px',opacity:fichaE,transform:`translateY(${(1-fichaE)*16}px)`}}>
              {/* Header entidad */}
              <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:18}}>
                <div style={{width:54,height:54,borderRadius:12,background:'#0F172A',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:18,fontWeight:800}}>AC</div>
                <div style={{flex:1}}>
                  <div style={{display:'flex',alignItems:'center',gap:10}}>
                    <span className="f-plex" style={{fontSize:24,fontWeight:800,color:'#0F172A',letterSpacing:'-0.02em'}}>Acme Corp</span>
                    <StatusChip label="Cliente" color="primary" start={fichaAt+0.3} t={t}/>
                    <StatusChip label="Proveedor" color="warning" start={fichaAt+0.5} t={t}/>
                  </div>
                  <div className="f-mono" style={{fontSize:11,color:'#64748B',marginTop:3}}>B-84112233 · cliente desde 2021 · Madrid</div>
                </div>
                <button className="dn-btn ghost" style={{padding:'7px 14px',fontSize:12}}>✎ Editar</button>
                <button className="dn-btn" style={{padding:'7px 14px',fontSize:12}}>+ Venta rápida</button>
              </div>

              {/* 4 paneles en cascada */}
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,height:'calc(100% - 140px)'}}>
                {tabs.map((tab,i)=>{
                  const p = clamp((t-tab.at)/0.5, 0, 1);
                  const e = Easing.easeOutCubic(p);
                  const loading = p < 0.55;
                  return (
                    <div key={i} style={{background:'#fff',border:'1px solid #E2E8F0',borderRadius:12,padding:'16px 20px',opacity:e,transform:`translateY(${(1-e)*14}px)`,boxShadow:`0 8px 22px ${tab.c}14`,display:'flex',flexDirection:'column',gap:8}}>
                      <div style={{display:'flex',alignItems:'center',gap:8}}>
                        <span style={{fontSize:15}}>{tab.icon}</span>
                        <span className="f-mono" style={{fontSize:10,fontWeight:700,letterSpacing:1.5,color:'#94A3B8',textTransform:'uppercase'}}>{tab.l}</span>
                        <div style={{flex:1}}/>
                        {loading
                          ? <span style={{fontSize:12,color:'#94A3B8',animation:'defSpin360 1s linear infinite'}}>⟳</span>
                          : <span style={{fontSize:11,color:'#10B981'}}>●</span>}
                      </div>
                      {!loading && (
                        <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',gap:6}}>
                          <div className="f-plex" style={{fontSize:24,fontWeight:700,color:'#0F172A',letterSpacing:'-0.01em'}}>{tab.main}</div>
                          <div style={{fontSize:12.5,color: tab.l==='Ventas' ? '#D97706' : '#64748B',fontWeight: tab.l==='Ventas' ? 700 : 400}}>{tab.sub}</div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>

              {/* Respuesta */}
              {t >= 9.6 && (()=>{
                const p = clamp((t-9.6)/0.5, 0, 1);
                const e = Easing.easeOutBack(p);
                return (
                  <div style={{marginTop:14,padding:'12px 18px',background:'rgba(16,185,129,0.08)',border:'1px solid rgba(16,185,129,0.3)',borderRadius:10,display:'flex',alignItems:'center',gap:12,opacity:clamp(p*1.3,0,1),transform:`translateY(${(1-e)*10}px)`}}>
                    <span style={{fontSize:18}}>💬</span>
                    <span className="f-plex" style={{fontSize:15,fontWeight:600,color:'#0F172A'}}>
                      «Nos debéis <b style={{color:'#D97706'}}>1.840 €</b> de dos facturas. Vencen el día 30.» — <span style={{color:'#059669'}}>respondido en 10 segundos</span>
                    </span>
                  </div>
                );
              })()}
            </div>
          )}
        </div>
      </div>

      <style>{`@keyframes defSpin360{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}`}</style>
      <SocialCaption t={t} cues={CAPTIONS.slide_ficha360}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideFicha360 });