// === Escena 04 — "El giro: entran en Dinaup (tu lado, el que administra)" · audio real 38.90s ===
// LOCUCIÓN: "Lo que te proponemos es esto: todos esos procesos huérfanos, centralizados en Dinaup.
//   Cada uno con su sitio: sus listados, sus buscadores, sus permisos, sus avisos. Con una regla
//   de oro: cada dato se introduce una vez. Entra, y desde ese momento todo el mundo lo ve, lo
//   busca y lo usa... nadie vuelve a copiarlo en otro sitio. Y tu programa de siempre se queda
//   exactamente donde está: esto convive con lo que ya tienes. Ahora fíjate... porque aquí viene
//   la pregunta buena: ¿y tu equipo? ¿Y tus clientes?"
// BEATS: 5 huérfanos VUELAN y encajan como SECCIONES DE ADMINISTRACIÓN · strip listados/buscadores/
//   permisos/avisos (lo que Dinaup YA trae) · sello UNA VEZ + dato a 3 espejos · GestWin NO se mueve
//   · badge TU LADO · dos pastillas-pregunta (¿tu gente? ¿tus clientes?) → puente a D5.
function Escena04({ t }){
  const T = {
    win:      0.3,   // "Lo que te proponemos"                 → ventana
    fly:      [2.2, 2.9, 3.5, 4.2, 4.9],                    // (apoyo) los procesos vuelan
    flyDur:  0.85,                                          // (duración, no instante)
    sub:      [7.8, 8.9, 9.9, 10.9],   // "sus listados" · "sus buscadores" · "sus permisos" · "sus avisos"
    form:    12.6,   // "una regla de oro"                     → formulario
    type:    12.9,                                          // (apoyo) teclea
    sello:   13.9,   // "cada dato se introduce una vez"       → sello
    espejos:  [19.8, 20.6, 21.4],   // "lo ve" · "lo busca" · "lo usa"
    shift:   25.6,   // "tu programa de siempre se queda"      → desplaza
    aroPulse:29.7,   // "convive con lo que ya tienes"         → pulso del aro
    lado:    32.6,   // "Ahora fíjate"                         → realce TU LADO
    pills:    [36.8, 38.2],   // "y tu equipo" · "Y tus clientes"
  };
  const winP = clamp((t-T.win)/0.7, 0, 1), winE = Easing.easeOutCubic(winP);
  const APPS = [
    { tipo:'excel',    nombre:'Tiempos de taller', ic:'⏱', c:'#0085FF' },
    { tipo:'papel',    nombre:'Autorizaciones',    ic:'✍', c:'#8B5CF6' },
    { tipo:'whatsapp', nombre:'Partes de trabajo', ic:'📋', c:'#10B981' },
    { tipo:'libreta',  nombre:'Checklist calidad', ic:'✓',  c:'#F59E0B' },
    { tipo:'hoja',     nombre:'Turnos',            ic:'📅', c:'#FF6751' },
  ];
  const ORIGENES = [ {x:150,y:210}, {x:1520,y:190}, {x:130,y:700}, {x:1560,y:660}, {x:820,y:830} ];
  const flyP = (i)=> clamp((t-T.fly[i])/T.flyDur, 0, 1);
  const landPop = (i)=> Easing.easeOutBack(clamp((t-(T.fly[i]+T.flyDur))/0.4, 0, 1));
  const subP = (i)=> clamp((t-T.sub[i])/0.4, 0, 1);
  const formP = clamp((t-T.form)/0.5, 0, 1);
  const selloP = clamp((t-T.sello)/0.45, 0, 1), selloE = Easing.easeOutBack(selloP);
  const espejoP = (i)=> clamp((t-T.espejos[i])/0.5, 0, 1);
  const pulsoViaje = (i)=>{ const p = clamp((t-(T.espejos[i]-0.45))/0.45, 0, 1); return p; };
  const shiftP = clamp((t-T.shift)/1.2, 0, 1);
  const shift = Math.sin(Easing.easeInOutCubic(shiftP)*Math.PI) * 24;   // va y vuelve
  const aroPulseOn = t >= T.aroPulse && t < T.aroPulse+1.2;
  const aroPulse = aroPulseOn ? Math.sin((t-T.aroPulse)/1.2*Math.PI) : 0;
  const ladoOn = t >= T.lado && t < T.lado+1.4;
  const ladoPulse = ladoOn ? Math.sin((t-T.lado)/1.4*Math.PI) : 0;
  const pillP = (i)=> clamp((t-T.pills[i])/0.5, 0, 1);

  const SLOT = (i)=> ({ x: 700 + (i%3)*310, y: 300 + Math.floor(i/3)*118 });
  const ESPEJOS = [ {l:'listado', ic:'☰'}, {l:'buscador', ic:'🔍'}, {l:'panel', ic:'▦'} ];
  const SUBCHIPS = ['Listados','Buscadores','Permisos','Avisos'];

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={Math.max(0,t-0.2)} eyebrow="EL GIRO · TU LADO, EL QUE ADMINISTRA" title={<span>Los huérfanos entran <span className="grad-text">en Dinaup.</span></span>}/>

      {/* Contenedor con el desplazamiento del gag (GestWin queda FUERA, quieto) */}
      <div style={{position:'absolute', inset:0, transform:`translateX(${shift}px)`}}>
        {/* Ventana Dinaup — el backoffice del administrador */}
        <div style={{position:'absolute', left:620, top:186, width:1080, height:748, background:'#fff', borderRadius:12, 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, transform:`translateY(${(1-winE)*24}px)`}}>
          <BrowserChrome url="play.dinaup.com/BusinessApp/tu-empresa" title="Administración — Dinaup"/>
          <DinaupAppHeader breadcrumb={["Administración"]}/>
          {/* Badge TU LADO */}
          <div className="f-mono" style={{position:'absolute', top:150, right:20, zIndex:5, fontSize:9.5, fontWeight:800, letterSpacing:'1.5px', color:'#0085FF', background:'rgba(0,133,255,0.08)', border:'1.5px solid rgba(0,133,255,0.35)', borderRadius:100, padding:'5px 13px', transform:`scale(${1+ladoPulse*0.08})`, boxShadow: ladoOn?`0 0 0 ${ladoPulse*6}px rgba(0,133,255,0.1)`:'none'}}>TU LADO · ADMINISTRACIÓN</div>
          <div style={{padding:'20px 30px'}}>
            <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:14}}>
              <div className="f-plex" style={{fontSize:16, fontWeight:700, color:'#0F172A'}}>Tus procesos, como secciones de gestión</div>
            </div>
            {/* Rejilla de secciones */}
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:13}}>
              {APPS.map((a,i)=>{
                const landed = flyP(i) >= 1;
                const pop = landPop(i);
                return (
                  <div key={i} style={{height:92, borderRadius:11, border: landed?`1.5px solid ${a.c}66`:'1.5px dashed #CBD5E1', background: landed?'#fff':'rgba(203,213,225,0.08)', display:'flex', alignItems:'center', gap:11, padding:'0 15px', transform:`scale(${landed?lerp(0.92,1,pop):1})`, boxShadow: landed?`0 12px 30px ${a.c}22`:'none', position:'relative', transition:'border 250ms, background 250ms'}}>
                    {landed ? (
                      <React.Fragment>
                        <div style={{width:40, height:40, borderRadius:10, background:`${a.c}18`, border:`1.5px solid ${a.c}55`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:17}}>{a.ic}</div>
                        <div style={{flex:1, minWidth:0}}>
                          <div className="f-plex" style={{fontSize:13.5, fontWeight:700, color:'#0F172A'}}>{a.nombre}</div>
                          <div className="f-mono" style={{fontSize:8.5, color:'#94A3B8', marginTop:2}}>sección · administración</div>
                        </div>
                        <span style={{width:8, height:8, borderRadius:100, background:'#10B981', boxShadow:'0 0 8px rgba(16,185,129,0.7)'}}/>
                      </React.Fragment>
                    ) : (
                      <span className="f-mono" style={{fontSize:9, color:'#B6C2D2', margin:'0 auto', letterSpacing:'1px'}}>hueco esperando</span>
                    )}
                  </div>
                );
              })}
              <div style={{height:92, borderRadius:11, border:'1.5px dashed #CBD5E1', background:'rgba(203,213,225,0.08)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                <span className="f-mono" style={{fontSize:9, color:'#B6C2D2', letterSpacing:'1px'}}>+ el siguiente</span>
              </div>
            </div>

            {/* Strip: cada sección ya viene con su administración (listados/buscadores/permisos/avisos) */}
            <div style={{marginTop:14, display:'flex', alignItems:'center', gap:12, opacity:clamp(subP(0)*1.5,0,1)}}>
              <span className="f-mono" style={{fontSize:9.5, color:'#94A3B8', letterSpacing:'1px', flexShrink:0}}>CADA SECCIÓN YA TRAE →</span>
              {SUBCHIPS.map((s,i)=>{
                const p = subP(i);
                return (
                  <span key={i} className="f-plex" style={{fontSize:12, fontWeight:700, color: p>0.5?'#0F172A':'#B6C2D2', background: p>0.5?'#fff':'#F8FAFC', border:`1.5px solid ${p>0.5?'rgba(16,185,129,0.45)':'#E2E8F0'}`, borderRadius:100, padding:'5px 14px', display:'flex', alignItems:'center', gap:6, transform:`scale(${p>0?lerp(0.85,1,Easing.easeOutBack(p)):0.92})`, transition:'all 200ms'}}>
                    {p>0.5 && <span style={{color:'#059669', fontWeight:800, fontSize:11}}>✓</span>}{s}
                  </span>
                );
              })}
            </div>

            {/* Regla de oro: UNA VEZ */}
            {formP > 0 && (
              <div style={{marginTop:16, display:'flex', alignItems:'center', gap:16, opacity:formP}}>
                <div style={{position:'relative', flex:'0 0 320px', background:'#F8FAFC', border:'1.5px solid #E2E8F0', borderRadius:11, padding:'11px 15px'}}>
                  <div className="f-mono" style={{fontSize:8.5, color:'#94A3B8', letterSpacing:'1.5px', marginBottom:6}}>TIEMPOS DE TALLER · NUEVO</div>
                  <div style={{display:'flex', alignItems:'center', gap:8, background:'#fff', border:'1.5px solid rgba(0,133,255,0.5)', borderRadius:8, padding:'7px 12px'}}>
                    <span className="f-mono" style={{fontSize:12, color:'#0F172A'}}>
                      <Typewriter text="Desmontaje motor · 2,5 h" start={T.type} cps={22} t={t} caret/>
                    </span>
                  </div>
                  {selloP > 0 && (
                    <div className="f-mono" style={{position:'absolute', top:-14, right:-10, fontSize:11, fontWeight:800, color:'#fff', background:'#0085FF', borderRadius:100, padding:'5px 16px', letterSpacing:'2px', transform:`rotate(-3deg) scale(${lerp(0.5,1,selloE)})`, opacity:clamp(selloP*1.3,0,1), boxShadow:'0 10px 26px rgba(0,133,255,0.4)'}}>UNA VEZ</div>
                  )}
                </div>
                <div style={{flex:1, display:'flex', alignItems:'center', gap:10}}>
                  {ESPEJOS.map((es,i)=>{
                    const p = espejoP(i);
                    const dot = pulsoViaje(i);
                    return (
                      <React.Fragment key={i}>
                        <div style={{position:'relative', width:30, height:2.5, background: p>0?'#0085FF':'#E2E8F0', flexShrink:0, transition:'background 250ms'}}>
                          {dot>0 && dot<1 && <span style={{position:'absolute', left:`${dot*100}%`, top:-4, width:10, height:10, borderRadius:100, background:'#0085FF', boxShadow:'0 0 10px rgba(0,133,255,0.8)'}}/>}
                        </div>
                        <div style={{flex:1, display:'flex', alignItems:'center', gap:8, background: p>0?'#fff':'#F8FAFC', border:`1.5px solid ${p>0?'rgba(0,133,255,0.5)':'#E2E8F0'}`, borderRadius:10, padding:'8px 12px', transform:`scale(${p>0?lerp(0.92,1,Easing.easeOutBack(p)):1})`, transition:'border 250ms'}}>
                          <span style={{fontSize:13}}>{es.ic}</span>
                          <div>
                            <div className="f-plex" style={{fontSize:11, fontWeight:700, color: p>0?'#0F172A':'#94A3B8'}}>{es.l}</div>
                            <div className="f-mono" style={{fontSize:8, color: p>0?'#059669':'#CBD5E1'}}>{p>0?'2,5 h ✓':'—'}</div>
                          </div>
                        </div>
                      </React.Fragment>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Huérfanos volando hacia sus slots */}
        {APPS.map((a,i)=>{
          const p = flyP(i);
          if (p <= 0 || p >= 1) return null;
          const e = Easing.easeInOutCubic(p);
          const o = ORIGENES[i], d = SLOT(i);
          const x = lerp(o.x, d.x, e), y = lerp(o.y, d.y, e) - Math.sin(p*Math.PI)*110;
          return (
            <div key={i} style={{position:'absolute', left:x, top:y, transform:`rotate(${lerp(i%2?3:-3, 0, e)}deg) scale(${lerp(1, 0.55, e)})`, transformOrigin:'top left', opacity: p>0.88 ? (1-p)/0.12 : 1, zIndex:9, filter:'drop-shadow(0 22px 44px rgba(15,23,42,0.3))'}}>
              <H03Ficha tipo={a.tipo} w={280}/>
            </div>
          );
        })}
      </div>

      {/* GestWin — FUERA del contenedor desplazado: NO SE MUEVE */}
      <div style={{position:'absolute', left:150, top:300, width:400, height:250, zIndex:5}}>
        <svg style={{position:'absolute', inset:-20, width:'calc(100% + 40px)', height:'calc(100% + 40px)'}} viewBox="0 0 440 290">
          <rect x="5" y="5" width="430" height="280" rx="18" fill="none" stroke="#10B981" strokeWidth={2.5 + aroPulse*2} strokeDasharray="12 9" opacity={0.85 + aroPulse*0.15}/>
        </svg>
        <div className="f-mono" style={{position:'absolute', top:-38, left:'50%', transform:`translateX(-50%) scale(${1+aroPulse*0.08})`, background:'#059669', color:'#fff', fontSize:10.5, fontWeight:800, letterSpacing:'2px', borderRadius:100, padding:'6px 18px', boxShadow:`0 10px 30px rgba(5,150,105,${0.35+aroPulse*0.3})`, 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 22px 55px rgba(15,23,42,0.2)'}}>
          <div style={{height:30, background:'linear-gradient(180deg,#E8EAED,#D7DADF)', display:'flex', alignItems:'center', gap:8, padding:'0 11px'}}>
            <div style={{width:16, height:16, borderRadius:4, background:'#5B6472', color:'#fff', fontSize:8.5, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>G</div>
            <span style={{fontSize:11, fontWeight:700, color:'#3F4854'}}>GestWin — Facturación</span>
          </div>
          <div style={{padding:12}}>
            {[['F-2201','486,20'],['F-2200','1.212,00'],['F-2199','96,80']].map((r,i)=>(
              <div key={i} className="f-mono" style={{display:'flex', justifyContent:'space-between', padding:'6px 10px', borderBottom:'1px solid #E5E7EB', fontSize:10.5, color:'#374151'}}>
                <span>{r[0]}</span><span>{r[1]}</span>
              </div>
            ))}
            <div className="f-mono" style={{marginTop:8, fontSize:9, color:'#9CA3AF'}}>sigue igual · convive</div>
          </div>
        </div>
      </div>

      {/* Pastillas-pregunta: ¿tu gente? ¿tus clientes? — puente a D5 */}
      <div style={{position:'absolute', bottom:56, left:0, right:0, display:'flex', justifyContent:'center', gap:20, zIndex:8}}>
        {['¿Y tu equipo?','¿Y tus clientes?'].map((q,i)=>{
          const p = pillP(i), e = Easing.easeOutBack(p);
          if (p<=0) return null;
          const beat = 0.5+0.5*Math.sin(Math.max(0,t-T.pills[i]-0.4)*3);
          return (
            <div key={i} style={{display:'flex', alignItems:'center', gap:11, background:'rgba(15,23,42,0.94)', border:`1.5px solid rgba(0,133,255,${0.3+beat*0.3})`, borderRadius:100, padding:'12px 26px', transform:`scale(${lerp(0.6,1,e)})`, opacity:clamp(p*1.3,0,1), boxShadow:`0 16px 40px rgba(15,23,42,0.3)`}}>
              <span style={{fontSize:17}}>{i===0?'👷':'🙋'}</span>
              <span className="f-plex" style={{fontSize:16, fontWeight:700, color:'#fff'}}>{q}</span>
            </div>
          );
        })}
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { Escena04 });