// === Escena 02 — "Centralizado" · audio real 38.71s ===
// LOCUCIÓN: "Esto es Dinaup: todo lo de antes, centralizado. El presupuesto que te aceptan se
//   convierte en venta con un clic... el dato viaja solo, sin reescribir nada. ¿Quieres saber si
//   una factura está pagada? Lo ves en la propia lista, sin entrar en el banco: pagada, pendiente,
//   vencida. ¿Y si alguien deja la empresa? Bloqueas su acceso una vez, en una plataforma... y
//   fuera de todo a la vez. Lo que eran cinco sitios y tu memoria, ahora es una pestaña. Y dentro
//   vienen piezas que igual no esperabas. Mira estas tres."
// BEATS: 3 micro-actos en la MISMA ventana (Ventas → Facturas → Usuarios, breadcrumb cambia) ·
//   click Aceptar → pulso viaja por la cadena · chips de estado uno por palabra · toggle OFF +
//   las 5 mini-ventanas de D1 apagándose (callback) · zoom-out a la pestaña · slots 1·2·3.
function Escena02({ t }){
  const T = {
    win:0.5,
    curAceptar:5.6, pulso:5.9, venta:6.7, copia:8.2,
    actB:12.2, chips:[16.9, 17.6, 18.3],       // pagada · pendiente · vencida
    actC:20.2, curToggle:23.2, bloqueo:23.5, minis0:24.7, minisStep:0.35,
    zoom:28.6, tabGlow:29.4,
    slots:[34.6, 35.1, 35.6],
  };
  const winP = clamp((t-T.win)/0.6, 0, 1), winE = Easing.easeOutCubic(winP);

  // Fases (crossfade 0.5s)
  const fB = clamp((t-T.actB)/0.5, 0, 1);
  const fC = clamp((t-T.actC)/0.5, 0, 1);
  const fase = fC > 0 ? 2 : fB > 0 ? 1 : 0;
  const faseOp = (idx)=> idx===0 ? 1-fB : idx===1 ? fB*(1-fC) : fC;

  const zoomP = clamp((t-T.zoom)/0.8, 0, 1), zoomE = Easing.easeInOutCubic(zoomP);
  const tabGlowOn = t >= T.tabGlow && t < T.tabGlow+2.2;
  const tabPulse = tabGlowOn ? 0.5+0.5*Math.sin((t-T.tabGlow)*4.5) : 0;

  // Acto 1 — cadena (solo Presupuesto → Venta: con eso sobra)
  const CADENA = ['Presupuesto','Venta'];
  const ventaP = clamp((t-T.venta)/0.5, 0, 1);
  const chainOn = [1, ventaP];
  const pulsoP = clamp((t-T.pulso)/0.7, 0, 1);          // dot viajando presupuesto→venta
  const copiaN = Math.floor(clamp((t-T.copia)/0.45, 0, 3.2)); // filas que se van copiando en Venta

  // Cursor del acto 1 (click en Aceptar) + acto 3 (toggle) — un solo ScriptedCursor por fase
  // Targets medidos en el DOM real (canvas 1920×1080, relativos al div de la ventana en 210,150)
  const cursorFrames1 = [
    {t:3.6, x:1300, y:760}, {t:5.3, x:485, y:501, arc:70}, {t:12.0, x:485, y:501},
  ];
  const cursorFrames3 = [
    {t:21.4, x:1300, y:760}, {t:22.9, x:1410, y:390, arc:50}, {t:27.8, x:1410, y:390},
  ];
  const toggleOff = t >= T.bloqueo;
  const miniOff = (i)=> clamp((t-(T.minis0+i*T.minisStep))/0.35, 0, 1);

  const ESTADOS = { Pagada:{c:'#059669', bg:'rgba(16,185,129,0.12)', bd:'rgba(16,185,129,0.45)'},
                    Pendiente:{c:'#B45309', bg:'rgba(245,158,11,0.14)', bd:'rgba(245,158,11,0.5)'},
                    Vencida:{c:'#DC2626', bg:'rgba(239,68,68,0.12)', bd:'rgba(239,68,68,0.5)'} };
  const FACTURAS = [
    ['F-1207','Talleres Sanz','1.240,00 €','Pagada'],
    ['F-1206','Distribuciones Vega','386,50 €','Pagada'],
    ['F-1205','Clínica Duero','2.150,00 €','Pendiente'],
    ['F-1204','Bar Casa Juan','164,90 €','Pagada'],
    ['F-1203','Autos Leman','745,00 €','Vencida'],
    ['F-1202','Ferretería Molina','89,90 €','Pendiente'],
  ];
  const chipOn = (estado)=> estado==='Pagada' ? t>=T.chips[0] : estado==='Pendiente' ? t>=T.chips[1] : t>=T.chips[2];
  const chipPop = (estado)=>{
    const at = estado==='Pagada' ? T.chips[0] : estado==='Pendiente' ? T.chips[1] : T.chips[2];
    const p = clamp((t-at)/0.4, 0, 1);
    return Easing.easeOutBack(p);
  };

  const BREADCRUMBS = [["Ventas","Presupuestos"], ["Ventas","Facturas emitidas"], ["Configuración","Usuarios"]];
  const MINIS = [
    {l:'WA', c:'#25D366'}, {l:'@', c:'#EA4335'}, {l:'X', c:'#185C37'}, {l:'F3', c:'#64748B'}, {l:'B', c:'#072146'},
  ];

  const docIcon = (on)=> (
    <svg width="26" height="30" viewBox="0 0 20 24" fill="none">
      <path d="M3 2 h9 l5 5 v15 a1 1 0 0 1 -1 1 h-13 a1 1 0 0 1 -1 -1 v-19 a1 1 0 0 1 1 -1 z" fill={on?'rgba(0,133,255,0.12)':'#F1F5F9'} stroke={on?'#0085FF':'#CBD5E1'} strokeWidth="1.4"/>
      <path d="M12 2 v5 h5" stroke={on?'#0085FF':'#CBD5E1'} strokeWidth="1.4" fill="none"/>
    </svg>
  );

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="TODO LO DE ANTES · EN UN SITIO" title="Centralizado"/>

      <div style={{position:'absolute', left:210, top:150, width:1500, height:790, opacity:winP, transform:`translateY(${(1-winE)*26}px) scale(${lerp(1, 0.9, zoomE)})`, transformOrigin:'50% 30%'}}>
        {/* Glow de la pestaña ("ahora es una pestaña") */}
        {tabGlowOn && (
          <div style={{position:'absolute', left:8, top:0, width:250, height:36, borderRadius:'8px 8px 0 0', boxShadow:`0 0 0 ${2+tabPulse*4}px rgba(0,133,255,${0.3+tabPulse*0.35})`, zIndex:9, pointerEvents:'none'}}/>
        )}
        <div style={{position:'absolute', inset:0, 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)'}}>
          <BrowserChrome url="play.dinaup.com/App/Pymes" title="Dinaup — Tu empresa"/>
          <DinaupAppHeader breadcrumb={BREADCRUMBS[fase]}/>

          <div style={{position:'relative', height:'calc(100% - 142px)'}}>

            {/* ================= ACTO 1 · La cadena ================= */}
            <div style={{position:'absolute', inset:0, padding:'56px 44px', opacity:faseOp(0), pointerEvents:'none'}}>
              <div className="f-plex" style={{fontSize:18, fontWeight:700, color:'#0F172A', marginBottom:30, textAlign:'center'}}>Presupuesto aceptado → venta hecha</div>
              <div style={{display:'flex', alignItems:'flex-start', justifyContent:'center', gap:0}}>
                {CADENA.map((doc,i)=>{
                  const on = chainOn[i] > 0.4;
                  const e = i===0 ? 1 : Easing.easeOutBack(chainOn[i]);
                  return (
                    <React.Fragment key={doc}>
                      <div style={{width:380, background: on?'#fff':'#F8FAFC', border:`1.5px solid ${on?'rgba(0,133,255,0.5)':'#E2E8F0'}`, borderRadius:14, padding:'20px 24px', transform:`scale(${i===0?1:lerp(0.92,1,e)})`, boxShadow: on?'0 18px 44px rgba(0,133,255,0.14)':'none', transition:'border 300ms, background 300ms'}}>
                        <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:14}}>
                          {docIcon(on)}
                          <div>
                            <div className="f-plex" style={{fontSize:17, fontWeight:700, color: on?'#0F172A':'#94A3B8'}}>{doc}</div>
                            <div className="f-mono" style={{fontSize:10, color:'#94A3B8'}}>{['PRE-0341','VTA-0298'][i]}</div>
                          </div>
                          {on && i>0 && <span style={{marginLeft:'auto', width:24, height:24, borderRadius:100, background:'#10B981', color:'#fff', fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>✓</span>}
                        </div>
                        {/* mini-filas de datos (en Venta se copian solas) */}
                        {(i===0 || (i===1 && copiaN>0)) && (
                          <div style={{display:'flex', flexDirection:'column', gap:6}}>
                            {[['Talleres Sanz','cliente'],['Compresor AC-40 ×2','1.040,00 €'],['Filtro de aire ×4','200,00 €']].slice(0, i===0?3:copiaN).map((r,ri)=>(
                              <div key={ri} style={{display:'flex', justifyContent:'space-between', fontSize:12, background:'#F8FAFC', border:'1px solid #EEF2F7', borderRadius:7, padding:'7px 11px'}}>
                                <span style={{color:'#334155', fontWeight:600}}>{r[0]}</span>
                                <span className="f-mono" style={{color:'#64748B'}}>{r[1]}</span>
                              </div>
                            ))}
                            <div style={{display:'flex', justifyContent:'space-between', padding:'7px 11px', fontSize:13.5}}>
                              <span style={{fontWeight:700, color:'#0F172A'}}>Total</span>
                              <span className="f-mono" style={{fontWeight:800, color: on?'#0085FF':'#334155'}}>{(i===0||copiaN>=3)?'1.240,00 €':'…'}</span>
                            </div>
                          </div>
                        )}
                        {/* Botón aceptar (solo presupuesto) */}
                        {i===0 && (
                          <div id="e02-btn-aceptar" style={{marginTop:12, background: t>=T.curAceptar+0.15?'#10B981':'#0085FF', color:'#fff', borderRadius:10, textAlign:'center', padding:'11px 0', fontSize:14, fontWeight:800, transform:`scale(${t>=T.curAceptar&&t<T.curAceptar+0.3?0.95:1})`, transition:'background 250ms'}}>
                            {t>=T.curAceptar+0.15 ? '✓ Aceptado' : '✓ Aceptar presupuesto'}
                          </div>
                        )}
                        {i===1 && ventaP>0 && copiaN>=3 && (
                          <div className="f-mono" style={{marginTop:12, fontSize:11, color:'#059669', textAlign:'center'}}>datos copiados solos · 0 teclas</div>
                        )}
                      </div>
                      {i < 1 && (
                        <div style={{width:150, paddingTop:52, position:'relative', flexShrink:0}}>
                          <div style={{height:3, background: chainOn[i+1]>0.4?'#0085FF':'#E2E8F0', transition:'background 300ms'}}/>
                          {/* pulso viajero */}
                          {pulsoP>0 && pulsoP<1 && (
                            <div style={{position:'absolute', top:45, left:`${pulsoP*100}%`, width:14, height:14, borderRadius:100, background:'#0085FF', boxShadow:'0 0 16px rgba(0,133,255,0.9)'}}/>
                          )}
                          <div className="f-mono" style={{position:'absolute', top:62, left:0, right:0, textAlign:'center', fontSize:9.5, color: chainOn[1]>0.4?'#0085FF':'#CBD5E1', letterSpacing:'1px', transition:'color 300ms'}}>un clic</div>
                        </div>
                      )}
                    </React.Fragment>
                  );
                })}
              </div>
              <div className="f-mono" style={{marginTop:30, fontSize:11.5, color:'#94A3B8', textAlign:'center', opacity:clamp((t-8.2)/0.5,0,1)}}>El mismo dato viaja de punta a punta — no lo reescribes, no se te baila un número.</div>
            </div>

            {/* ================= ACTO 2 · La lista de cobros ================= */}
            {fB > 0 && (
              <div style={{position:'absolute', inset:0, padding:'26px 44px', opacity:faseOp(1)}}>
                <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:16}}>
                  <div className="f-plex" style={{fontSize:17, fontWeight:700, color:'#0F172A'}}>¿Pagada? Lo ves en la lista</div>
                  <div className="f-mono" style={{fontSize:10.5, color:'#94A3B8'}}>sin entrar en el banco</div>
                </div>
                <div style={{display:'grid', gridTemplateColumns:'110px 1fr 150px 130px', gap:'0 14px', padding:'8px 16px', borderBottom:'1.5px solid #E2E8F0'}}>
                  {['Nº','Cliente','Importe','Estado'].map((h)=><span key={h} className="f-mono" style={{fontSize:9.5, color:'#94A3B8', letterSpacing:'1px', textTransform:'uppercase'}}>{h}</span>)}
                </div>
                {FACTURAS.map((f,i)=>{
                  const st = ESTADOS[f[3]];
                  const on = chipOn(f[3]);
                  const pop = chipPop(f[3]);
                  return (
                    <div key={i} style={{display:'grid', gridTemplateColumns:'110px 1fr 150px 130px', gap:'0 14px', alignItems:'center', padding:'11px 16px', borderBottom:'1px solid #F1F5F9', background: i%2?'#FBFDFF':'#fff'}}>
                      <span className="f-mono" style={{fontSize:11.5, color:'#64748B'}}>{f[0]}</span>
                      <span className="f-plex" style={{fontSize:13, fontWeight:600, color:'#0F172A'}}>{f[1]}</span>
                      <span className="f-mono" style={{fontSize:12.5, fontWeight:700, color:'#0F172A'}}>{f[2]}</span>
                      <span className="f-mono" style={{justifySelf:'start', fontSize:10.5, fontWeight:800, color: on?st.c:'#CBD5E1', background: on?st.bg:'#F8FAFC', border:`1.5px solid ${on?st.bd:'#E2E8F0'}`, borderRadius:100, padding:'3px 12px', transform:`scale(${on?lerp(0.7,1,pop):1})`}}>
                        {on ? f[3] : '···'}
                      </span>
                    </div>
                  );
                })}
              </div>
            )}

            {/* ================= ACTO 3 · Usuarios (bloquear una vez) ================= */}
            {fC > 0 && (
              <div style={{position:'absolute', inset:0, padding:'26px 44px', opacity:faseOp(2)}}>
                <div className="f-plex" style={{fontSize:17, fontWeight:700, color:'#0F172A', marginBottom:16}}>¿Alguien deja la empresa? Un solo acceso</div>
                {[['AL','Ana López','Administración', true, '#0085FF'],
                  ['CA','Carlos Ariza','Ventas', true, '#8B5CF6'],
                  ['JP','Javier Pérez','Almacén · baja hoy', false, '#F59E0B']].map((u,i)=>{
                  const esBaja = i===2;
                  const off = esBaja && toggleOff;
                  return (
                    <div key={i} style={{display:'flex', alignItems:'center', gap:14, padding:'13px 18px', background: off?'rgba(239,68,68,0.04)':'#fff', border:`1.5px solid ${off?'rgba(239,68,68,0.35)':'#E2E8F0'}`, borderRadius:12, marginBottom:10, transition:'background 300ms, border 300ms'}}>
                      <div style={{width:38, height:38, borderRadius:100, background:off?'#CBD5E1':u[4], color:'#fff', fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', transition:'background 300ms'}}>{u[0]}</div>
                      <div style={{flex:1}}>
                        <div className="f-plex" style={{fontSize:14, fontWeight:700, color:'#0F172A'}}>{u[1]}</div>
                        <div style={{fontSize:11, color:'#64748B'}}>{u[2]}</div>
                      </div>
                      {off && (
                        <span className="f-mono" style={{fontSize:10.5, fontWeight:800, color:'#DC2626', background:'rgba(239,68,68,0.1)', border:'1px solid rgba(239,68,68,0.4)', borderRadius:100, padding:'4px 12px', transform:`scale(${lerp(0.6,1,Easing.easeOutBack(clamp((t-T.bloqueo)/0.4,0,1)))})`}}>Acceso bloqueado</span>
                      )}
                      {/* Toggle */}
                      <div style={{width:52, height:28, borderRadius:100, background: (esBaja&&off)||!u[3]&&!esBaja ? '#CBD5E1' : esBaja ? '#10B981' : '#10B981', position:'relative', transition:'background 250ms', ...(esBaja&&off?{background:'#CBD5E1'}:{})}}>
                        <div style={{position:'absolute', top:3, left: (esBaja&&off) ? 3 : 27, width:22, height:22, borderRadius:100, background:'#fff', boxShadow:'0 2px 6px rgba(15,23,42,0.25)', transition:'left 250ms'}}/>
                      </div>
                    </div>
                  );
                })}
                {/* Callback: las 5 puertas de D1, cerradas de una vez */}
                <div style={{marginTop:18, display:'flex', alignItems:'center', gap:16, opacity:clamp((t-T.minis0+0.3)/0.4,0,1)}}>
                  <span className="f-mono" style={{fontSize:10.5, color:'#94A3B8', letterSpacing:'1px'}}>Y FUERA DE TODO A LA VEZ →</span>
                  <div style={{display:'flex', gap:10}}>
                    {MINIS.map((m,i)=>{
                      const p = miniOff(i);
                      return (
                        <div key={i} style={{width:44, height:44, borderRadius:10, background: p>0.5?'#F1F5F9':m.c, border:'1px solid #E2E8F0', display:'flex', alignItems:'center', justifyContent:'center', position:'relative', transition:'background 300ms', transform:`scale(${1-p*0.08})`}}>
                          <span className="f-mono" style={{fontSize:12, fontWeight:800, color: p>0.5?'#CBD5E1':'#fff'}}>{m.l}</span>
                          {p>0.5 && <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', fontSize:20, color:'#DC2626', fontWeight:800}}>✕</div>}
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Cursor por fase */}
        {t >= 3.6 && t < 12.0 && <ScriptedCursor frames={cursorFrames1} t={t} clickTimes={[T.curAceptar]}/>}
        {t >= 21.4 && t < 27.8 && <ScriptedCursor frames={cursorFrames3} t={t} clickTimes={[T.curToggle]}/>}
      </div>

      {/* Slots 1·2·3 — anuncio de la tríada */}
      <div style={{position:'absolute', bottom:64, left:0, right:0, display:'flex', justifyContent:'center', gap:22, zIndex:6}}>
        {[0,1,2].map((i)=>{
          const p = clamp((t-T.slots[i])/0.45, 0, 1), e = Easing.easeOutBack(p);
          if (p<=0) return null;
          return (
            <div key={i} style={{display:'flex', alignItems:'center', gap:10, background:'rgba(15,23,42,0.92)', border:'1px solid rgba(255,255,255,0.14)', borderRadius:100, padding:'10px 22px', transform:`scale(${lerp(0.6,1,e)})`, opacity:clamp(p*1.3,0,1), boxShadow:'0 14px 36px rgba(15,23,42,0.3)'}}>
              <span className="f-mono" style={{width:26, height:26, borderRadius:100, background:'#0085FF', color:'#fff', fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>{i+1}</span>
              <span className="f-plex" style={{fontSize:13, fontWeight:700, color:'#fff', letterSpacing:'0.5px'}}>{['CRM','Tareas','Fichaje'][i]}</span>
            </div>
          );
        })}
      </div>

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