// === Escena 01 — "La pantalla" (contrato) ===
// El menú Inventario se enciende → entra la pantalla de Reposición → los tres KPI compactos con
// sus rótulos literales → las dos pestañas y la lista → el único botón (recargar) → lo que NO
// existe (dos tarjetas fantasma tachadas en gris) → LA ÚNICA COSA como promesa → el interrogante.
// Literales y colores verificados: ReposicionSubpage.razor:6-9, 24-26, 32-35, 57-61 ·
// PymesPage.razor:95-99 · var.css:134 (#1d73e2), :154 (#ffc107), :157 (#918908, la desviación
// declarada del plan: el ámbar de producto se pinta oscuro para que se lea a 1920).
function EscenaRP01({ t }){
  const T = {
    menu:0.1,          // "Inventario." -> se enciende el grupo del menú; halo sobre «Reposición»
    pantalla:4.8,      // "una sola pregunta" -> entra la pantalla desde la derecha
    kpis:9.2,          // "tres cifras" -> las 3 píldoras de KPI en cascada
    kpi1:10.1,         // "productos a reponer" -> se realza la píldora 1
    kpi2:11.3,         // "unidades a comprar" -> se realza la píldora 2
    kpi3:12.3,         // "almacenes afectados" -> se realza la píldora 3
    pestanas:15.9,     // "contada de dos maneras" -> se dibujan las 2 pestañas y la lista
    recargar:19.4,     // "el de recargar" -> un pulse + el icono gira una vez
    decide:26.0,       // "aquí se decide" -> tarjetas fantasma «Generar pedido» / «Enviar al proveedor»
    unica1:27.8,       // "Reposición no adivina" -> ÚNICA COSA mitad 1 (promesa)
    unica2:30.2,       // "del techo que pusiste" -> ÚNICA COSA mitad 2
    salida:34.0,       // "quién decide que un producto" -> interrogante sobre el KPI · salida
    menuStep:0.16,      // cascada entre las 4 entradas del menú
    haloDelay:1.30,     // retardo del halo sobre «Reposición» desde T.menu
    kpiStep:0.12,       // cascada de entrada de las 3 píldoras
    listaDelay:0.55,    // retardo de la tarjeta de la lista desde T.pestanas
    filaStep:0.10,      // cascada de las 3 filas de la lista
    fantasmaDelay:0.20, // retardo de las tarjetas fantasma desde T.decide
    fantasmaStep:0.22,  // desfase entre las dos tarjetas fantasma
  };

  // ── Colores del producto (var.css) ──
  const AZUL = '#1d73e2';     // --rz-primary
  const AMBAR = '#918908';    // --rz-warning-dark (desviación declarada: #ffc107 no se lee a 1920)
  const ORO = '#b8860b';      // color del grupo Inventario del menú (PymesPage.razor:95)

  // ── Geometría de la ventana ──
  const WX = 130, WY = 182, WW = 1660, CH = 76;
  const BY = WY + CH;                 // 258 — arranque del cuerpo
  const BH = 728;                     // alto del cuerpo
  const SW = 300;                     // ancho del menú lateral
  const CX = WX + SW;                 // 430 — arranque del contenido
  const PAD = 30;
  const IX = CX + PAD;                // 460 — margen interior del contenido
  const IW = WW - SW - PAD*2;         // 1300

  // ── Progresos ──
  const winP = clamp(t/0.9, 0, 1), winE = Easing.easeOutCubic(winP);
  const mnP  = clamp((t-T.menu)/0.5, 0, 1);
  const haloP = clamp((t-T.menu-T.haloDelay)/0.45, 0, 1);
  const haloPulse = (t >= T.menu+T.haloDelay && t < T.menu+T.haloDelay+1.0)
    ? Math.sin((t-T.menu-T.haloDelay)/1.0*Math.PI) : 0;

  const paP = clamp((t-T.pantalla)/0.75, 0, 1), paE = Easing.easeOutCubic(paP);
  const peP = clamp((t-T.pestanas)/0.4, 0, 1);
  const liP = clamp((t-T.pestanas-T.listaDelay)/0.6, 0, 1), liE = Easing.easeOutCubic(liP);

  // El subrayado recorre de una pestaña a la otra y vuelve a «Vista global»
  const TAB1X = IX, TAB2X = IX + 262, TABW = 250;
  const subW = TABW * clamp((t-T.pestanas)/0.35, 0, 1);
  const subX = interpolate(
    [T.pestanas+0.55, T.pestanas+1.00, T.pestanas+1.25, T.pestanas+1.70],
    [TAB1X, TAB2X, TAB2X, TAB1X], Easing.easeInOutCubic)(t);

  // El botón de recargar: un pulse y una vuelta. No queda girando.
  const reP = clamp((t-T.recargar)/0.7, 0, 1);
  const reGiro = 360 * Easing.easeInOutCubic(reP);
  const rePulse = (t >= T.recargar && t < T.recargar+0.7) ? Math.sin(reP*Math.PI) : 0;

  // Las dos tarjetas que NO existen
  const fanIn  = clamp((t-T.decide-T.fantasmaDelay)/0.45, 0, 1);
  const fanOut = clamp((t-T.unica1+0.35)/0.3, 0, 1);

  // La Única Cosa (promesa) y la vuelta a la pantalla con el interrogante
  const salP = clamp((t-T.salida)/0.6, 0, 1), salE = Easing.easeOutCubic(salP);
  const veloOp = (t < T.unica1 ? 0 : clamp((t-T.unica1)/0.7, 0, 1)) * (1-salP) * 0.94;
  const u1P = clamp((t-T.unica1)/0.6, 0, 1), u1E = Easing.easeOutCubic(u1P);
  const u2P = clamp((t-T.unica2)/0.6, 0, 1), u2E = Easing.easeOutCubic(u2P);
  const u2Pulse = (t >= T.unica2+0.6 && t < T.unica2+1.7) ? Math.sin((t-T.unica2-0.6)/1.1*Math.PI) : 0;
  const intP = clamp((t-T.salida-0.25)/0.9, 0, 1);

  // ── Iconos del producto, dibujados a mano (no hay fuente de iconos en el deck) ──
  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"/></>,
      globe:            <><circle cx="12" cy="12" r="9"/><path d="M3 12 H21"/><path d="M12 3 C8.2 6.8 8.2 17.2 12 21 C15.8 17.2 15.8 6.8 12 3"/></>,
      refresh:          <><path d="M20 12 A8 8 0 1 1 12 4 L17 4"/><path d="M17 4 V9"/></>,
    }[n];
    return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={w} strokeLinecap="round" strokeLinejoin="round">{P}</svg>;
  };

  // ── Una entrada del menú de Inventario ──
  const Entrada = ({ nombre, icono, i, activa })=>{
    const p = clamp((t-T.menu-i*T.menuStep)/0.4, 0, 1), e = Easing.easeOutCubic(p);
    const marcada = activa && haloP > 0;
    return (
      <div style={{position:'relative', display:'flex', alignItems:'center', gap:13, height:52, paddingLeft:22,
                   borderLeft:`4px solid ${marcada ? AZUL : 'transparent'}`,
                   background:marcada ? 'rgba(29,115,226,0.09)' : 'transparent',
                   opacity:e, transform:`translateX(${(1-e)*-12}px)`,
                   boxShadow:haloPulse > 0 && activa ? `inset 0 0 ${haloPulse*30}px rgba(29,115,226,${haloPulse*0.35})` : 'none'}}>
        <Icono n={icono} s={23} c={marcada ? AZUL : '#64748B'} w={1.9}/>
        <span className="f-plex" style={{fontSize:20, fontWeight:marcada ? 700 : 500, color:marcada ? AZUL : '#334155'}}>{nombre}</span>
      </div>
    );
  };

  // ── Una píldora de KPI compacto (DnzKpiCard IsCompact) ──
  const Kpi = ({ i, valor, rotulo, icono, color, realce })=>{
    const p = clamp((t-T.kpis-i*T.kpiStep)/0.5, 0, 1), e = Easing.easeOutCubic(p);
    const on = t >= realce;
    return (
      <div style={{position:'relative', display:'flex', alignItems:'center', gap:16, width:330, height:96,
                   padding:'0 22px', borderRadius:14, background:'#fff',
                   border:`1px solid ${on ? color : '#E2E8F0'}`,
                   boxShadow:on ? `0 12px 30px ${color}22` : '0 2px 8px rgba(15,23,42,0.05)',
                   opacity:p, transform:`translateY(${(1-e)*14}px)`}}>
        <Icono n={icono} s={34} c={color} w={1.8}/>
        <div style={{lineHeight:1.1}}>
          <div className="f-plex" style={{fontSize:46, fontWeight:800, color, letterSpacing:'-0.02em'}}>{valor}</div>
          <div className="f-plex" style={{fontSize:18, color:'#6b7280', marginTop:2}}>{rotulo}</div>
        </div>
      </div>
    );
  };

  // ── Una fila de la rejilla «Vista global» ──
  const Fila = ({ i, producto, unidades, almacenes })=>{
    const p = clamp((t-T.pestanas-T.listaDelay-0.25-i*T.filaStep)/0.4, 0, 1);
    return (
      <div style={{display:'grid', gridTemplateColumns:'52px 720px 300px 180px', alignItems:'center', height:62,
                   borderTop:'1px solid #F1F5F9', opacity:p}}>
        <span style={{color:'#94A3B8', fontSize:18, paddingLeft:8}}>▸</span>
        <span className="f-plex" style={{fontSize:21, color:'#0F172A'}}>{producto}</span>
        <span className="f-mono" style={{fontSize:23, fontWeight:700, color:'#0F172A', textAlign:'right'}}>{unidades}</span>
        <span className="f-mono" style={{fontSize:22, color:'#334155', textAlign:'center'}}>{almacenes}</span>
      </div>
    );
  };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="REPOSICIÓN · CÓMO SE USA" title={<span>Qué comprar, y cuánto</span>}/>

      {/* ─────────── La ventana de play ─────────── */}
      <div style={{position:'absolute', left:WX, top:WY, width:WW, opacity:winE*(1-veloOp/0.94*0.82),
                   transform:`translateY(${(1-winE)*20}px)`, filter:veloOp > 0 ? 'saturate(0.55)' : 'none'}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 34px 80px rgba(15,23,42,0.13)', overflow:'hidden'}}>
          <BrowserChrome url="play.dinaup.com/App/Pymes/Replenishment" title="Reposición"/>
          <div style={{display:'flex', height:BH}}>

            {/* Menú lateral de Pymes */}
            <div style={{width:SW, flexShrink:0, background:'#FBFCFE', borderRight:'1px solid #EEF2F6', paddingTop:24}}>
              <div className="f-plex" style={{fontSize:15, fontWeight:700, letterSpacing:'2.4px', color:'#94A3B8', padding:'0 26px 18px'}}>PYMES</div>
              <div style={{display:'flex', alignItems:'center', gap:10, padding:'0 26px 10px', opacity:mnP}}>
                <span style={{width:9, height:9, borderRadius:100, background:ORO}}/>
                <span className="f-plex" style={{fontSize:17, fontWeight:700, letterSpacing:'2px', color:ORO}}>INVENTARIO</span>
              </div>
              <Entrada i={0} nombre="Productos"  icono="inventory_2"/>
              <Entrada i={1} nombre="Almacenes"  icono="warehouse"/>
              <Entrada i={2} nombre="Reposición" icono="production" activa/>
              <Entrada i={3} nombre="Precios"    icono="euro"/>
            </div>

            {/* Contenido — entra desde la derecha */}
            <div style={{flex:1, position:'relative', opacity:paP, transform:`translateX(${(1-paE)*34}px)`}}>

              {/* Cabecera: título + el único botón */}
              <div style={{position:'absolute', left:PAD, top:24, right:PAD, display:'flex', alignItems:'center', gap:16}}>
                <Icono n="production" s={38} c="#0F172A" w={1.8}/>
                <span className="f-plex" style={{fontSize:40, fontWeight:700, color:'#0F172A', letterSpacing:'-0.02em'}}>Reposición</span>
                <div style={{flex:1}}/>
                <div style={{position:'relative', width:56, height:56, borderRadius:12,
                             border:`1px solid ${reP > 0 ? AZUL : '#E2E8F0'}`, background:'#fff',
                             display:'flex', alignItems:'center', justifyContent:'center',
                             boxShadow:rePulse > 0 ? `0 0 ${rePulse*34}px rgba(29,115,226,0.55)` : 'none'}}>
                  <div style={{transform:`rotate(${reGiro}deg)`}}>
                    <Icono n="refresh" s={28} c={reP > 0 ? AZUL : '#64748B'} w={2}/>
                  </div>
                </div>
              </div>

              {/* Los tres KPI compactos */}
              <div style={{position:'absolute', left:PAD, top:116, display:'flex', gap:26}}>
                <Kpi i={0} valor="3"   rotulo="Productos a reponer" icono="production"  color={AMBAR} realce={T.kpi1}/>
                <Kpi i={1} valor="183" rotulo="Unidades a comprar"  icono="cart"        color={AZUL}  realce={T.kpi2}/>
                <Kpi i={2} valor="2"   rotulo="Almacenes afectados" icono="warehouse"   color={AZUL}  realce={T.kpi3}/>
              </div>

              {/* Las dos pestañas */}
              <div style={{position:'absolute', left:PAD, top:240, display:'flex', gap:12, opacity:peP}}>
                {[['Vista global','globe'], ['Por almacén','warehouse']].map((p,i)=>(
                  <div key={p[0]} style={{width:TABW, height:58, display:'flex', alignItems:'center', justifyContent:'center', gap:11}}>
                    <Icono n={p[1]} s={24} c={i === 0 ? AZUL : '#64748B'} w={1.9}/>
                    <span className="f-plex" style={{fontSize:25, fontWeight:i === 0 ? 700 : 500, color:i === 0 ? AZUL : '#64748B'}}>{p[0]}</span>
                  </div>
                ))}
              </div>
              {peP > 0 && (
                <div style={{position:'absolute', left:subX - CX, top:298, width:subW, height:4, borderRadius:2, background:AZUL}}/>
              )}
              <div style={{position:'absolute', left:PAD, right:PAD, top:300, height:1, background:'#EEF2F6', opacity:peP}}/>

              {/* La lista: «Necesidad global de compra» */}
              <div style={{position:'absolute', left:PAD, top:318, width:IW, opacity:liP,
                           transform:`translateY(${(1-liE)*14}px)`}}>
                <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:14, padding:'22px 24px 18px'}}>
                  <div style={{display:'flex', alignItems:'center', gap:12}}>
                    <Icono n="globe" s={26} c={AZUL} w={1.9}/>
                    <span className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>Necesidad global de compra</span>
                  </div>
                  <div className="f-plex" style={{fontSize:19, color:'#64748B', opacity:0.75, marginTop:8, lineHeight:1.35, maxWidth:1100}}>
                    Unidades totales a comprar de cada producto para abastecer todos los almacenes bajo mínimo. Expande una fila para ver el reparto.
                  </div>
                  <div style={{display:'grid', gridTemplateColumns:'52px 720px 300px 180px', alignItems:'center', height:44, marginTop:14}}>
                    <span/>
                    <span className="f-plex" style={{fontSize:18, fontWeight:600, color:'#64748B'}}>Producto</span>
                    <span className="f-plex" style={{fontSize:18, fontWeight:600, color:'#64748B', textAlign:'right'}}>Unidades a comprar</span>
                    <span className="f-plex" style={{fontSize:18, fontWeight:600, color:'#64748B', textAlign:'center'}}>Almacenes</span>
                  </div>
                  <Fila i={0} producto="Guantes de nitrilo" unidades="88" almacenes="2"/>
                  <Fila i={1} producto="Cemento gris"       unidades="80" almacenes="1"/>
                  <Fila i={2} producto="Silicona blanca"    unidades="15" almacenes="1"/>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

      {/* ─────────── Lo que no existe: dos tarjetas fantasma, tachadas en gris ─────────── */}
      {fanIn > 0 && fanOut < 1 && (
        <div style={{position:'absolute', left:560, top:672, display:'flex', gap:40, opacity:(1-fanOut)}}>
          {['Generar pedido', 'Enviar al proveedor'].map((n,i)=>{
            const p = clamp((t-T.decide-T.fantasmaDelay-i*T.fantasmaStep)/0.4, 0, 1);
            const tacha = Easing.easeInOutCubic(clamp((t-T.decide-T.fantasmaDelay-i*T.fantasmaStep-0.3)/0.45, 0, 1));
            return (
              <div key={n} style={{position:'relative', width:380, height:104, borderRadius:14,
                                   background:'rgba(241,245,249,0.96)', border:'2px dashed #CBD5E1',
                                   display:'flex', alignItems:'center', justifyContent:'center',
                                   opacity:p, transform:`translateY(${(1-Easing.easeOutCubic(p))*10}px)`}}>
                <span className="f-plex" style={{fontSize:26, fontWeight:600, color:'#94A3B8'}}>{n}</span>
                <span style={{position:'absolute', left:34, right:34, top:'50%', height:3, borderRadius:2, background:'#94A3B8',
                              transform:`scaleX(${tacha})`, transformOrigin:'left'}}/>
              </div>
            );
          })}
        </div>
      )}

      {/* ─────────── El interrogante sobre «Productos a reponer» ─────────── */}
      {intP > 0 && (
        <div style={{position:'absolute', left:IX+118, top:290, opacity:clamp(intP*1.6,0,1)}}>
          <svg width="96" height="140" viewBox="0 0 44 64" fill="none">
            <path d="M6 20 C6 6 38 6 38 20 C38 31 22 30 22 43" stroke={AZUL} strokeWidth="6.5"
                  strokeLinecap="round" strokeDasharray="76" strokeDashoffset={76*(1-intP)}/>
            <circle cx="22" cy="55" r="4" fill={AZUL} opacity={clamp((intP-0.75)/0.25,0,1)}/>
          </svg>
        </div>
      )}

      {/* ─────────── La Única Cosa · PROMESA ─────────── */}
      {veloOp > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {u1P > 0 && salP < 1 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:398, textAlign:'center', fontSize:74, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:u1E*(1-salP), transform:`translateY(${(1-u1E)*18}px)`}}>
          Reposición no adivina.
        </div>
      )}
      {u2P > 0 && salP < 1 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:512, textAlign:'center', fontSize:74, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:u2E*(1-salP), transform:`translateY(${(1-u2E)*18}px)`,
                                        textShadow:u2Pulse > 0 ? `0 0 ${u2Pulse*36}px rgba(0,133,255,0.45)` : 'none'}}>
          <span className="grad-text">Resta lo que tienes del techo que pusiste.</span>
        </div>
      )}

      {/* Firma: desde t=0, discreta */}
      <div style={{position:'absolute', left:WX, bottom:32, opacity:0.45}}>
        <DinaupLogo size={26}/>
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaRP01 });