// === Escena 06 — "Los tres límites + eco" ===
// Cada límite en SU tarjeta, con su marco: la 1 lleva dentro el estado vacío (ReposicionSubpage.razor:16-19)
// y la 3 la cabecera con los KPI (:20-100) — son las dos ramas del mismo if y no pueden verse a la vez
// dentro de un mismo navegador. Aquí conviven como fichas del deck, nunca como un pantallazo.
// La 3 es la corregida por la auditoría: el icono gira una vez y los KPI se quedan en 3 · 183 · 2,
// porque la lectura va cacheada y GetOrSet_SRV no admite force (MemoryCacheService.vb:37-42, 93-111).
function EscenaRP06({ t }){
  const T = {
    tres:0.1,        // "Tres cosas antes de irte" -> 3 tarjetas vacías, punteadas
    viven:4.4,       // "viven en la fila del producto" -> tarjeta 1: la fila y sus 2 casillas
    menu:8.0,        // "ninguna pantalla de este menú" -> las 4 entradas se tachan en gris
    orden:12.6,      // "esto dirá todo en orden" -> el estado vacío asoma dentro de la tarjeta 1
    compra:15.9,     // "no compra y no avisa" -> tarjeta 2, sin overshoot
    correo:18.4,     // "correo ni notificación" -> el sobre y la campana se tachan
    abres:20.7,      // "cuando tú abres la pantalla" -> un cursor abre la pantalla; la lista, de golpe
    retraso:24.6,    // "unos minutos de retraso" -> tarjeta 3 con el reloj que avanza y se para
    recargar:26.1,   // "el botón de recargar" -> el icono gira UNA vez; los KPI NO cambian
    eco1:29.4,       // "Reposición no adivina" -> ECO mitad 1 (bookend)
    eco2:31.9,       // "del techo que pusiste" -> ECO mitad 2 · PANTALLA FIJA hasta el corte
    tarjetaStep:0.28, // desfase entre las 3 tarjetas punteadas
    tachaStep:0.20,   // desfase entre las 4 entradas del menú tachadas
    correoStep:0.20,  // desfase entre el sobre y la campana
    kpiStep:0.14,     // cascada de los tres KPI de la tarjeta 3
  };

  const AZUL = '#1d73e2';
  const AMBAR = '#918908';
  const ORO = '#b8860b';
  const GRIS = '#94A3B8';

  const X1 = 114, X2 = 690, X3 = 1266, CW = 540, CY = 210, CHT = 700;

  // ── Progresos ──
  const viP = clamp((t-T.viven)/0.6, 0, 1), viE = Easing.easeOutCubic(viP);
  const orP = clamp((t-T.orden)/0.6, 0, 1), orE = Easing.easeOutCubic(orP);
  const coP = clamp((t-T.compra)/0.6, 0, 1), coE = Easing.easeOutCubic(coP);
  const abP = t >= T.abres ? 1 : 0;   // aparece de golpe: la has pedido tú
  const reP = clamp((t-T.retraso)/0.6, 0, 1), reE = Easing.easeOutCubic(reP);
  const reloj = Easing.easeInOutCubic(clamp((t-T.retraso-0.25)/1.2, 0, 1));  // avanza un poco y se para
  const rcP = clamp((t-T.recargar)/0.7, 0, 1);
  const rcGiro = 360 * Easing.easeInOutCubic(rcP);
  const rcPulse = (t >= T.recargar && t < T.recargar+0.7) ? Math.sin(rcP*Math.PI) : 0;

  const veloOp = (t < T.eco1 ? 0 : clamp((t-T.eco1)/0.8, 0, 1)) * 0.95;
  const e1P = clamp((t-T.eco1)/0.6, 0, 1), e1E = Easing.easeOutCubic(e1P);
  const e2P = clamp((t-T.eco2)/0.6, 0, 1), e2E = Easing.easeOutCubic(e2P);
  const e2Pulse = (t >= T.eco2+0.6 && t < T.eco2+1.7) ? Math.sin((t-T.eco2-0.6)/1.1*Math.PI) : 0;
  const logoP = clamp((t-T.eco2-0.7)/0.7, 0, 1);

  const Icono = ({ n, s=24, c='#64748B', w=1.9 })=>{
    const P = {
      inventory_2: <><path d="M3 7.5 L12 3.2 L21 7.5 V16.5 L12 20.8 L3 16.5 Z"/><path d="M3 7.5 L12 11.8 L21 7.5"/><path d="M12 11.8 V20.8"/></>,
      warehouse:   <><path d="M3 10.5 L12 4.5 L21 10.5 V20 H3 Z"/><path d="M8 20 V13.5 H16 V20"/></>,
      production:  <><path d="M3.5 8 L12 3.6 L20.5 8 V16 L12 20.4 L3.5 16 Z"/><path d="M12 8.6 V13"/><path d="M12 15.9 h0.01"/></>,
      euro:        <><path d="M17.5 6.4 A7 7 0 1 0 17.5 17.6"/><path d="M5 10.4 H13"/><path d="M5 13.8 H12"/></>,
      cart:        <><path d="M2.6 4 H5.2 L7.7 15 H18.2 L20.6 7.2 H6"/><circle cx="9" cy="19" r="1.7"/><circle cx="17.4" cy="19" r="1.7"/></>,
      refresh:     <><path d="M20 12 A8 8 0 1 1 12 4 L17 4"/><path d="M17 4 V9"/></>,
      sobre:       <><rect x="2.6" y="5.4" width="18.8" height="13.2" rx="1.8"/><path d="M2.6 7 L12 13.4 L21.4 7"/></>,
      campana:     <><path d="M12 3.2 A6 6 0 0 1 18 9.2 V14 L20 17.2 H4 L6 14 V9.2 A6 6 0 0 1 12 3.2 Z"/><path d="M9.6 19.6 A2.6 2.6 0 0 0 14.4 19.6"/></>,
    }[n];
    return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={w} strokeLinecap="round" strokeLinejoin="round">{P}</svg>;
  };

  // ── El marco de un límite: se dibuja punteado y luego se llena ──
  const Tarjeta = ({ i, x, n, titulo, lleno, children })=>{
    const p = clamp((t-T.tres-i*T.tarjetaStep)/0.5, 0, 1), e = Easing.easeOutCubic(p);
    return (
      <div style={{position:'absolute', left:x, top:CY, width:CW, height:CHT, borderRadius:18,
                   background:lleno > 0 ? '#fff' : 'rgba(255,255,255,0.45)',
                   border:lleno > 0 ? '1px solid #E2E8F0' : '2px dashed #CBD5E1',
                   boxShadow:lleno > 0 ? `0 22px 54px rgba(15,23,42,${0.10*lleno})` : 'none',
                   opacity:p, transform:`translateY(${(1-e)*14}px)`}}>
        <div style={{position:'absolute', left:28, top:28, width:46, height:46, borderRadius:100,
                     background:lleno > 0 ? '#0F172A' : '#CBD5E1', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <span className="f-plex" style={{fontSize:24, fontWeight:800, color:'#fff'}}>{n}</span>
        </div>
        <div className="f-plex" style={{position:'absolute', left:88, top:30, width:424, fontSize:26, fontWeight:700,
                     color:lleno > 0 ? '#0F172A' : GRIS, lineHeight:1.22, letterSpacing:'-0.01em'}}>{titulo}</div>
        {children}
      </div>
    );
  };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="REPOSICIÓN · LOS LÍMITES" title={<span>Lo que esta pantalla no hace</span>}/>

      {/* ═══════════ 1 · dónde viven el mínimo y el máximo ═══════════ */}
      <Tarjeta i={0} x={X1} n="1" lleno={viP} titulo="Viven en la fila producto × almacén">
        {/* El esquema de la fila, con sus dos casillas */}
        <div style={{position:'absolute', left:28, top:130, width:484, borderRadius:12, background:'#F8FAFC',
                     border:'1px solid #E2E8F0', padding:'14px 16px 16px', opacity:viP,
                     transform:`translateY(${(1-viE)*10}px)`}}>
          <div style={{display:'flex', alignItems:'center', gap:9}}>
            <Icono n="inventory_2" s={20} c="#64748B" w={1.9}/>
            <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0F172A'}}>Guantes de nitrilo</span>
            <span className="f-plex" style={{fontSize:18, color:GRIS}}>×</span>
            <Icono n="warehouse" s={20} c="#64748B" w={1.9}/>
            <span className="f-plex" style={{fontSize:19, color:'#334155'}}>Nave</span>
          </div>
          <div style={{display:'flex', gap:16, marginTop:14}}>
            {[['Mínimo','30'], ['Máximo','60']].map(s=>(
              <div key={s[0]} style={{width:218, borderRadius:10, background:'#fff', border:`2px dashed ${AZUL}66`, padding:'8px 14px 10px'}}>
                <div className="f-plex" style={{fontSize:15, fontWeight:600, color:GRIS}}>{s[0]}</div>
                <div className="f-mono" style={{fontSize:27, fontWeight:800, color:AZUL, marginTop:2}}>{s[1]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Y ninguna pantalla de este menú donde escribirlos */}
        <div style={{position:'absolute', left:28, top:294, width:484, opacity:clamp((t-T.menu)/0.5,0,1)}}>
          <div style={{display:'flex', alignItems:'center', gap:9, paddingLeft:4}}>
            <span style={{width:8, height:8, borderRadius:100, background:ORO}}/>
            <span className="f-plex" style={{fontSize:15, fontWeight:700, letterSpacing:'2px', color:ORO}}>INVENTARIO</span>
          </div>
          {[['Productos','inventory_2'], ['Almacenes','warehouse'], ['Reposición','production'], ['Precios','euro']].map((e,i)=>{
            const tacha = Easing.easeInOutCubic(clamp((t-T.menu-0.3-i*T.tachaStep)/0.4, 0, 1));
            return (
              <div key={e[0]} style={{position:'relative', display:'flex', alignItems:'center', gap:11, height:42, paddingLeft:4}}>
                <Icono n={e[1]} s={20} c={tacha > 0.5 ? '#CBD5E1' : '#64748B'} w={1.9}/>
                <span className="f-plex" style={{fontSize:19, color:tacha > 0.5 ? GRIS : '#334155'}}>{e[0]}</span>
                <span style={{position:'absolute', left:0, width:230, top:'50%', height:2.5, borderRadius:2, background:GRIS,
                              transform:`scaleX(${tacha})`, transformOrigin:'left'}}/>
              </div>
            );
          })}
        </div>

        {/* Y si nadie los pone, la pantalla dice esto para siempre — en su propio marco */}
        {orP > 0 && (
          <div style={{position:'absolute', left:28, top:522, width:484, borderRadius:12, background:'#FBFCFE',
                       border:'1px solid #E2E8F0', padding:'14px 16px', textAlign:'center',
                       opacity:orP, transform:`translateY(${(1-orE)*10}px)`}}>
            <svg width="72" height="46" viewBox="0 0 130 100" fill="none" style={{display:'block', margin:'0 auto'}}>
              <path d="M22 42 L65 26 L108 42 L65 58 Z" fill="#EEF3FA" stroke="#CBD5E1" strokeWidth="3" strokeLinejoin="round"/>
              <path d="M25 47 V78 L65 93 L105 78 V47" stroke="#CBD5E1" strokeWidth="3" strokeLinejoin="round" fill="none"/>
            </svg>
            <div className="f-plex" style={{fontSize:24, fontWeight:800, color:'#0F172A', marginTop:8}}>Todo en orden</div>
            <div className="f-plex" style={{fontSize:15, color:'#64748B', marginTop:5, lineHeight:1.4}}>
              Ningún producto está por debajo de su stock mínimo en ningún almacén.
            </div>
          </div>
        )}
      </Tarjeta>

      {/* ═══════════ 2 · no compra y no avisa ═══════════ */}
      <Tarjeta i={1} x={X2} n="2" lleno={coP} titulo="No compra y no avisa">
        <div style={{position:'absolute', left:28, top:146, display:'flex', gap:16, opacity:coP,
                     transform:`translateY(${(1-coE)*10}px)`}}>
          {[['sobre','Correo'], ['campana','Notificación']].map((s,i)=>{
            const tacha = Easing.easeInOutCubic(clamp((t-T.correo-i*T.correoStep)/0.45, 0, 1));
            return (
              <div key={s[1]} style={{position:'relative', width:234, height:186, borderRadius:14, background:'#F8FAFC',
                                      border:'2px dashed #CBD5E1', display:'flex', flexDirection:'column',
                                      alignItems:'center', justifyContent:'center', gap:14}}>
                <Icono n={s[0]} s={72} c={tacha > 0.5 ? '#CBD5E1' : '#94A3B8'} w={1.5}/>
                <span className="f-plex" style={{fontSize:20, fontWeight:600, color:GRIS}}>{s[1]}</span>
                <span style={{position:'absolute', left:26, right:26, top:'50%', height:3, borderRadius:2, background:GRIS,
                              transform:`scaleX(${tacha})`, transformOrigin:'left'}}/>
              </div>
            );
          })}
        </div>
        <div className="f-plex" style={{position:'absolute', left:28, top:352, width:484, fontSize:21, color:'#64748B', lineHeight:1.4,
                     opacity:clamp((t-T.correo-0.5)/0.5,0,1)}}>
          La lista existe cuando tú abres la pantalla.
        </div>

        {/* La lista aparece de golpe: sin animación de llegada, porque la has pedido */}
        {abP > 0 && (
          <div style={{position:'absolute', left:28, top:412, width:484, borderRadius:12, overflow:'hidden',
                       background:'#fff', border:'1px solid #E2E8F0', boxShadow:'0 14px 34px rgba(15,23,42,0.10)'}}>
            <div style={{height:30, background:'#DEE1E6', display:'flex', alignItems:'center', gap:6, padding:'0 10px'}}>
              <span style={{width:9, height:9, borderRadius:100, background:'#C9CDD3'}}/>
              <span className="f-mono" style={{fontSize:12, color:'#5F6368'}}>play.dinaup.com/App/Pymes/Replenishment</span>
            </div>
            <div style={{padding:'14px 16px 16px'}}>
              <div className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0F172A'}}>Necesidad global de compra</div>
              {[['Guantes de nitrilo','88'], ['Cemento gris','80'], ['Silicona blanca','15']].map(f=>(
                <div key={f[0]} style={{display:'flex', justifyContent:'space-between', alignItems:'center',
                                        height:44, borderTop:'1px solid #F1F5F9'}}>
                  <span className="f-plex" style={{fontSize:18, color:'#334155'}}>{f[0]}</span>
                  <span className="f-mono" style={{fontSize:20, fontWeight:700, color:'#0F172A'}}>{f[1]}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </Tarjeta>

      {/* ═══════════ 3 · el número llega con retraso, y recargar no lo arregla ═══════════ */}
      <Tarjeta i={2} x={X3} n="3" lleno={reP} titulo="El número llega con retraso">
        <div style={{position:'absolute', left:28, top:140, display:'flex', alignItems:'center', gap:22, opacity:reP,
                     transform:`translateY(${(1-reE)*10}px)`}}>
          <svg width="132" height="132" viewBox="0 0 100 100" fill="none">
            <circle cx="50" cy="50" r="42" stroke="#CBD5E1" strokeWidth="4"/>
            <circle cx="50" cy="50" r="3.4" fill="#64748B"/>
            <path d="M50 50 V24" stroke="#64748B" strokeWidth="4" strokeLinecap="round"
                  transform={`rotate(${reloj*84} 50 50)`}/>
            <path d="M50 50 L70 58" stroke="#94A3B8" strokeWidth="3.4" strokeLinecap="round"/>
          </svg>
          <div style={{lineHeight:1.35}}>
            <div className="f-mono" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>1 a 3 min</div>
            <div className="f-plex" style={{fontSize:18, color:'#64748B', marginTop:4, width:300}}>la lectura va cacheada</div>
          </div>
        </div>

        {/* Y el botón de recargar no trae uno nuevo: los tres KPI se quedan igual */}
        <div style={{position:'absolute', left:28, top:298, display:'flex', alignItems:'center', gap:18,
                     opacity:clamp((t-T.recargar+0.5)/0.5,0,1)}}>
          <div style={{width:60, height:60, borderRadius:12, background:'#fff',
                       border:`1px solid ${rcP > 0 ? AZUL : '#E2E8F0'}`,
                       display:'flex', alignItems:'center', justifyContent:'center',
                       boxShadow:rcPulse > 0 ? `0 0 ${rcPulse*32}px rgba(29,115,226,0.5)` : 'none'}}>
            <div style={{transform:`rotate(${rcGiro}deg)`}}>
              <Icono n="refresh" s={30} c={rcP > 0 ? AZUL : '#64748B'} w={2}/>
            </div>
          </div>
          <span className="f-plex" style={{fontSize:21, color:'#64748B', width:394, lineHeight:1.35}}>
            Recargar vuelve a pedir la misma lista.
          </span>
        </div>

        {[['Productos a reponer','3','production',AMBAR], ['Unidades a comprar','183','cart',AZUL], ['Almacenes afectados','2','warehouse',AZUL]].map((k,i)=>{
          const p = clamp((t-T.recargar-0.15-i*T.kpiStep)/0.4, 0, 1);
          return (
            <div key={k[0]} style={{position:'absolute', left:28, top:398+i*82, width:484, height:70, borderRadius:12,
                         background:'#fff', border:'1px solid #E2E8F0', display:'flex', alignItems:'center', gap:16, padding:'0 20px',
                         opacity:p}}>
              <Icono n={k[2]} s={28} c={k[3]} w={1.8}/>
              <span className="f-plex" style={{fontSize:34, fontWeight:800, color:k[3]}}>{k[1]}</span>
              <span className="f-plex" style={{fontSize:18, color:'#6b7280'}}>{k[0]}</span>
            </div>
          );
        })}
        {rcP >= 1 && (
          <div className="f-plex" style={{position:'absolute', left:28, top:646, width:484, fontSize:19, fontWeight:600, color:GRIS,
                       textAlign:'center', opacity:clamp((t-T.recargar-0.8)/0.5,0,1)}}>
            los mismos tres números
          </div>
        )}
      </Tarjeta>

      {/* ═══════════ ECO · pantalla fija hasta el corte ═══════════ */}
      {veloOp > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {e1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:388, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:e1E, transform:`translateY(${(1-e1E)*18}px)`}}>
          Reposición no adivina.
        </div>
      )}
      {e2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:504, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:e2E, transform:`translateY(${(1-e2E)*18}px)`,
                                        textShadow:e2Pulse > 0 ? `0 0 ${e2Pulse*38}px rgba(0,133,255,0.45)` : 'none'}}>
          <span className="grad-text">Resta lo que tienes del techo que pusiste.</span>
        </div>
      )}
      {logoP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:700, display:'flex', justifyContent:'center', opacity:logoP*0.85}}>
          <DinaupLogo size={40}/>
        </div>
      )}

      {/* El cursor abre la pantalla de la tarjeta 2 y se va */}
      <ScriptedCursor t={t} clickTimes={[T.abres]} frames={[
        { t:19.2, x:1180, y:1020 },
        { t:20.50, x:900, y:660 },
        { t:23.4,  x:900, y:660 },
        { t:24.4,  x:1980, y:1140 },
      ]}/>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaRP06 });