// === Escena 01 — "Cinco sitios. Un pegamento: tú." · audio real 37.36s ===
// LOCUCIÓN: "Un lunes cualquiera en tu empresa. Un cliente pide precio por WhatsApp. El pedido
//   de otro está en un email. El albarán, en una libreta o en un excel. La factura, en otro
//   programa. Y el banco, en su web. Cinco sitios... y la única pieza que lo une todo es tu
//   cabeza. Así, delegar es imposible: nadie más sabe dónde está cada cosa. Y cuando alguien
//   deja la empresa, toca acordarse de quitarle el acceso... de todos y cada uno de esos sitios.
//   Te enseño cómo se ve ese mismo negocio cuando vive en un solo lugar."
// BEATS: 5 ventanas entran al nombrarlas (conector dibujándose hacia el nodo TU CABEZA) ·
//   nodo pulsa + jitter de conectores · conectores rojos (delegar) · 5 candados en cascada
//   lenta (el que se va) · franja azul cortinilla (el mundo nuevo empuja) → D2.
function Escena01({ t }){
  const T = {
    nodo:0.8,
    win:[4.0, 6.8, 10.0, 11.8, 13.0],         // WhatsApp · email · excel · programa · banco
    pulse:16.6, jitter:16.6, jitterEnd:20.4,
    rojo:20.6, rojoEnd:24.2,
    lock0:28.4, lockStep:0.7,
    franja:32.0, cortina:33.8,
  };
  const CX = 952, CY = 560;                    // centro del nodo

  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 pulseOn = t >= T.pulse && t < T.pulse+1.1;
  const pulse = pulseOn ? Math.sin((t-T.pulse)/1.1*Math.PI) : 0;
  const jitterOn = t >= T.jitter && t < T.jitterEnd;
  const jit = (i)=> jitterOn ? Math.sin(t*13 + i*2.1)*1.6 : 0;
  const rojoOn = t >= T.rojo && t < T.rojoEnd;
  const lockP = (i)=> clamp((t-(T.lock0+i*T.lockStep))/0.45, 0, 1);

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

  const connColor = rojoOn ? '#EF4444' : 'rgba(148,163,184,0.75)';

  // --- 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:'80%', background:'#D9FDD3', borderRadius:'10px 2px 10px 10px', padding:'7px 10px', fontSize:11, color:'#111B21', boxShadow:'0 1px 1px rgba(0,0,0,0.08)'}}>
            ahora te lo miro y te digo
            <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'}}>
            y lo del pedido de ayer?
            <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','Uds','Estado', '1','Compresor AC-40','2','pedido', '2','Filtro aire (caja)','12','??', '3','Correa 4PK-855','6','pedido', '4','Aceite 5W30 · 20L','4','FALTA', '5','Bujías (pack 4)','','—'].map((c,i)=>{
            const isHead = i < 4, col = i % 4, isFalta = c==='FALTA' || c==='??';
            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'}}>{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 (hook mudo) */}
      <div style={{position:'absolute', top:56, left:0, right:0, textAlign:'center', zIndex:8}}>
        <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={connColor} strokeWidth={rojoOn?2.5:1.8}
              strokeDasharray={`${len}`} strokeDashoffset={`${len*(1-Easing.easeInOutCubic(p))}`}
              style={{transition:'stroke 400ms'}}
              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;
        const lp = lockP(i), le = Easing.easeOutBack(lp);
        return (
          <div key={w.name} style={{position:'absolute', left:w.x, top:w.y, width:w.w, height:w.h, borderRadius:9, overflow:'visible', transform:`rotate(${w.rot}deg) scale(${lerp(0.7,1,e)}) translate(${jit(i)}px, ${jit(i+3)*0.7}px)`, opacity:clamp(p*1.3,0,1)*(lp>0?0.72:1), filter: lp>0.4?'saturate(0.55)':'none', transition:'filter 400ms', 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>
            {/* Candado del "quitar acceso" */}
            {lp > 0 && (
              <div style={{position:'absolute', right:-16, top:-16, width:46, height:46, borderRadius:100, background:'#DC2626', border:'3px solid #FCA5A5', display:'flex', alignItems:'center', justifyContent:'center', transform:`scale(${lerp(0.4,1,le)})`, opacity:clamp(lp*1.4,0,1), boxShadow:'0 10px 26px rgba(220,38,38,0.5)', zIndex:5}}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <rect x="5" y="10" width="14" height="10" rx="2" fill="#fff"/>
                  <path d="M8 10 V7 a4 4 0 0 1 8 0 v3" stroke="#fff" strokeWidth="2.4" fill="none"/>
                </svg>
              </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 ${rojoOn?'rgba(239,68,68,0.7)':'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)`:''}`, transition:'border 400ms'}}>
            <span style={{width:11, height:11, borderRadius:100, background: rojoOn?'#EF4444':'#F59E0B', boxShadow:`0 0 12px ${rojoOn?'#EF4444':'#F59E0B'}`, transition:'background 400ms'}}/>
            <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.pulse)/0.5,0,1)}}>el único que sabe dónde está todo</div>
        </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', boxShadow:'0 -18px 60px rgba(0,133,255,0.45)'}}>
          {cortinaP > 0.35 && (
            <div style={{opacity:clamp((cortinaP-0.35)/0.4,0,1), transform:`scale(${lerp(0.85,1,Easing.easeOutCubic(clamp((cortinaP-0.35)/0.5,0,1)))})`}}>
              <DinaupLogo size={54} style={{filter:'brightness(0) invert(1)'}}/>
            </div>
          )}
        </div>
      )}

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