// === 08:30 · Ponerse al día (13s) — semáforos de pendientes + recurrentes vigilados ===

function SlideHome({ t }){
  const rows = [
    { n:'1', l:'Compras y gastos',       s:'warn',   d:'3 PDFs por digitalizar · 2 proveedores sin factura' },
    { n:'2', l:'Nóminas',                s:'ok',     d:'Todos los empleados con nómina del mes' },
    { n:'3', l:'Extractos bancarios',    s:'warn',   d:'BBVA: hace 8 días · Santander: hace 2 días' },
    { n:'4', l:'Clasificar movimientos', s:'danger', d:'47 movimientos sin clasificar' },
    { n:'5', l:'Conciliar',              s:'danger', d:'12 movimientos sin vincular' },
    { n:'6', l:'Asientos contables',     s:'warn',   d:'14 ventas, 8 compras pendientes' },
  ];
  const pct = useCountUp(0, 67, 1.8, 1.8, t);

  // === Panel «recurrentes vigilados» — barrido + resalte de anomalías, clavado a la voz ===
  const GRID_AT = 9.86;                         // «Y un aviso de los buenos:» [9.86]
  const expand  = clamp((t-GRID_AT)/0.7, 0, 1);
  const providers = ['Endesa','Vodafone','Alquiler','Gestoría','Movistar'];
  const months    = ['jun','jul','ago','sep','oct','nov'];
  // Dos golpes, cada uno clavado a una frase. Vodafone lo dice la voz; Endesa es el «y además».
  const STRIKE = { voda: 11.75, ende: 15.10 };  // [11.75] «Vodafone no ha mandado…» · [15.08] «Eso, antes…»
  const ANOM = {
    '1-4': { kind:'r', strike: STRIKE.voda },   // Vodafone · octubre — falta la factura
    '0-1': { kind:'o', strike: STRIKE.ende },   // Endesa · julio — importe atípico (la «alta»)
  };
  const KIND = {
    g: { col:'#10B981', bg:'rgba(16,185,129,0.14)', brd:'rgba(16,185,129,0.34)', ic:'✓' },
    r: { col:'#EF4444', bg:'rgba(239,68,68,0.16)',  brd:'rgba(239,68,68,0.60)',  ic:'✕' },
    o: { col:'#F59E0B', bg:'rgba(245,158,11,0.18)', brd:'rgba(245,158,11,0.62)', ic:'!' },
  };
  // Cuando un golpe está reciente, las verdes se atenúan para cederle el foco.
  const focus = clamp(1 - Math.min(Math.abs(t-STRIKE.voda), Math.abs(t-STRIKE.ende))/0.7, 0, 1);

  return (
    <SlideCanvas variant="light-soft">
      <TimeBadge t={t} hora="08:30" label="Café y a ver qué toca"/>
      <DemoHeader t={t} eyebrow="PYMES · PONERSE AL DÍA" title={<>Abres Dinaup. <span className="grad-text">Ya sabes qué toca.</span></>}/>

      <div style={{position:'absolute',top:170,left:280,right:280,bottom:60,background:'#fff',borderRadius:14,overflow:'hidden',boxShadow:'0 30px 80px rgba(0,133,255,0.15), 0 8px 20px rgba(15,23,42,0.06)',border:'1px solid #E2E8F0',opacity:clamp((t-0.3)/0.6,0,1)}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/PonerseAlDia"/>
        <DinaupAppHeader breadcrumb={["Pymes","Ponerse al día"]}/>
        <div style={{padding:'24px 30px',display:'flex',gap:26,height:'calc(100% - 142px)'}}>

          {/* Lista de pendientes con semáforos */}
          <div style={{flex: 2 - 0.85*expand}}>
            <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',marginBottom:16}}>
              <div>
                <div className="f-plex" style={{fontSize:20,fontWeight:700,color:'#0F172A'}}>¿Qué me toca ahora?</div>
                <div style={{fontSize:12,color:'#64748B',marginTop:3}}>No tienes que preguntarte por dónde empezar</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="f-mono" style={{fontSize:40,fontWeight:600,color:'var(--dn-primary)',lineHeight:1}}>{pct}<span style={{fontSize:20,color:'#64748B'}}>%</span></div>
                <div style={{fontSize:10,color:'#94A3B8',letterSpacing:1,textTransform:'uppercase'}}>Completado</div>
              </div>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:7}}>
              {rows.map((r,i)=>{
                const ep = clamp((t-(1.6+i*0.18))/0.4, 0, 1);      // lista — «qué toca» [1.15]
                const e  = Easing.easeOutCubic(ep);
                const semP = clamp((t-(4.8+i*0.14))/0.3, 0, 1);     // semáforos — «Tres facturas por digitalizar» [4.79]
                const semColor = semP < 0.5 ? '#CBD5E1' : (r.s==='ok'?'#10B981':r.s==='warn'?'#F59E0B':'#EF4444');
                const semPulse = semP>0.5 && semP<1 ? 1 + Math.sin((semP-0.5)*2*Math.PI)*0.1 : 1;
                // «Primera tarea del día: las facturas» [21.14] → señala la fila 1 al final.
                const nextP = i===0 ? clamp((t-21.0)/0.5, 0, 1) : 0;
                const nb = nextP>0 ? 0.5+0.5*Math.sin(t*3) : 0;
                return (
                  <div key={i} style={{display:'flex',alignItems:'center',gap:12,padding:'11px 14px',background:nextP>0?`rgba(0,133,255,${0.04+0.03*nb})`:'#F8FAFC',border:`1px solid ${nextP>0?'rgba(0,133,255,0.4)':'#E2E8F0'}`,borderRadius:10,opacity:e,transform:`translateX(${(1-e)*-20}px)`,boxShadow:nextP>0?`0 0 0 ${lerp(0,3,nextP)}px rgba(0,133,255,0.12)`:'none'}}>
                    <div className="f-mono" style={{fontSize:11,color:'#94A3B8',width:14}}>{r.n}</div>
                    <div style={{width:11,height:11,borderRadius:100,background:semColor,transform:`scale(${semPulse})`,boxShadow:semP>0.5&&semP<1?`0 0 0 4px ${semColor}33`:'none'}}/>
                    <div style={{flex:1,minWidth:0}}>
                      <div className="f-plex" style={{fontSize:13,fontWeight:600,color:'#0F172A'}}>{r.l}</div>
                      <div style={{fontSize:10.5,color:'#64748B',marginTop:1,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{r.d}</div>
                    </div>
                    <button style={{border:`1px solid ${nextP>0?'transparent':'#E2E8F0'}`,background:nextP>0?'var(--dn-primary)':'#fff',color:nextP>0?'#fff':'var(--dn-primary)',padding:'4px 11px',borderRadius:6,fontSize:10.5,fontWeight:600,flexShrink:0,boxShadow:nextP>0?'0 4px 12px rgba(0,133,255,0.3)':'none'}}>→ Ir</button>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Recurrentes vigilados — barrido de entrada + resalte de anomalías */}
          {expand > 0 && (
            <div style={{flex:1,opacity:expand,transform:`translateX(${(1-Easing.easeOutCubic(expand))*36}px)`,borderLeft:'1px solid #E2E8F0',paddingLeft:26}}>
              <div className="f-plex" style={{fontSize:14,fontWeight:700,color:'#0F172A',marginBottom:3}}>Proveedores recurrentes</div>
              <div style={{fontSize:11,color:'#64748B',marginBottom:13}}>Últimos 6 meses · ¿llegó la factura?</div>
              <div style={{display:'grid',gridTemplateColumns:'92px repeat(6, 1fr)',gap:5,alignItems:'center'}}>
                <div/>
                {months.map((m,ci)=>{
                  const hp = clamp((t-(GRID_AT+0.3+ci*0.06))/0.3, 0, 1);
                  return <div key={m} className="f-mono" style={{fontSize:9,color:'#94A3B8',textAlign:'center',textTransform:'uppercase',opacity:hp}}>{m}</div>;
                })}
                {providers.map((p,ri)=>{
                  const pr = clamp((t-(GRID_AT+0.35+ri*0.05))/0.4, 0, 1);
                  const pe = Easing.easeOutCubic(pr);
                  return (
                  <React.Fragment key={p}>
                    <div style={{fontSize:11,fontWeight:600,color:'#334155',opacity:clamp(pr*1.4,0,1),transform:`translateX(${(1-pe)*-8}px)`}}>{p}</div>
                    {months.map((m,ci)=>{
                      const an = ANOM[ri+'-'+ci];
                      const struck = an && t >= an.strike;
                      const K = KIND[struck ? an.kind : 'g'];
                      // barrido de entrada: las columnas se encienden de izquierda a derecha
                      const revAt = GRID_AT + 0.5 + ci*0.14 + ri*0.05;
                      const rp = clamp((t-revAt)/0.34, 0, 1);
                      const re = Easing.easeOutBack(rp);
                      const glint = rp>0.05 && rp<0.95 ? Math.sin(rp*Math.PI) : 0;   // destello al pasar el barrido
                      // golpe de anomalía: pop + respiración continua
                      let pop = 0, breathe = 0, sp = 0;
                      if (struck){
                        sp = clamp((t-an.strike)/0.42, 0, 1);
                        pop = Math.sin(sp*Math.PI)*0.34;                              // 1 → 1.34 → 1
                        breathe = sp>=1 ? Math.sin((t-an.strike)*2.1)*0.03 : 0;       // vida después del golpe
                      }
                      const cellScale = lerp(0.35,1,re) * (1 + pop + breathe);
                      const dim  = (!an && rp>=1) ? lerp(1, 0.4, focus) : 1;          // las verdes ceden el foco
                      const gGlow = struck ? (9 + 6*Math.sin((t-an.strike)*2.1)) : 0;
                      return (
                        <div key={ci} style={{position:'relative', aspectRatio:'1'}}>
                          {struck && [0,1].map(k=>{
                            const rpg = clamp((t-(an.strike+k*0.20))/0.6, 0, 1);
                            if (rpg<=0 || rpg>=1) return null;
                            return <div key={k} style={{position:'absolute',inset:-2,borderRadius:9,border:`2px solid ${K.col}`,transform:`scale(${lerp(1,2.0,Easing.easeOutCubic(rpg))})`,opacity:(1-rpg)*0.7,pointerEvents:'none'}}/>;
                          })}
                          <div style={{
                            position:'absolute',inset:0,
                            background:K.bg,
                            border:`${struck?2:1}px solid ${K.brd}`,
                            borderRadius:7,
                            display:'flex',alignItems:'center',justifyContent:'center',
                            color:K.col,fontSize:12,fontWeight:800,
                            transform:`scale(${cellScale})`,
                            opacity: clamp(rp*1.3,0,1) * dim,
                            boxShadow: struck ? `0 0 ${gGlow}px ${K.col}bb` : 'none',
                          }}>{K.ic}</div>
                          {glint>0 && <div style={{position:'absolute',inset:0,borderRadius:7,background:`rgba(255,255,255,${glint*0.55})`,pointerEvents:'none'}}/>}
                        </div>
                      );
                    })}
                  </React.Fragment>);
                })}
              </div>

              {/* Alertas — cabecera + cada línea entra con su golpe */}
              {(()=>{
                const headP = clamp((t-11.35)/0.4, 0, 1);
                if (headP<=0) return null;
                const lines = [
                  { p: clamp((t-11.95)/0.45,0,1), dot:'#EF4444', name:'Vodafone', tail:'octubre · falta la factura' },
                  { p: clamp((t-15.30)/0.45,0,1), dot:'#F59E0B', name:'Endesa',   tail:'julio · importe atípico (+68%)' },
                ];
                return (
                  <div style={{marginTop:15,padding:'12px 14px',background:'#fff',borderRadius:10,border:'1px solid #FEE2E2',boxShadow:'0 10px 28px rgba(239,68,68,0.08)',opacity:clamp(headP*1.3,0,1),transform:`translateY(${(1-Easing.easeOutCubic(headP))*10}px)`}}>
                    <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
                      <span style={{width:8,height:8,borderRadius:100,background:'#0085FF',boxShadow:`0 0 0 ${lerp(0,5,0.5+0.5*Math.sin(t*3.2))}px rgba(0,133,255,0.25)`,flexShrink:0}}/>
                      <span className="f-mono" style={{fontSize:9.5,fontWeight:700,letterSpacing:'2px',color:'#94A3B8',textTransform:'uppercase'}}>Detectado por Dinaup</span>
                    </div>
                    {lines.map((l,i)=>{
                      if (l.p<=0) return null;
                      const e  = Easing.easeOutCubic(clamp(l.p,0,1));
                      const dp = 0.5+0.5*Math.sin(t*3 + i);
                      return (
                        <div key={i} style={{display:'flex',alignItems:'center',gap:9,padding:'4px 0',opacity:e,transform:`translateX(${(1-e)*-14}px)`}}>
                          <span style={{width:9,height:9,borderRadius:100,background:l.dot,boxShadow:`0 0 0 ${lerp(0,5,dp)}px ${l.dot}33`,flexShrink:0}}/>
                          <div style={{fontSize:11.5,color:'#475569'}}><span style={{fontWeight:700,color:'#0F172A'}}>{l.name}</span> · {l.tail}</div>
                        </div>
                      );
                    })}
                  </div>
                );
              })()}
            </div>
          )}
        </div>
      </div>

    </SlideCanvas>
  );
}

Object.assign(window, { SlideHome });