// === Escena 02 — "La fragmentación" · audio real 34.56s ===
// LOCUCIÓN: "Porque mientras tu programa hace lo suyo, la empresa se va fragmentando por los
//   bordes. El mismo dato se apunta aquí, en el excel... y en el grupo de WhatsApp: tres sitios,
//   tres valores, y ve tú a saber cuál es el bueno. Hay excels duplicados, con errores que nadie
//   ha visto. Sin copia de seguridad... viven en el ordenador de alguien. ¿Y si ese alguien se va
//   de la empresa? Mil accesos, mil sistemas, y a ver quién se acuerda de todos. El que entra
//   nuevo lo dice a la primera: ¿en serio esto va por WhatsApp?"
// BEATS: el chip-dato se TRIPLICA viajando a 3 huérfanos y MUTA (2,5h · 2h y pico · ¿3h?) ·
//   excel duplicado fantasma · badges de dolor (sin copia · PC de Luis) · pila de credenciales ·
//   burbuja del recién llegado. Continuidad: mismo lienzo de la E01 con los huérfanos ya puestos.
function Escena02({ t }){
  const T = {
    ensancha:  2.9,  // "la empresa se va fragmentando"        → ensancha
    dato:      6.3,  // "El mismo dato se apunta aquí"         → dato
    viaje:     [8.2, 9.4, 10.9],   // "en el excel" · "y en el grupo de WhatsApp" · "tres sitios"
    muta:      [11.9, 12.4, 13.0],                          // (apoyo) el dato muta
    interr:   13.9,  // "cuál es el bueno"                     → interrogante
    dup:      15.6,  // "Hay excels duplicados"                → duplicados
    nube:     19.7,  // "Sin copia de seguridad"               → nube tachada
    pc:       21.5,  // "viven en el ordenador de alguien"     → pc
    pcPulso:  24.6,  // "se va de la empresa"                  → pulso
    creds0:   26.1,  // "Mil accesos"                          → credenciales
    credsStep: 0.28,                                        // (incremento, no instante)
    burbuja:  33.0,  // "en serio esto va por WhatsApp"        → burbuja
  };
  const CX = 960, CY = 545;
  // Huérfanos: misma disposición que E01 (+ separación al "fragmentarse")
  const sep = Easing.easeInOutCubic(clamp((t-T.ensancha)/1.4, 0, 1)) * 34;
  const HUERFANOS = [
    { tipo:'excel',    x:200,  y:210, rot:-3,   w:300 },
    { tipo:'papel',    x:1430, y:200, rot:2.5,  w:270 },
    { tipo:'whatsapp', x:170,  y:660, rot:2,    w:280 },
    { tipo:'libreta',  x:1460, y:640, rot:-2.5, w:250 },
    { tipo:'hoja',     x:810,  y:770, rot:1.5,  w:300 },
  ];
  const off = (h)=>{
    const dx = (h.x+h.w/2)-CX, dy = (h.y+60)-CY;
    const len = Math.hypot(dx,dy) || 1;
    return { x: dx/len*sep, y: dy/len*sep };
  };

  // El dato y sus 3 clones (destinos: excel, whatsapp, libreta)
  const datoP = clamp((t-T.dato)/0.5, 0, 1), datoE = Easing.easeOutBack(datoP);
  const DESTINOS = [ {x:340, y:330}, {x:300, y:720}, {x:1560, y:700} ];
  const ORIGEN = { x:960, y:430 };
  const VALORES = [
    { v:'2,5 h',      c:'#334155' },
    { v:'2h y pico',  c:'#B45309' },
    { v:'¿3h?',       c:'#DC2626' },
  ];
  const viajeP = (i)=> clamp((t-T.viaje[i])/0.9, 0, 1);
  const mutaOn = (i)=> t >= T.muta[i];
  const mutaShake = (i)=> (t >= T.muta[i] && t < T.muta[i]+0.4) ? Math.sin((t-T.muta[i])*40)*2.2 : 0;
  const interrP = clamp((t-T.interr)/0.5, 0, 1);

  const dupP = clamp((t-T.dup)/0.7, 0, 1), dupE = Easing.easeOutCubic(dupP);
  const nubeP = clamp((t-T.nube)/0.5, 0, 1), nubeE = Easing.easeOutBack(nubeP);
  const pcP = clamp((t-T.pc)/0.5, 0, 1), pcE = Easing.easeOutBack(pcP);
  const pcPulsoOn = t >= T.pcPulso && t < T.pcPulso+1.1;
  const pcPulso = pcPulsoOn ? Math.sin((t-T.pcPulso)/1.1*Math.PI) : 0;
  const nCreds = Math.floor(clamp((t-T.creds0)/T.credsStep, 0, 6));
  const burbP = clamp((t-T.burbuja)/0.55, 0, 1), burbE = Easing.easeOutBack(burbP);

  return (
    <SlideCanvas variant="problem">
      <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}}>MIENTRAS TU PROGRAMA HACE LO SUYO</div>
        <div className="f-plex" style={{fontSize:44, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em'}}>La empresa se fragmenta por los bordes</div>
      </div>

      {/* GestWin atenuado al centro (continuidad E01) */}
      <div style={{position:'absolute', left:CX-220, top:CY-140, width:440, height:290, background:'#F1F3F5', borderRadius:10, border:'1px solid #C9CDD3', boxShadow:'0 20px 50px rgba(15,23,42,0.18)', opacity:0.4, filter:'saturate(0.4)', zIndex:2, overflow:'hidden'}}>
        <div style={{height:28, background:'linear-gradient(180deg,#E8EAED,#D7DADF)', display:'flex', alignItems:'center', gap:8, padding:'0 10px'}}>
          <div style={{width:15, height:15, borderRadius:4, background:'#5B6472', color:'#fff', fontSize:8, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>G</div>
          <span style={{fontSize:10.5, fontWeight:700, color:'#3F4854'}}>GestWin — Facturación</span>
        </div>
        <div style={{padding:10}}>{[0.9,0.75,0.85,0.6].map((w,i)=><div key={i} style={{height:14, width:`${w*100}%`, background:'#E5E7EB', borderRadius:4, marginBottom:7}}/>)}</div>
      </div>

      {/* Huérfanos (separándose) */}
      {HUERFANOS.map((h,i)=>{
        const o = off(h);
        return (
          <div key={i} style={{position:'absolute', left:h.x, top:h.y, transform:`translate(${o.x}px, ${o.y}px) rotate(${h.rot}deg)`, zIndex:4, filter:'drop-shadow(0 18px 34px rgba(15,23,42,0.25))'}}>
            <H03Ficha tipo={h.tipo} w={h.w}/>
            {/* Excel duplicado fantasma */}
            {i===0 && dupP > 0 && (
              <div style={{position:'absolute', left:18*dupE, top:14*dupE, width:h.w, opacity:0.55*dupP, transform:`rotate(${2.5*dupE}deg)`, zIndex:-1}}>
                <H03Ficha tipo="excel" w={h.w}/>
                <div className="f-mono" style={{position:'absolute', top:-12, right:-8, fontSize:9, fontWeight:800, color:'#DC2626', background:'#FEE2E2', border:'1px solid #FCA5A5', borderRadius:100, padding:'2px 9px', opacity:clamp((dupP-0.5)*2,0,1)}}>— copia (3)</div>
              </div>
            )}
            {/* Badge nube tachada (sin copia) sobre el excel */}
            {i===0 && nubeP > 0 && (
              <div style={{position:'absolute', right:-20, top:-24, display:'flex', alignItems:'center', gap:7, background:'#FEF2F2', border:'1.5px solid #FECACA', borderRadius:100, padding:'6px 14px', transform:`rotate(-2deg) scale(${lerp(0.6,1,nubeE)})`, opacity:clamp(nubeP*1.3,0,1), boxShadow:'0 10px 26px rgba(220,38,38,0.2)', zIndex:6}}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M7 18 a4.5 4.5 0 0 1 0-9 a5.5 5.5 0 0 1 10.5 1.5 a4 4 0 0 1 -0.5 7.5 z" stroke="#B91C1C" strokeWidth="1.8" fill="none"/>
                  <path d="M4 21 L20 4" stroke="#B91C1C" strokeWidth="2.2" strokeLinecap="round"/>
                </svg>
                <span className="f-plex" style={{fontSize:11.5, fontWeight:800, color:'#B91C1C'}}>Sin copia de seguridad</span>
              </div>
            )}
            {/* Badge "vive en el PC de Luis" sobre la hoja de turnos */}
            {i===4 && pcP > 0 && (
              <div style={{position:'absolute', left:-30, top:-26, display:'flex', alignItems:'center', gap:7, background:'#FEF2F2', border:`1.5px solid ${pcPulsoOn?`rgba(220,38,38,${0.5+pcPulso*0.4})`:'#FECACA'}`, borderRadius:100, padding:'6px 14px', transform:`rotate(1.5deg) scale(${lerp(0.6,1,pcE)*(pcPulsoOn?1+pcPulso*0.06:1)})`, opacity:clamp(pcP*1.3,0,1), boxShadow:`0 10px 26px rgba(220,38,38,${0.2+pcPulso*0.2})`, zIndex:6}}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                  <rect x="5" y="11" width="14" height="9" rx="2" fill="#B91C1C"/>
                  <path d="M8 11 V8 a4 4 0 0 1 8 0 v3" stroke="#B91C1C" strokeWidth="2" fill="none"/>
                </svg>
                <span className="f-plex" style={{fontSize:11.5, fontWeight:800, color:'#B91C1C'}}>vive en el PC de Luis</span>
              </div>
            )}
          </div>
        );
      })}

      {/* El dato protagonista + clones que viajan y mutan */}
      {datoP > 0 && (
        <div className="f-mono" style={{position:'absolute', left:ORIGEN.x, top:ORIGEN.y, transform:`translate(-50%,-50%) scale(${lerp(0.6,1,datoE)})`, background:'#0F172A', color:'#fff', fontSize:13, fontWeight:700, borderRadius:100, padding:'9px 20px', boxShadow:'0 14px 36px rgba(15,23,42,0.4)', opacity:clamp(datoP*1.3,0,1)*(t>T.viaje[2]+1.2?0.35:1), zIndex:7}}>
          Desmontaje motor · <span style={{color:'#56E16A'}}>2,5 h</span>
        </div>
      )}
      {DESTINOS.map((d,i)=>{
        const p = viajeP(i);
        if (p <= 0) return null;
        const e = Easing.easeInOutCubic(p);
        const x = lerp(ORIGEN.x, d.x, e), y = lerp(ORIGEN.y, d.y, e) - Math.sin(p*Math.PI)*70;
        const mutated = mutaOn(i);
        const shake = mutaShake(i);
        return (
          <div key={i} style={{position:'absolute', left:x+shake, top:y, transform:'translate(-50%,-50%)', zIndex:8}}>
            <div className="f-mono" style={{background: mutated?'#fff':'#0F172A', color: mutated?VALORES[i].c:'#fff', fontSize:12, fontWeight:800, borderRadius:100, padding:'7px 16px', border: mutated?`1.5px solid ${VALORES[i].c}55`:'none', boxShadow:'0 10px 28px rgba(15,23,42,0.3)', transition:'background 250ms, color 250ms'}}>
              {mutated ? VALORES[i].v : '2,5 h'}
            </div>
            {mutated && interrP > 0 && i>0 && (
              <span className="f-plex" style={{position:'absolute', right:-20, top:-16, fontSize:22, fontWeight:900, color:'#DC2626', opacity:clamp(interrP*1.3,0,1), transform:`scale(${lerp(0.5,1,Easing.easeOutBack(interrP))})`}}>?</span>
            )}
          </div>
        );
      })}
      {/* Etiqueta "tres sitios, tres valores" */}
      {interrP > 0 && (
        <div className="f-mono" style={{position:'absolute', left:'50%', top:346, transform:'translateX(-50%)', fontSize:12, color:'#DC2626', background:'rgba(254,242,242,0.9)', border:'1px dashed rgba(220,38,38,0.5)', borderRadius:100, padding:'5px 16px', opacity:clamp(interrP*1.2,0,1), zIndex:7}}>
        tres sitios · tres valores · ¿cuál es el bueno?
        </div>
      )}

      {/* Pila de credenciales (mil accesos) */}
      {nCreds > 0 && (
        <div style={{position:'absolute', right:120, top:392, zIndex:7}}>
          <div className="f-mono" style={{fontSize:9.5, color:'#94A3B8', letterSpacing:'1.5px', marginBottom:8, textAlign:'right'}}>MIL ACCESOS, MIL SISTEMAS</div>
          {[...Array(nCreds)].map((_,i)=>(
            <div key={i} className="f-mono" style={{display:'flex', alignItems:'center', gap:8, background:'#fff', border:'1px solid #E2E8F0', borderRadius:7, padding:'5px 12px', marginBottom:-6, transform:`rotate(${(i%2?1:-1)*(1.5+i*0.3)}deg) translateX(${(i%3)*6-6}px)`, boxShadow:'0 6px 16px rgba(15,23,42,0.12)', fontSize:9.5, color:'#475569'}}>
              <span style={{width:7, height:7, borderRadius:100, background:['#EF4444','#F59E0B','#8B5CF6','#0EA5E9'][i%4]}}/>
              {['drive · luis.taller','excel · portátil nave','fotos · móvil de Marta','wetransfer · ??','drive 2 · gerencia','usb · cajón','email · taller2014','carpeta · escritorio'][i]}
            </div>
          ))}
        </div>
      )}

      {/* Burbuja del recién llegado */}
      {burbP > 0 && (
        <div style={{position:'absolute', left:'50%', bottom:150, transform:`translateX(-50%) scale(${lerp(0.6,1,burbE)})`, display:'flex', alignItems:'center', gap:12, background:'#fff', borderRadius:'4px 18px 18px 18px', padding:'13px 22px', boxShadow:'0 22px 55px rgba(15,23,42,0.3)', border:'1px solid #E2E8F0', opacity:clamp(burbP*1.3,0,1), zIndex:9}}>
          <div style={{width:34, height:34, borderRadius:100, background:'#0EA5E9', color:'#fff', fontSize:11, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>N</div>
          <div>
            <div className="f-mono" style={{fontSize:8.5, color:'#94A3B8', letterSpacing:'1px'}}>EL NUEVO · primer día</div>
            <div className="f-plex" style={{fontSize:15.5, fontWeight:700, color:'#0F172A'}}>«¿En serio esto va por WhatsApp?»</div>
          </div>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { Escena02 });