// === Slide 01 — "Un lunes cualquiera" — caos de 01-pyme + remate de la contradicción ===
// LOCUCIÓN (bloque 1, audio real 46.72s): las 5 ventanas al nombrarlas · nodo TU CABEZA ·
//   la contradicción: WhatsApp «mil ciento ochenta» [23.39] · programa «mil doscientos
//   cuarenta» [27.47] · Excel «da error, y sin guardar» [30.86] · «la misma venta, tres
//   números distintos» [35.31] · «no tienes una versión de la verdad, tienes cinco» [40.68] ·
//   «¿y si todo esto viviera en un solo sitio?» [44.06] → cortinilla azul + Dinaup.
function Slide01({ t }){
  const T = {
    title:0.3, nodo:1.0,
    win:[1.81, 4.69, 8.34, 10.68, 13.30],   // WhatsApp · email · Excel · programa · banco
    nodoLabel:16.0,                          // «el único que los junta, eres tú»
    mira:19.69,                              // «aquí está el lío de verdad»
    cw:23.39, cp:27.47, ce:30.86,            // callouts: 1.180 · 1.240 · error
    juntos:35.31,                            // «la misma venta, tres números distintos» → los 3 pulsan
    verdad:40.68,                            // «no tienes una versión de la verdad»
    franja:44.06, cortina:45.6,
  };
  const CX = 952, CY = 560;

  const WINS = [
    { name:'whatsapp', x:170,  y:225, w:330, h:225, rot:-3 },
    { name:'email',    x:1345, y:210, w:345, h:220, rot:2.5 },
    { name:'excel',    x:150,  y:665, w:345, h:230, rot:2 },
    { name:'programa', x:1340, y:655, w:350, h:235, rot:-2 },
    { name:'banco',    x:800,  y:685, w:330, h:225, rot:-1.2 },
  ];
  const winP = (i)=> clamp((t-T.win[i])/0.55, 0, 1);
  const winE = (i)=> Easing.easeOutBack(winP(i));
  const connP = (i)=> clamp((t-(T.win[i]+0.25))/0.6, 0, 1);

  const nodoP = clamp((t-T.nodo)/0.5, 0, 1), nodoE = Easing.easeOutBack(nodoP);
  const labelOn = t >= T.nodoLabel;
  const pulseOn = t >= T.nodoLabel && t < T.nodoLabel+1.1;
  const pulse = pulseOn ? Math.sin((t-T.nodoLabel)/1.1*Math.PI) : 0;

  // Callouts de la contradicción
  const CALLOUTS = [
    { at:T.cw, val:'1.180 €',        tag:'dijiste en WhatsApp', col:'#B45309', bg:'#FEF3C7', bd:'#FCD34D', x:430,  y:398 },
    { at:T.cp, val:'1.240 €',        tag:'en el programa',      col:'#0066CC', bg:'#E0F2FE', bd:'#7DD3FC', x:1300, y:635 },
    { at:T.ce, val:'⚠ error',        tag:'Excel sin guardar',   col:'#DC2626', bg:'#FEE2E2', bd:'#FCA5A5', x:150,  y:640 },
  ];
  const juntosOn = t >= T.juntos && t < T.juntos+2.4;
  const juntosPulse = juntosOn ? 0.5+0.5*Math.sin((t-T.juntos)*4) : 0;

  const franjaP  = clamp((t-T.franja)/0.9, 0, 1), franjaE = Easing.easeOutCubic(franjaP);
  const cortinaP = clamp((t-T.cortina)/2.4, 0, 1), cortinaE = Easing.easeInOutQuad(cortinaP);

  // --- contenidos de cada ventana (UI simulada densa) ---
  const contenido = {
    whatsapp: (
      <div style={{height:'100%', background:'#ECE5DD', display:'flex', flexDirection:'column'}}>
        <div style={{height:44, background:'#075E54', display:'flex', alignItems:'center', gap:9, padding:'0 12px'}}>
          <div style={{width:26, height:26, borderRadius:100, background:'#128C7E', color:'#fff', fontSize:10, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center'}}>TS</div>
          <div>
            <div style={{fontSize:11.5, fontWeight:700, color:'#fff'}}>Talleres Sanz</div>
            <div style={{fontSize:8, color:'rgba(255,255,255,0.7)'}}>en línea</div>
          </div>
          <div style={{marginLeft:'auto', background:'#25D366', borderRadius:100, minWidth:18, height:18, fontSize:9.5, fontWeight:800, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', padding:'0 5px'}}>3</div>
        </div>
        <div style={{flex:1, padding:'10px 10px', display:'flex', flexDirection:'column', gap:6}}>
          <div style={{alignSelf:'flex-start', maxWidth:'85%', background:'#fff', borderRadius:'2px 10px 10px 10px', padding:'7px 10px', fontSize:11, color:'#111B21', boxShadow:'0 1px 1px rgba(0,0,0,0.08)'}}>
            ¿Me pasas precio del compresor?
            <span style={{fontSize:7.5, color:'#8696A0', marginLeft:6}}>10:42</span>
          </div>
          <div style={{alignSelf:'flex-end', maxWidth:'82%', background:'#D9FDD3', borderRadius:'10px 2px 10px 10px', padding:'7px 10px', fontSize:11, color:'#111B21', boxShadow:'0 1px 1px rgba(0,0,0,0.08)'}}>
            te lo dejo en <b>1.180 €</b>
            <span style={{fontSize:7.5, color:'#8696A0', marginLeft:6}}>10:44 ✓✓</span>
          </div>
          <div style={{alignSelf:'flex-start', maxWidth:'85%', background:'#fff', borderRadius:'2px 10px 10px 10px', padding:'7px 10px', fontSize:11, color:'#111B21'}}>
            vale, mándame factura
            <span style={{fontSize:7.5, color:'#8696A0', marginLeft:6}}>11:03</span>
          </div>
        </div>
      </div>
    ),
    email: (
      <div style={{height:'100%', background:'#fff', display:'flex', flexDirection:'column'}}>
        <div style={{height:34, background:'#F1F3F4', borderBottom:'1px solid #E2E8F0', display:'flex', alignItems:'center', padding:'0 12px', gap:8}}>
          <div style={{fontSize:10.5, fontWeight:700, color:'#334155'}}>Bandeja de entrada</div>
          <div className="f-mono" style={{marginLeft:'auto', fontSize:9, color:'#94A3B8'}}>47 sin leer</div>
        </div>
        <div style={{padding:'8px 12px', borderBottom:'1px solid #EEF2F7', background:'rgba(0,133,255,0.04)'}}>
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <span style={{fontSize:10.5, fontWeight:800, color:'#0F172A'}}>Distribuciones Vega</span>
            <span className="f-mono" style={{fontSize:8.5, color:'#94A3B8'}}>09:18</span>
          </div>
          <div style={{fontSize:10.5, fontWeight:700, color:'#1E293B', marginTop:2}}>Pedido urgente — confirmar hoy</div>
          <div style={{display:'flex', alignItems:'center', gap:5, marginTop:4}}>
            <span style={{fontSize:9, color:'#64748B'}}>📎</span>
            <span className="f-mono" style={{fontSize:8.5, color:'#475569', background:'#F1F5F9', border:'1px solid #E2E8F0', borderRadius:5, padding:'2px 7px'}}>pedido_oct.pdf</span>
          </div>
        </div>
        {[['Naturgy','Su factura de octubre','08:55'],['Asesoría López','Recordatorio: IVA antes del 20','08:12']].map((m,i)=>(
          <div key={i} style={{padding:'7px 12px', borderBottom:'1px solid #F1F5F9', opacity:0.75}}>
            <div style={{display:'flex', justifyContent:'space-between'}}>
              <span style={{fontSize:10, fontWeight:600, color:'#334155'}}>{m[0]}</span>
              <span className="f-mono" style={{fontSize:8.5, color:'#CBD5E1'}}>{m[2]}</span>
            </div>
            <div style={{fontSize:9.5, color:'#64748B', marginTop:1}}>{m[1]}</div>
          </div>
        ))}
      </div>
    ),
    excel: (
      <div style={{height:'100%', background:'#fff', display:'flex', flexDirection:'column'}}>
        <div style={{height:30, background:'#185C37', display:'flex', alignItems:'center', gap:8, padding:'0 10px'}}>
          <div style={{width:16, height:16, background:'#fff', borderRadius:3, color:'#185C37', fontSize:10, fontWeight:900, display:'flex', alignItems:'center', justifyContent:'center'}}>X</div>
          <span className="f-mono" style={{fontSize:9.5, color:'#fff', opacity:0.95}}>pedidos_v7.xlsx — Sin guardar</span>
        </div>
        <div style={{flex:1, display:'grid', gridTemplateColumns:'26px 1fr 64px 58px', gridAutoRows:24, fontSize:9.5}}>
          {['','Artículo','Precio','Estado', '1','Compresor AC-40','#¿REF!','pedido', '2','Filtro aire (caja)','12','??', '3','Correa 4PK-855','—','pedido', '4','Aceite 5W30 · 20L','','FALTA', '5','Bujías (pack 4)','','—'].map((c,i)=>{
            const isHead = i < 4, col = i % 4, isFalta = c==='FALTA' || c==='??' || c==='#¿REF!';
            return <div key={i} className={col>=2||isHead?'f-mono':''} style={{border:'0.5px solid #D7DCE2', padding:'3px 6px', background:isHead?'#DDEBF7':(isFalta?'#FEE2E2':'#fff'), fontWeight:isHead?700:(isFalta?800:400), color:isHead?'#1F3864':(isFalta?'#DC2626':'#334155'), display:'flex', alignItems:'center', justifyContent:col>=2&&!isHead?'center':'flex-start'}}>{c}</div>;
          })}
        </div>
        <div style={{height:22, borderTop:'1px solid #D7DCE2', display:'flex', alignItems:'center', gap:2, padding:'0 8px'}}>
          <span className="f-mono" style={{fontSize:8, background:'#fff', border:'1px solid #D7DCE2', borderBottom:'2px solid #185C37', padding:'1px 8px', color:'#185C37', fontWeight:700}}>Hoja1</span>
          <span className="f-mono" style={{fontSize:8, color:'#94A3B8', padding:'1px 8px'}}>Hoja1 (2)</span>
        </div>
      </div>
    ),
    programa: (
      <div style={{height:'100%', background:'#D4D0C8', display:'flex', flexDirection:'column', fontFamily:'Tahoma, sans-serif'}}>
        <div style={{height:26, background:'linear-gradient(180deg,#0A246A,#A6CAF0)', display:'flex', alignItems:'center', padding:'0 8px', gap:6}}>
          <span style={{fontSize:10, fontWeight:700, color:'#fff', textShadow:'1px 1px 0 rgba(0,0,0,0.4)'}}>FACTUPLUS 3.1 — Facturación</span>
          <div style={{marginLeft:'auto', display:'flex', gap:3}}>
            {['_','□','✕'].map((c,i)=><div key={i} style={{width:16, height:14, background:'#D4D0C8', border:'1px outset #fff', fontSize:8, textAlign:'center', lineHeight:'13px', color:'#000'}}>{c}</div>)}
          </div>
        </div>
        <div style={{height:20, background:'#D4D0C8', borderBottom:'1px solid #808080', display:'flex', gap:14, padding:'0 10px', alignItems:'center'}}>
          {['Archivo','Edición','Facturas','Listados','Ayuda'].map((m)=><span key={m} style={{fontSize:9.5, color:'#000'}}>{m}</span>)}
        </div>
        <div style={{flex:1, margin:8, background:'#fff', border:'2px inset #808080', padding:6}}>
          <table style={{width:'100%', borderCollapse:'collapse', fontSize:9}}>
            <thead><tr>{['Nº','Cliente','Total'].map((h)=><th key={h} style={{border:'1px solid #808080', background:'#C0C0C0', padding:'2px 5px', textAlign:'left', color:'#000'}}>{h}</th>)}</tr></thead>
            <tbody>
              {[['F-1204','Talleres Sanz','1.240,00'],['F-1203','Dist. Vega','386,50'],['F-1202','—','']].map((r,i)=>(
                <tr key={i}>{r.map((c,j)=><td key={j} style={{border:'1px solid #C0C0C0', padding:'2px 5px', color:'#000', fontWeight: i===0&&j===2?800:400}}>{c}</td>)}</tr>
              ))}
            </tbody>
          </table>
          <div style={{marginTop:6, fontSize:8.5, color:'#808080'}}>Módulo de cobros no instalado</div>
        </div>
      </div>
    ),
    banco: (
      <div style={{height:'100%', background:'#F4F5F7', display:'flex', flexDirection:'column'}}>
        <div style={{height:30, background:'#072146', display:'flex', alignItems:'center', gap:8, padding:'0 12px'}}>
          <span style={{fontSize:11, fontWeight:800, color:'#fff', letterSpacing:'0.5px'}}>BBVA</span>
          <span style={{fontSize:9, color:'rgba(255,255,255,0.7)'}}>Empresas</span>
        </div>
        <div style={{flex:1, position:'relative', padding:10}}>
          <div style={{opacity:0.35}}>
            {[1,2,3].map((i)=><div key={i} style={{height:22, background:'#fff', borderRadius:5, marginBottom:6, border:'1px solid #E2E8F0'}}/>)}
          </div>
          <div style={{position:'absolute', left:'50%', top:'46%', transform:'translate(-50%,-50%)', width:'82%', background:'#fff', borderRadius:8, boxShadow:'0 10px 30px rgba(0,0,0,0.25)', padding:'12px 14px', textAlign:'center'}}>
            <div style={{fontSize:11.5, fontWeight:800, color:'#072146'}}>Sesión caducada</div>
            <div style={{fontSize:9.5, color:'#64748B', marginTop:3}}>Por seguridad, vuelva a identificarse</div>
            <div style={{marginTop:8, background:'#028484', color:'#fff', borderRadius:100, fontSize:9.5, fontWeight:700, padding:'5px 0'}}>Entrar de nuevo</div>
          </div>
        </div>
      </div>
    ),
  };

  return (
    <SlideCanvas variant="problem">
      {/* Rótulo fijo desde el frame 0 */}
      <div style={{position:'absolute', top:56, left:0, right:0, textAlign:'center', zIndex:8, opacity:clamp((t-T.title)/0.5,0,1)}}>
        <div className="f-mono" style={{fontSize:13, letterSpacing:'3px', color:'#64748B', marginBottom:8}}>UN LUNES CUALQUIERA</div>
        <div className="f-plex" style={{fontSize:44, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em'}}>Cinco sitios. Un pegamento: tú.</div>
      </div>

      {/* Conectores nodo→ventana */}
      <svg style={{position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none'}} viewBox="0 0 1920 1080">
        {WINS.map((w,i)=>{
          const wx = w.x + w.w/2, wy = w.y + w.h/2;
          const len = Math.hypot(wx-CX, wy-CY);
          const p = connP(i);
          if (p <= 0) return null;
          return (
            <line key={i} x1={CX} y1={CY} x2={wx} y2={wy}
              stroke={labelOn?'rgba(148,163,184,0.75)':'rgba(148,163,184,0.55)'} strokeWidth={1.8}
              strokeDasharray={`${len}`} strokeDashoffset={`${len*(1-Easing.easeInOutCubic(p))}`} opacity={0.8}/>
          );
        })}
      </svg>

      {/* Las 5 ventanas del caos */}
      {WINS.map((w,i)=>{
        const p = winP(i), e = winE(i);
        if (p <= 0) return null;
        return (
          <div key={w.name} style={{position:'absolute', left:w.x, top:w.y, width:w.w, height:w.h, borderRadius:9, transform:`rotate(${w.rot}deg) scale(${lerp(0.7,1,e)})`, opacity:clamp(p*1.3,0,1), zIndex:3}}>
            <div style={{position:'absolute', inset:0, borderRadius:9, overflow:'hidden', boxShadow:'0 24px 60px rgba(0,0,0,0.45)', border:'1px solid rgba(255,255,255,0.09)'}}>
              {contenido[w.name]}
            </div>
          </div>
        );
      })}

      {/* Callouts de la contradicción — la misma venta, tres números */}
      {CALLOUTS.map((c,i)=>{
        const p = clamp((t-c.at)/0.4, 0, 1), e = Easing.easeOutBack(p);
        if (p <= 0) return null;
        const hot = juntosOn;
        return (
          <div key={i} style={{position:'absolute', left:c.x, top:c.y, zIndex:7, opacity:clamp(p*1.4,0,1), transform:`translateY(${(1-e)*-16}px) scale(${lerp(0.6,1,e) * (hot?1+juntosPulse*0.06:1)})`}}>
            <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:3, padding:'8px 15px', background:c.bg, border:`2px solid ${hot?'#EF4444':c.bd}`, borderRadius:12, boxShadow:`0 12px 30px rgba(15,23,42,0.28)${hot?`, 0 0 0 ${juntosPulse*8}px rgba(239,68,68,0.12)`:''}`}}>
              <span className="f-mono" style={{fontSize:20, fontWeight:800, color:c.col, lineHeight:1}}>{c.val}</span>
              <span className="f-plex" style={{fontSize:9.5, fontWeight:600, color:'#64748B'}}>{c.tag}</span>
            </div>
          </div>
        );
      })}

      {/* Nodo TU CABEZA */}
      {nodoP > 0 && (
        <div style={{position:'absolute', left:CX, top:CY, transform:`translate(-50%,-50%) scale(${lerp(0.6,1,nodoE) * (1+pulse*0.09)})`, opacity:clamp(nodoP*1.3,0,1), zIndex:6}}>
          <div style={{display:'flex', alignItems:'center', gap:11, padding:'15px 26px', background:'rgba(15,23,42,0.95)', border:`2px solid ${labelOn?'rgba(239,68,68,0.55)':'rgba(255,255,255,0.14)'}`, borderRadius:100, boxShadow:`0 18px 50px rgba(0,0,0,0.5)${pulseOn?`, 0 0 0 ${pulse*14}px rgba(239,68,68,0.12)`:''}`}}>
            <span style={{width:11, height:11, borderRadius:100, background: labelOn?'#EF4444':'#F59E0B', boxShadow:`0 0 12px ${labelOn?'#EF4444':'#F59E0B'}`}}/>
            <span className="f-mono" style={{fontSize:17, fontWeight:800, color:'#fff', letterSpacing:'2px'}}>TU CABEZA</span>
          </div>
          <div className="f-mono" style={{textAlign:'center', fontSize:10, color:'#64748B', marginTop:8, letterSpacing:'1.5px', opacity:clamp((t-T.nodoLabel)/0.5,0,1)}}>el único que junta las cinco versiones</div>
        </div>
      )}

      {/* Veredicto: no hay una versión de la verdad */}
      {t >= T.verdad && (()=>{
        const p = clamp((t-T.verdad)/0.55, 0, 1), e = Easing.easeOutBack(p);
        return (
          <div style={{position:'absolute', left:0, right:0, top:CY+70, textAlign:'center', zIndex:9, opacity:clamp(p*1.3,0,1)*(1-franjaP), transform:`translateY(${(1-e)*14}px)`}}>
            <span className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', background:'rgba(255,255,255,0.9)', borderRadius:12, padding:'10px 24px', boxShadow:'0 14px 40px rgba(15,23,42,0.14)'}}>
              No hay una versión de la verdad. <span style={{color:'#DC2626'}}>Hay cinco.</span>
            </span>
          </div>
        );
      })()}

      {/* Franja azul + cortinilla hacia D2 */}
      {franjaP > 0 && (
        <div style={{position:'absolute', left:0, right:0, bottom:0, height:`${lerp(0,7,franjaE) + cortinaE*100}%`, background:'linear-gradient(180deg, #0085FF 0%, #0066CC 100%)', zIndex:10, display:'flex', alignItems:'center', justifyContent:'center', gap:20, boxShadow:'0 -18px 60px rgba(0,133,255,0.45)'}}>
          {cortinaP > 0.3 && (
            <div style={{display:'flex', alignItems:'center', gap:18, opacity:clamp((cortinaP-0.3)/0.4,0,1), transform:`scale(${lerp(0.85,1,Easing.easeOutCubic(clamp((cortinaP-0.3)/0.5,0,1)))})`}}>
              <DinaupLogo size={50} style={{filter:'brightness(0) invert(1)'}}/>
              <span className="f-plex" style={{fontSize:30, fontWeight:700, color:'#fff', letterSpacing:'-0.02em'}}>¿Y si todo viviera en un sitio?</span>
            </div>
          )}
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { Slide01 });