// === Escena 05 — "El mismo mínimo, en la venta" ===
// La tarjeta de la galería del punto de venta y la fila de Reposición, lado a lado, con el mismo
// producto: la barra se llena con el FÍSICO (34 sobre 60, relleno 57 %, marca del mínimo al 50 %,
// verde #16a34a porque 34 ≥ 30) y la pastilla pinta el DISPONIBLE (20 uds — ConceptoModel.cs:94
// vía StockPorAlmacenModule.cs:120-132), que es lo que mira Reposición: 20 < 30, entra y pide 40.
// El tooltip «Stock 34 · mínimo 30 · máximo 60» es un title NATIVO (ProductoCardUv2.razor:44, 107):
// solo sale con el cursor encima, y el cursor se queda mientras está visible.
function EscenaRP05({ t }){
  const T = {
    galeria:0.4,         // "galería del punto de venta" -> entra la tarjeta del producto
    control:2.7,         // "con control de stock" -> asoma y se va la variante «Sin control de stock»
    pastilla:4.1,        // "pastilla de unidades" -> se realza la pastilla; marca 20, no 34
    barrita:7.9,         // "una barrita" -> el carril se dibuja vacío
    marca:9.6,           // "una marca en el mínimo" -> la marca se estampa al 50 % del carril
    techo:10.7,          // "el techo escrito al lado" -> entra «máx 60»
    fisico:13.4,         // "se llena con el stock físico" -> el relleno crece al 57 % + el tooltip
    treintaycuatro:18.8, // "treinta y cuatro físicos" -> se enciende el 34 + línea al relleno
    disponibles:20.2,    // "veinte disponibles" -> pantalla partida: entra la fila de Reposición
    verde:24.3,          // "la barra está verde" -> glow verde fijo; nada más se mueve
    lista:27.4,          // "están en la lista" -> la fila de la derecha se marca en ámbar
    pausa:29.1,          // (pausa de 0.5 s) -> quietud total: solo las 2 mitades encendidas
    distintas:31.5,      // "miden cosas distintas" -> etiquetas «físico» y «disponible»
    salida:34.5,         // "lo que esta pantalla no hace" -> salida
    rellenoDur:1.00,      // cuánto tarda el relleno en llegar al 57 %
    tooltipDelay:1.40,    // retardo del title nativo desde T.fisico (relleno + retardo del navegador)
    etiquetaStep:0.30,    // desfase entre las etiquetas «físico» y «disponible»
  };

  const VERDE = '#16a34a';   // ProductoCardUv2.razor.css:116 — relleno con el físico por encima del mínimo
  const AMBAR = '#918908';   // --rz-warning-dark, el color de la columna «Pedir»
  const AZUL  = '#1d73e2';

  // ── Geometría ──
  const split = Easing.easeOutCubic(clamp((t-T.disponibles)/0.75, 0, 1));
  const CARDX = lerp(610, 150, split), CARDY = 250;
  const RAILX = CARDX + 28, RAILY = CARDY + 348, RAILW = 480, RAILH = 26;
  const FILL = 0.57, MARCA = 0.50;
  const relleno = Easing.easeOutCubic(clamp((t-T.fisico)/T.rellenoDur, 0, 1));
  const FINX = RAILX + RAILW*FILL;
  const TIPX = FINX + 16, TIPY = RAILY + RAILH/2 + 26;

  // ── Progresos ──
  const gaP = clamp((t-T.galeria)/0.65, 0, 1), gaE = Easing.easeOutCubic(gaP);
  const coIn = clamp((t-T.control)/0.4, 0, 1), coOut = clamp((t-T.control-0.9)/0.4, 0, 1);
  const paPulse = (t >= T.pastilla && t < T.pastilla+0.9) ? Math.sin((t-T.pastilla)/0.9*Math.PI) : 0;
  const baP = clamp((t-T.barrita)/0.45, 0, 1);
  const maP = clamp((t-T.marca)/0.35, 0, 1), maE = Easing.easeOutBack(maP);
  const teP = clamp((t-T.techo)/0.4, 0, 1);
  const quieto = clamp((t-T.pausa)/0.45, 0, 1);
  const tipP = clamp((t-T.fisico-T.tooltipDelay)/0.28, 0, 1) * (1-quieto);
  const t34 = clamp((t-T.treintaycuatro)/0.4, 0, 1);
  const t34Draw = Easing.easeInOutCubic(clamp((t-T.treintaycuatro-0.15)/0.5, 0, 1));
  const veGlow = clamp((t-T.verde)/0.5, 0, 1);
  const liP = clamp((t-T.lista)/0.5, 0, 1);
  const etP = clamp((t-T.distintas)/0.5, 0, 1);
  const salP = clamp((t-T.salida)/0.7, 0, 1);
  const vivo = 1 - salP;

  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"/></>,
      infinito:    <path d="M7.6 9 C10 9 11 12 12 12 C13 12 14 15 16.4 15 A3 3 0 1 0 16.4 9 C14 9 13 12 12 12 C11 12 10 15 7.6 15 A3 3 0 1 1 7.6 9 Z"/>,
    }[n];
    return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={w} strokeLinecap="round" strokeLinejoin="round">{P}</svg>;
  };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL MISMO MÍNIMO, EN LA VENTA" title={<span>Dos pantallas, dos magnitudes</span>}/>

      {/* ─────────── El divisor: la comparación ES el argumento ─────────── */}
      <div style={{position:'absolute', left:955, top:220, width:2, height:700,
                   borderLeft:'2px dashed #CBD5E1', opacity:split*0.9*vivo}}/>

      {/* ─────────── Contexto de galería: más baldosas, sin dato ─────────── */}
      {[{x:-190, y:36}, {x:-382, y:36}].map((n,i)=>(
        <div key={i} style={{position:'absolute', left:CARDX+n.x, top:CARDY+n.y, width:170, height:350, borderRadius:16,
                             background:'#fff', border:'1px solid #E2E8F0',
                             opacity:gaP*0.16*(1-split)*vivo}}/>
      ))}

      {/* ─────────── La tarjeta del punto de venta ─────────── */}
      <div style={{position:'absolute', left:CARDX, top:CARDY, width:700, height:420, borderRadius:20,
                   background:'#fff', border:'1px solid #E2E8F0', boxShadow:'0 26px 64px rgba(15,23,42,0.12)',
                   opacity:gaP*vivo, transform:`translateX(${(1-gaE)*30}px)`}}>
        {/* Foto del producto */}
        <div style={{position:'absolute', left:28, top:24, width:644, height:170, borderRadius:14, background:'#F1F5F9',
                     display:'flex', alignItems:'center', justifyContent:'center'}}>
          <Icono n="inventory_2" s={66} c="#CBD5E1" w={1.4}/>
        </div>
        <div className="f-plex" style={{position:'absolute', left:28, top:212, fontSize:30, fontWeight:700, color:'#0F172A'}}>
          Guantes de nitrilo
        </div>
        {/* La pastilla: pinta el DISPONIBLE (20), no el físico */}
        <div style={{position:'absolute', left:28, top:262, display:'inline-flex', alignItems:'center', gap:10,
                     height:46, padding:'0 18px', borderRadius:99, background:'#F8FAFC',
                     border:`1px solid ${paPulse > 0 ? AZUL : '#E2E8F0'}`,
                     boxShadow:paPulse > 0 ? `0 0 ${paPulse*28}px rgba(29,115,226,0.5)` : 'none'}}>
          <Icono n="inventory_2" s={24} c="#64748B" w={1.9}/>
          <span className="f-mono" style={{fontSize:27, fontWeight:800, color:'#0F172A'}}>20</span>
          <span className="f-plex" style={{fontSize:19, color:'#64748B'}}>uds</span>
        </div>
        {/* La barra de niveles: solo existe porque hay máximo */}
        <div style={{position:'absolute', left:28, top:348, width:RAILW, height:RAILH, borderRadius:99,
                     background:'#EEF2F6', opacity:baP, overflow:'visible',
                     boxShadow:veGlow > 0 ? `0 0 ${veGlow*30}px rgba(22,163,74,0.55)` : 'none'}}>
          <div style={{width:RAILW*FILL*relleno, height:'100%', borderRadius:99, background:VERDE}}/>
          {maP > 0 && (
            <div style={{position:'absolute', left:RAILW*MARCA - 2, top:-4, width:4, height:34, borderRadius:2,
                         background:'rgba(29,29,31,0.5)', transform:`scaleY(${lerp(0.3,1,maE)})`, transformOrigin:'center'}}/>
          )}
        </div>
        <span className="f-plex" style={{position:'absolute', left:528, top:350, fontSize:21, color:'#64748B', opacity:teP}}>máx 60</span>
      </div>

      {/* ─────────── La variante sin control de stock: asoma y se va ─────────── */}
      {coIn > 0 && coOut < 1 && (
        <div style={{position:'absolute', left:1370, top:300, width:400, height:300, borderRadius:20,
                     background:'#fff', border:'1px solid #E2E8F0', boxShadow:'0 18px 44px rgba(15,23,42,0.08)',
                     opacity:coIn*(1-coOut)*0.55}}>
          <div style={{position:'absolute', left:24, top:22, width:352, height:120, borderRadius:12, background:'#F1F5F9'}}/>
          <div className="f-plex" style={{position:'absolute', left:24, top:160, fontSize:24, fontWeight:700, color:'#0F172A'}}>Mano de obra</div>
          <div style={{position:'absolute', left:24, top:206, display:'inline-flex', alignItems:'center', gap:9,
                       height:42, padding:'0 16px', borderRadius:99, background:'#F8FAFC', border:'1px solid #E2E8F0'}}>
            <Icono n="infinito" s={22} c="#64748B" w={1.9}/>
            <span className="f-plex" style={{fontSize:18, color:'#64748B'}}>Sin control de stock</span>
          </div>
          <div className="f-plex" style={{position:'absolute', left:24, top:262, fontSize:16, color:'#94A3B8'}}>ni pastilla de unidades, ni barra</div>
        </div>
      )}

      {/* ─────────── El tooltip nativo, y solo con el cursor encima ─────────── */}
      {tipP > 0 && (
        <div style={{position:'absolute', left:TIPX, top:TIPY, padding:'11px 18px', borderRadius:6,
                     background:'#2B2B2B', border:'1px solid #4A4A4A', boxShadow:'0 4px 14px rgba(0,0,0,0.32)',
                     opacity:tipP*vivo, whiteSpace:'nowrap'}}>
          <span className="f-mono" style={{fontSize:23, color:'#E8E8E8'}}>Stock </span>
          <span className="f-mono" style={{fontSize:23, fontWeight:700, color:t34 > 0 ? '#7EE59B' : '#E8E8E8',
                  textShadow:t34 > 0 ? '0 0 18px rgba(22,163,74,0.9)' : 'none'}}>34</span>
          <span className="f-mono" style={{fontSize:23, color:'#E8E8E8'}}> · mínimo 30 · máximo 60</span>
        </div>
      )}
      {t34Draw > 0 && tipP > 0 && (
        <svg style={{position:'absolute', left:0, top:0, pointerEvents:'none', opacity:tipP*vivo}} width="1920" height="1080" fill="none">
          <path d={`M${TIPX+112} ${TIPY-2} L${FINX} ${RAILY+RAILH+6}`} pathLength="1" stroke={VERDE} strokeWidth="3"
                strokeLinecap="round" strokeDasharray="1" strokeDashoffset={1-t34Draw}/>
          <circle cx={FINX} cy={RAILY+RAILH/2} r="6" fill={VERDE} opacity={clamp((t34Draw-0.7)/0.3,0,1)}/>
        </svg>
      )}

      {/* ─────────── La otra mitad: la fila de Reposición del mismo producto ─────────── */}
      {split > 0 && (
        <div style={{position:'absolute', left:1010, top:250, width:780, borderRadius:16, background:'#fff',
                     border:`1px solid ${liP > 0 ? AMBAR : '#E2E8F0'}`, padding:'22px 24px 24px',
                     boxShadow:liP > 0 ? `0 20px 50px rgba(145,137,8,${liP*0.22})` : '0 20px 50px rgba(15,23,42,0.09)',
                     opacity:split*vivo, transform:`translateX(${(1-split)*150}px)`}}>
          <div className="f-plex" style={{fontSize:17, fontWeight:600, letterSpacing:'2px', color:'#94A3B8'}}>POR ALMACÉN</div>
          <div style={{display:'flex', alignItems:'center', gap:11, marginTop:10}}>
            <Icono n="warehouse" s={26} c="#334155" w={1.9}/>
            <span className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>Tienda</span>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'260px 118px 118px 118px 118px', alignItems:'center', height:40, marginTop:14}}>
            {['Producto','Disponible','Mínimo','Máximo','Pedir'].map((h,j)=>(
              <span key={h} className="f-plex" style={{fontSize:17, fontWeight:600, color:'#64748B',
                      textAlign:j === 0 ? 'left' : 'right', paddingRight:j === 0 ? 0 : 6}}>{h}</span>
            ))}
          </div>
          {[['Cemento gris','40','60','120','80'], ['Guantes de nitrilo','20','30','60','40']].map((f,k)=>{
            const esGuantes = k === 1;
            return (
              <div key={f[0]} style={{display:'grid', gridTemplateColumns:'260px 118px 118px 118px 118px', alignItems:'center',
                           height:62, borderTop:'1px solid #F1F5F9',
                           background:esGuantes && liP > 0 ? 'rgba(145,137,8,0.08)' : 'transparent',
                           opacity:esGuantes ? 1 : 1-liP*0.55}}>
                <span className="f-plex" style={{fontSize:20, fontWeight:esGuantes ? 700 : 400, color:'#0F172A'}}>{f[0]}</span>
                <span className="f-mono" style={{fontSize:esGuantes ? 26 : 21, fontWeight:esGuantes ? 800 : 400, textAlign:'right', paddingRight:6,
                        color:esGuantes ? AMBAR : '#334155'}}>{f[1]}</span>
                <span className="f-mono" style={{fontSize:21, color:'#334155', textAlign:'right', paddingRight:6}}>{f[2]}</span>
                <span className="f-mono" style={{fontSize:21, color:'#334155', textAlign:'right', paddingRight:6}}>{f[3]}</span>
                <span className="f-mono" style={{fontSize:24, fontWeight:700, color:AMBAR, textAlign:'right', paddingRight:6}}>{f[4]}</span>
              </div>
            );
          })}
        </div>
      )}

      {/* ─────────── Los dos veredictos, cada uno con su color ─────────── */}
      {veGlow > 0 && (
        <div style={{position:'absolute', left:CARDX, top:730, display:'inline-flex', alignItems:'center', gap:12,
                     padding:'14px 26px', borderRadius:99, background:'rgba(22,163,74,0.10)', border:`1px solid ${VERDE}55`,
                     opacity:veGlow*vivo}}>
          <span className="f-mono" style={{fontSize:26, fontWeight:800, color:VERDE}}>34 ≥ 30</span>
          <span className="f-plex" style={{fontSize:23, color:'#0F172A'}}>la barra sigue verde</span>
        </div>
      )}
      {liP > 0 && (
        <div style={{position:'absolute', left:1010, top:596, display:'inline-flex', alignItems:'center', gap:12,
                     padding:'14px 26px', borderRadius:99, background:'rgba(145,137,8,0.10)', border:`1px solid ${AMBAR}55`,
                     opacity:liP*vivo}}>
          <span className="f-mono" style={{fontSize:26, fontWeight:800, color:AMBAR}}>20 &lt; 30</span>
          <span className="f-plex" style={{fontSize:23, color:'#0F172A'}}>entra en la lista, pide 40</span>
        </div>
      )}

      {/* ─────────── Y qué mide cada mitad ─────────── */}
      {etP > 0 && (
        <div style={{position:'absolute', left:150, top:836, width:700, textAlign:'center',
                     opacity:clamp((t-T.distintas)/0.5,0,1)*vivo}}>
          <span className="f-plex" style={{fontSize:44, fontWeight:800, color:VERDE, letterSpacing:'-0.02em'}}>físico</span>
        </div>
      )}
      {etP > 0 && (
        <div style={{position:'absolute', left:1010, top:836, width:780, textAlign:'center',
                     opacity:clamp((t-T.distintas-T.etiquetaStep)/0.5,0,1)*vivo}}>
          <span className="f-plex" style={{fontSize:44, fontWeight:800, color:AMBAR, letterSpacing:'-0.02em'}}>disponible</span>
        </div>
      )}

      {/* El cursor se posa en la barra cuando el relleno llega, y se queda mientras haya tooltip */}
      <ScriptedCursor t={t} frames={[
        { t:0.6,   x:1820, y:1010 },
        { t:13.50, x:1820, y:1010 },
        { t:14.39, x:FINX, y:RAILY + RAILH/2 },
        { t:33.0,  x:FINX, y:RAILY + RAILH/2 },
        { t:34.2,  x:1980, y:1140 },
      ]}/>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaRP05 });