// === 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.0, 1.8, t);
  const expandAt = 7.0;
  const expand = clamp((t-expandAt)/0.7, 0, 1);
  const providers = ['Endesa','Vodafone','Alquiler','Gestoría','Movistar'];
  const matrix = [
    ['g','o','g','g','g','g'],
    ['g','g','g','g','r','g'],
    ['g','g','g','g','g','g'],
    ['g','g','g','g','g','g'],
    ['g','g','g','g','g','g'],
  ];
  const months = ['jun','jul','ago','sep','oct','nov'];

  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.4)/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-(0.6+i*0.18))/0.4, 0, 1);
                const e  = Easing.easeOutCubic(ep);
                const semP = clamp((t-(4.8+i*0.14))/0.3, 0, 1);
                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;
                return (
                  <div key={i} style={{display:'flex',alignItems:'center',gap:12,padding:'11px 14px',background:'#F8FAFC',border:'1px solid #E2E8F0',borderRadius:10,opacity:e,transform:`translateX(${(1-e)*-20}px)`}}>
                    <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 #E2E8F0',background:'#fff',color:'var(--dn-primary)',padding:'4px 11px',borderRadius:6,fontSize:10.5,fontWeight:600,flexShrink:0}}>→ Ir</button>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Recurrentes vigilados */}
          {expand > 0 && (
            <div style={{flex:1,opacity:expand,transform:`translateX(${(1-expand)*30}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:4,alignItems:'center'}}>
                <div/>
                {months.map(m=><div key={m} className="f-mono" style={{fontSize:9,color:'#94A3B8',textAlign:'center',textTransform:'uppercase'}}>{m}</div>)}
                {providers.map((p,ri)=>(
                  <React.Fragment key={p}>
                    <div style={{fontSize:11,fontWeight:600,color:'#334155'}}>{p}</div>
                    {matrix[ri].map((cell,ci)=>{
                      const cp = clamp((t-(expandAt+0.9+ri*0.13+ci*0.045))/0.3, 0, 1);
                      const e  = Easing.easeOutBack(cp);
                      const col = cell==='g'?'#10B981':cell==='r'?'#EF4444':'#F59E0B';
                      const bg  = cell==='g'?'rgba(16,185,129,0.14)':cell==='r'?'rgba(239,68,68,0.18)':'rgba(245,158,11,0.2)';
                      const ic  = cell==='g'?'✓':cell==='r'?'✕':'!';
                      return (
                        <div key={ci} style={{aspectRatio:'1',background:bg,border:`1px solid ${col}55`,borderRadius:6,display:'flex',alignItems:'center',justifyContent:'center',color:col,fontSize:11,fontWeight:700,transform:`scale(${lerp(0,1,e)})`,opacity:clamp(cp*1.3,0,1)}}>{ic}</div>
                      );
                    })}
                  </React.Fragment>
                ))}
              </div>
              <div style={{marginTop:14,padding:'11px 13px',background:'rgba(239,68,68,0.05)',borderRadius:8,border:'1px dashed rgba(239,68,68,0.3)',opacity:clamp((t-expandAt-2.8)/0.5,0,1)}}>
                <div style={{fontSize:11,color:'#DC2626',fontWeight:600}}>⚠ Vodafone · octubre · sin factura</div>
                <div style={{fontSize:11,color:'#F59E0B',fontWeight:600,marginTop:3}}>⚠ Endesa · julio · importe atípico (+68% sobre la media)</div>
              </div>
            </div>
          )}
        </div>
      </div>

      <SocialCaption t={t} cues={CAPTIONS.slide_home}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideHome });