// === Escena 01 — "El enjambre" · audio real 34.98s ===
// LOCUCIÓN: "Tu programa de facturación ya lo tienes. Mejor o peor, hace su papel... y hoy no es
//   donde está el fuego. El fuego está en todo lo demás: el excel de los tiempos, las
//   autorizaciones en papel, los partes de trabajo por WhatsApp, el checklist de calidad en una
//   libreta, los turnos en otra hoja. Procesos que no caben en tu programa y se buscaron la vida.
//   Y casi nunca es uno... es un enjambre. Pues de eso vengo a hablarte. De todo eso... y de nada más."
// BEATS: GestWin entra al centro (sin rebote — no es Dinaup) · aro ESTO NO SE TOCA · 5 huérfanos
//   uno por mención (easeOutBack) · órbita colectiva ("enjambre") · pulso final + GestWin atenuado.
// Exporta H03Ficha (fichas huérfano) para las escenas 02 y 07.

// --- Ficha huérfano compartida del deck 03 (pura, sin timing) ---
function H03Ficha({ tipo, w=300 }){
  const estilos = {
    excel: (
      <div style={{background:'#fff', borderRadius:8, overflow:'hidden', border:'1px solid #C9CFD6'}}>
        <div style={{height:26, background:'#185C37', display:'flex', alignItems:'center', gap:7, padding:'0 9px'}}>
          <div style={{width:14, height:14, background:'#fff', borderRadius:3, color:'#185C37', fontSize:9, fontWeight:900, display:'flex', alignItems:'center', justifyContent:'center'}}>X</div>
          <span className="f-mono" style={{fontSize:8.5, color:'#fff'}}>tiempos_TALLER_v3.xlsx</span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 52px 46px', fontSize:8}}>
          {['Trabajo','Horas','Quién', 'Desmontaje motor','2,5','JL', 'Cambio correa','1','MT', 'Revisión frenos','','?'].map((c,i)=>{
            const head = i<3;
            return <div key={i} style={{border:'0.5px solid #E2E8F0', padding:'3px 6px', background:head?'#DDEBF7':'#fff', fontWeight:head?700:400, color: c==='?'?'#DC2626':'#334155'}}>{c}</div>;
          })}
        </div>
      </div>
    ),
    papel: (
      <div style={{background:'#FFFDF5', borderRadius:6, border:'1px solid #E8E2CF', padding:'10px 12px', boxShadow:'inset 0 0 20px rgba(180,160,90,0.08)'}}>
        <div className="f-plex" style={{fontSize:10, fontWeight:800, color:'#44403C', letterSpacing:'0.5px'}}>AUTORIZACIÓN DE TRABAJO</div>
        <div style={{height:1, background:'#E8E2CF', margin:'6px 0'}}/>
        {[0.95, 0.8, 0.88].map((wd,i)=><div key={i} style={{height:5, width:`${wd*100}%`, background:'#E7E5E4', borderRadius:3, marginBottom:4}}/>)}
        <div style={{display:'flex', justifyContent:'flex-end', marginTop:6}}>
          <svg width="74" height="22" viewBox="0 0 74 22"><path d="M4 15 C 12 4, 20 20, 28 11 C 34 5, 40 16, 48 10 C 56 5, 62 14, 70 8" fill="none" stroke="#1E3A8A" strokeWidth="1.5" strokeLinecap="round"/></svg>
        </div>
      </div>
    ),
    whatsapp: (
      <div style={{background:'#ECE5DD', borderRadius:8, overflow:'hidden', border:'1px solid rgba(0,0,0,0.06)'}}>
        <div style={{height:24, background:'#075E54', display:'flex', alignItems:'center', gap:6, padding:'0 9px'}}>
          <span style={{fontSize:9, fontWeight:700, color:'#fff'}}>Taller · grupo</span>
          <span style={{marginLeft:'auto', background:'#25D366', borderRadius:100, minWidth:13, height:13, fontSize:7.5, fontWeight:800, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', padding:'0 4px'}}>7</span>
        </div>
        <div style={{padding:'7px 8px', display:'flex', flexDirection:'column', gap:4}}>
          <div style={{alignSelf:'flex-start', background:'#fff', borderRadius:'2px 8px 8px 8px', padding:'4px 8px', fontSize:8.5, color:'#111B21'}}>Parte de hoy 📷 <span style={{fontSize:6.5, color:'#8696A0'}}>18:04</span></div>
          <div style={{alignSelf:'flex-start', background:'#fff', borderRadius:'2px 8px 8px 8px', padding:'4px 8px', fontSize:8.5, color:'#111B21'}}>la OR-2417 quién la tiene? <span style={{fontSize:6.5, color:'#8696A0'}}>18:12</span></div>
        </div>
      </div>
    ),
    libreta: (
      <div style={{background:'#FEF9EC', borderRadius:6, border:'1px solid #EAE0C0', padding:'9px 12px 9px 22px', position:'relative'}}>
        <div style={{position:'absolute', left:7, top:8, bottom:8, width:1.5, background:'#E4B4B4'}}/>
        {[...Array(4)].map((_,i)=><div key={i} style={{position:'absolute', left:2, top:14+i*16, width:8, height:8, border:'1.5px solid #A8A29E', borderRadius:2, background:'#fff'}}/>)}
        <div className="f-plex" style={{fontSize:9.5, fontWeight:800, color:'#57534E', marginBottom:5}}>Checklist calidad</div>
        {['niveles ok','apriete rueda','limpieza'].map((l,i)=>(
          <div key={i} style={{fontSize:8.5, color:'#78716C', marginBottom:4, fontStyle:'italic', textDecoration: i===0?'line-through':'none'}}>{l}</div>
        ))}
      </div>
    ),
    hoja: (
      <div style={{background:'#fff', borderRadius:8, overflow:'hidden', border:'1px solid #C9CFD6'}}>
        <div style={{height:26, background:'#185C37', display:'flex', alignItems:'center', gap:7, padding:'0 9px'}}>
          <div style={{width:14, height:14, background:'#fff', borderRadius:3, color:'#185C37', fontSize:9, fontWeight:900, display:'flex', alignItems:'center', justifyContent:'center'}}>X</div>
          <span className="f-mono" style={{fontSize:8.5, color:'#fff'}}>turnos_semana(2).xlsx</span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr repeat(3, 34px)', fontSize:8}}>
          {['','L','M','X', 'Juan','M','M','T', 'Marta','T','—','M', 'Luis','M','T','?'].map((c,i)=>{
            const head = i<4;
            return <div key={i} style={{border:'0.5px solid #E2E8F0', padding:'3px 5px', textAlign: i%4?'center':'left', background:head?'#DDEBF7':'#fff', fontWeight:head?700:400, color: c==='?'?'#DC2626':'#334155'}}>{c}</div>;
          })}
        </div>
      </div>
    ),
  };
  return <div style={{width:w}}>{estilos[tipo]}</div>;
}

function Escena01({ t }){
  const T = {
    gw:      0.0,    // "Tu programa de facturación"           → ventana gris
    aro:     3.9,    // "hace su papel"                        → aro
    badge:   4.6,                                           // (apoyo) badge
    h:       [10.1, 11.5, 13.3, 15.4, 17.7],   // "el excel de los tiempos" · "las autorizaciones en papel" · "los partes de trabajo por WhatsApp" · "el checklist de calidad en una libreta" · "los turnos en otra hoja"
    orbita: 26.4,   // "es un enjambre"                       → órbita
    pulso:  28.0,    // "Pues de eso vengo a hablarte"         → pulso
    dim:    31.6,    // "y de nada más"                        → atenúa
  };
  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 gwP = clamp((t-T.gw)/0.7, 0, 1), gwE = Easing.easeOutCubic(gwP);
  const aroP = clamp((t-T.aro)/0.9, 0, 1);
  const badgeP = clamp((t-T.badge)/0.5, 0, 1), badgeE = Easing.easeOutBack(badgeP);
  const hP = (i)=> clamp((t-T.h[i])/0.55, 0, 1);
  const orbOn = t >= T.orbita;
  const orb = orbOn ? Easing.easeInOutCubic(clamp((t-T.orbita)/1.6, 0, 1)) * 3 : 0;  // grados
  const pulsoOn = t >= T.pulso && t < T.pulso+1.0;
  const pulso = pulsoOn ? Math.sin((t-T.pulso)/1.0*Math.PI) : 0;
  const dimP = clamp((t-T.dim)/1.0, 0, 1);

  const CX = 960, CY = 545;

  return (
    <SlideCanvas variant="problem">
      {/* Rótulo fijo frame 0 */}
      <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}}>TU EMPRESA · ALREDEDOR DEL PROGRAMA</div>
        <div className="f-plex" style={{fontSize:44, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em'}}>Lo que no cabe en tu programa</div>
      </div>

      {/* GestWin — el programa que NO SE TOCA (centro, sin rebote) */}
      <div style={{position:'absolute', left:CX-290, top:CY-195, width:580, height:390, opacity:(gwP)*(1-dimP*0.45), transform:`translateY(${(1-gwE)*22}px)`, zIndex:4, filter:`saturate(${1-dimP*0.5})`}}>
        {/* Aro punteado NO SE TOCA */}
        <svg style={{position:'absolute', inset:-26, width:'calc(100% + 52px)', height:'calc(100% + 52px)', pointerEvents:'none'}} viewBox="0 0 632 442">
          <rect x="6" y="6" width="620" height="430" rx="22" fill="none" stroke="#10B981" strokeWidth="2.5"
            strokeDasharray="14 10" strokeDashoffset={0} opacity={aroP} style={{strokeDasharray:'14 10'}} pathLength="300" strokeDashoffset={300*(1-aroP)}/>
        </svg>
        {badgeP > 0 && (
          <div className="f-mono" style={{position:'absolute', top:-44, left:'50%', transform:`translateX(-50%) scale(${lerp(0.6,1,badgeE)})`, background:'#059669', color:'#fff', fontSize:12, fontWeight:800, letterSpacing:'2.5px', borderRadius:100, padding:'8px 22px', boxShadow:'0 14px 36px rgba(5,150,105,0.4)', opacity:clamp(badgeP*1.3,0,1), zIndex:6, whiteSpace:'nowrap'}}>ESTO NO SE TOCA</div>
        )}
        <div style={{position:'absolute', inset:0, background:'#F1F3F5', borderRadius:10, overflow:'hidden', border:'1px solid #C9CDD3', boxShadow:'0 26px 70px rgba(15,23,42,0.28)'}}>
          <div style={{height:34, background:'linear-gradient(180deg,#E8EAED,#D7DADF)', display:'flex', alignItems:'center', gap:9, padding:'0 12px', borderBottom:'1px solid #C9CDD3'}}>
            <div style={{width:18, height:18, borderRadius:4, background:'#5B6472', color:'#fff', fontSize:9, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>G</div>
            <span style={{fontSize:12, fontWeight:700, color:'#3F4854'}}>GestWin — Facturación</span>
            <div style={{marginLeft:'auto', display:'flex', gap:6}}>
              {['—','□','✕'].map((c,i)=><span key={i} style={{fontSize:10, color:'#8B95A3'}}>{c}</span>)}
            </div>
          </div>
          <div style={{height:26, background:'#EDEFF2', borderBottom:'1px solid #D7DADF', display:'flex', gap:14, padding:'0 12px', alignItems:'center'}}>
            {['Facturas','Clientes','Artículos','Informes'].map((m,i)=><span key={m} style={{fontSize:10, color: i===0?'#1F2937':'#6B7482', fontWeight:i===0?700:400, borderBottom:i===0?'2px solid #5B6472':'none', paddingBottom:2}}>{m}</span>)}
          </div>
          <div style={{padding:'12px 16px'}}>
            <table style={{width:'100%', borderCollapse:'collapse', fontSize:10.5}}>
              <thead><tr>{['Nº','Cliente','Fecha','Total'].map((h)=><th key={h} style={{textAlign:'left', padding:'5px 8px', background:'#E8EAED', color:'#4B5563', fontWeight:700, border:'1px solid #D7DADF'}}>{h}</th>)}</tr></thead>
              <tbody>
                {[['F-2201','Talleres Mecha','03/11','486,20'],['F-2200','Autos Vera','03/11','1.212,00'],['F-2199','C. Sánchez','02/11','96,80'],['F-2198','Autos Vera','02/11','340,45']].map((r,i)=>(
                  <tr key={i}>{r.map((c,j)=><td key={j} style={{padding:'5px 8px', border:'1px solid #E5E7EB', color:'#374151'}}>{c}</td>)}</tr>
                ))}
              </tbody>
            </table>
            <div className="f-mono" style={{marginTop:8, fontSize:9, color:'#9CA3AF'}}>funciona · desde 2014</div>
          </div>
        </div>
      </div>

      {/* Los 5 huérfanos — entran uno por mención y orbitan */}
      {HUERFANOS.map((h,i)=>{
        const p = hP(i);
        if (p <= 0) return null;
        const e = Easing.easeOutBack(p);
        // órbita: rotación colectiva alrededor del centro
        const dx = (h.x + h.w/2) - CX, dy = (h.y + 60) - CY;
        const ang = orb * Math.PI/180;
        const ox = dx*Math.cos(ang) - dy*Math.sin(ang) - dx;
        const oy = dx*Math.sin(ang) + dy*Math.cos(ang) - dy;
        return (
          <div key={i} style={{position:'absolute', left:h.x, top:h.y, transform:`translate(${ox}px, ${oy}px) rotate(${h.rot}deg) scale(${lerp(0.65,1,e) * (pulsoOn?1+pulso*0.05:1)})`, opacity:clamp(p*1.3,0,1), zIndex:5, filter:`drop-shadow(0 18px 34px rgba(15,23,42,0.28))`}}>
            <H03Ficha tipo={h.tipo} w={h.w}/>
          </div>
        );
      })}
    </SlideCanvas>
  );
}
Object.assign(window, { Escena01, H03Ficha });