// === Escena 06 — "Ponte al día" · audio real 27.27s ===
// LOCUCIÓN: "Cada mañana, al abrir Dinaup, la pantalla de ponerte al día: qué hay pendiente,
//   qué falta, por dónde empezar. Y fíjate en esto, porque es de lo mejor: también vigila lo
//   que no ha llegado. ¿Vodafone no ha mandado la de octubre? Aviso. ¿La de Endesa viene más
//   cara de lo normal? Aviso. Esos huecos antes los descubría tu gestor en febrero... ahora
//   los ves tú el día que pasan. Y hablando de tu gestor..."
// UI: herencia de slide-home.jsx del master — semáforos de pendientes + recurrentes vigilados.
// BEATS: filas+semáforos en cascada · panel recurrentes expande · ✕ Vodafone·oct estampa con
//   la voz · ! Endesa estampa · doble pulso · slide-out (puente físico hacia la E07).
function Escena08({ t }){
  const T = {
    win:       0.2,  // "Cada mañana"                          → ventana
    rows0:     2.4,  // "la pantalla de ponerte al día"        → filas
    rowStep:  0.47,                                          // (incremento, no instante)
    sem0:      3.5,                                          // (apoyo) semáforo
    expand:    10.1,  // "también vigila lo que no ha llegado"  → expande
    mat0:      10.7,                                          // (apoyo) matriz
    vodX:     13.1,  // "Vodafone no ha mandado"               → X de Vodafone
    vodAviso: 13.8,                                          // (apoyo) aviso 1
    endX:     17.2,  // "La de Endesa"                         → X de Endesa
    endAviso: 17.9,                                          // (apoyo) aviso 2
    pulso:    25.3,  // "ahora los ves tú el día que pasan"    → pulso
    out:      27.6,  // "Y hablando de tu gestor"              → salida
  };
  const winP = clamp((t-T.win)/0.6, 0, 1), winE = Easing.easeOutCubic(winP);
  const pct = useCountUp(0, 67, 1.9, 2.6, 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 expand = clamp((t-T.expand)/0.7, 0, 1), expandE = Easing.easeOutCubic(expand);
  const PROVIDERS = ['Endesa','Vodafone','Alquiler','Gestoría','Movistar'];
  const MONTHS = ['jun','jul','ago','sep','oct','nov'];
  // 'g' verde · 'o' ámbar (Endesa jul) · 'r' rojo (Vodafone oct) — los dos problemas llegan tarde
  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 vodP = clamp((t-T.vodX)/0.45, 0, 1), vodE = Easing.easeOutBack(vodP);
  const endP = clamp((t-T.endX)/0.45, 0, 1), endE = Easing.easeOutBack(endP);
  const vodAvP = clamp((t-T.vodAviso)/0.45, 0, 1);
  const endAvP = clamp((t-T.endAviso)/0.45, 0, 1);
  const pulseOn = t >= T.pulso && t < T.pulso+0.9;
  const pulse = pulseOn ? Math.sin((t-T.pulso)/0.9*Math.PI) : 0;

  const outP = clamp((t-T.out)/1.4, 0, 1), outE = Easing.easeInOutCubic(outP);

  const semColor = (s)=> s==='ok' ? '#10B981' : s==='warn' ? '#F59E0B' : '#EF4444';

  return (
    <SlideCanvas variant="light-soft">
      <div style={{position:'absolute', left:200, top:110, width:1520, height:860, background:'#fff', borderRadius:14, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:'0 40px 100px rgba(0,133,255,0.15), 0 10px 26px rgba(15,23,42,0.09)', opacity:winP*(1-outP), transform:`translateY(${(1-winE)*26}px) translateX(${outE*-260}px) scale(${lerp(0.975,1,winE)})`}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/PonerseAlDia" title="Dinaup — Ponerse al día"/>
        <DinaupAppHeader breadcrumb={["Pymes","Ponerse al día"]}/>
        <div style={{padding:'16px 30px', display:'flex', gap:26, height:'calc(100% - 136px)'}}>

          {/* Semáforos de pendientes */}
          <div style={{flex: 2 - 0.85*expandE, minWidth:0}}>
            <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:16}}>
              <div>
                <div className="f-plex" style={{fontSize:21, 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:'#0085FF', lineHeight:1}}>{pct}<span style={{fontSize:20, color:'#64748B'}}>%</span></div>
                <div className="f-mono" style={{fontSize:9, color:'#94A3B8', letterSpacing:'1.5px'}}>COMPLETADO</div>
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {ROWS.map((r,i)=>{
                const ep = clamp((t-(T.rows0+i*T.rowStep))/0.4, 0, 1);
                const e = Easing.easeOutCubic(ep);
                const semP = clamp((t-(T.sem0+i*T.rowStep))/0.3, 0, 1);
                const col = semP < 0.5 ? '#CBD5E1' : semColor(r.s);
                const semPulse = semP>0.5 && semP<1 ? 1 + Math.sin((semP-0.5)*2*Math.PI)*0.15 : 1;
                return (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:13, padding:'12px 15px', background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:10, opacity:clamp(ep*1.3,0,1), transform:`translateX(${(1-e)*-24}px)`}}>
                    <span className="f-mono" style={{fontSize:11, color:'#94A3B8', width:14}}>{r.n}</span>
                    <span style={{width:12, height:12, borderRadius:100, background:col, transform:`scale(${semPulse})`, boxShadow: semP>0.5&&semP<1?`0 0 0 5px ${col}33`:'none', flexShrink:0}}/>
                    <div style={{flex:1, minWidth:0}}>
                      <div className="f-plex" style={{fontSize:13.5, 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>
                    <span style={{border:'1px solid #E2E8F0', background:'#fff', color:'#0085FF', padding:'4px 12px', borderRadius:7, fontSize:10.5, fontWeight:700, flexShrink:0}}>→ Ir</span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Recurrentes vigilados (expande) */}
          {expand > 0 && (
            <div style={{flex:1, opacity:expand, transform:`translateX(${(1-expandE)*36}px)`, borderLeft:'1px solid #E2E8F0', paddingLeft:26, minWidth:430}}>
              <div className="f-plex" style={{fontSize:15, fontWeight:700, color:'#0F172A', marginBottom:3}}>Proveedores recurrentes</div>
              <div style={{fontSize:11.5, color:'#64748B', marginBottom:10}}>Últimos 6 meses · ¿llegó la factura?</div>
              <div style={{display:'grid', gridTemplateColumns:'86px 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.5, fontWeight:600, color:'#334155'}}>{p}</div>
                    {MATRIX[ri].map((cell,ci)=>{
                      const isVod = ri===1 && ci===4, isEnd = ri===0 && ci===1;
                      // Las celdas problema llegan con SU beat de voz; el resto en cascada diagonal
                      let cp, e, col, bg, ic;
                      if (isVod){ cp = vodP; e = vodE; col='#EF4444'; bg='rgba(239,68,68,0.18)'; ic='✕'; }
                      else if (isEnd){ cp = endP; e = endE; col='#F59E0B'; bg='rgba(245,158,11,0.2)'; ic='!'; }
                      else { cp = clamp((t-(T.mat0+ri*0.13+ci*0.05))/0.3, 0, 1); e = Easing.easeOutBack(cp); col='#10B981'; bg='rgba(16,185,129,0.14)'; ic='✓'; }
                      const hot = (isVod && pulseOn) || (isEnd && pulseOn);
                      return (
                        <div key={ci} style={{aspectRatio:'1', background:bg, border:`1.5px solid ${col}66`, borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', color:col, fontSize: (isVod||isEnd)?14:11, fontWeight:800, transform:`scale(${lerp(0,1,e) * (hot?1+pulse*0.14:1)})`, opacity:clamp(cp*1.3,0,1), boxShadow: hot?`0 0 0 ${4*pulse}px ${col}33`:'none'}}>{ic}</div>
                      );
                    })}
                  </React.Fragment>
                ))}
              </div>

              {/* Avisos */}
              <div style={{marginTop:10, display:'flex', flexDirection:'column', gap:7}}>
                {vodAvP > 0 && (
                  <div style={{padding:'8px 13px', background:'rgba(239,68,68,0.05)', borderRadius:9, border:'1.5px dashed rgba(239,68,68,0.4)', opacity:clamp(vodAvP*1.3,0,1), transform:`translateY(${(1-Easing.easeOutBack(vodAvP))*-14}px) scale(${pulseOn?1+pulse*0.03:1})`}}>
                    <span className="f-plex" style={{fontSize:12, color:'#DC2626', fontWeight:700}}>⚠ Vodafone · octubre · sin factura</span>
                  </div>
                )}
                {endAvP > 0 && (
                  <div style={{padding:'8px 13px', background:'rgba(245,158,11,0.06)', borderRadius:9, border:'1.5px dashed rgba(245,158,11,0.45)', opacity:clamp(endAvP*1.3,0,1), transform:`translateY(${(1-Easing.easeOutBack(endAvP))*-14}px) scale(${pulseOn?1+pulse*0.03:1})`}}>
                    <span className="f-plex" style={{fontSize:12, color:'#B45309', fontWeight:700}}>⚠ Endesa · julio · importe atípico <span className="f-mono">(+68%)</span></span>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>

    </SlideCanvas>
  );
}
Object.assign(window, { Escena08 });