// === Escena 01 — «La pregunta» (contrato) ===  [13.03 s · 6 beats · la ficha ya está hecha en t=0]
//
// LOCUCIÓN (audio/escena-01.mp3 · 13.03 s):
//   «Este precio ayer era otro. Sois varios tocando los mismos datos, y nadie se acuerda de quién
//    fue. Dinaup sí. <break 0.4s/> ¿Quién ha tocado esto? Clic derecho en el nombre del campo.»
//
// QUÉ HACE LA ESCENA: la ficha real del ERP está entera y quieta en el fotograma 0 —no se
// construye en cámara— y lo primero que ocurre es que el precio cambia SOLO: sin cursor, sin
// nombre, sin avatar. El campo se enciende con el estado MODIFICADO del propio formulario
// (fondo #f0f9ff, borde #7dd3fc, etiqueta #0369a1 y punto #0ea5e9 detrás de la etiqueta). Eso es
// lo que despersonaliza: el problema es el dato, no la persona. Después entran Marta, Javier y
// Nuria —con cara, con nombre y con su color— y se van sin dejar ni una marca en el dato. Queda
// un interrogante que Dinaup se apunta, y la instrucción entera, que es a la vez la promesa y el
// puente a la escena 02.
//
// LA FICHA VA EN SU COLOCACIÓN POR DEFECTO (x 528 · y 150 · 864×845 → llega a y=995): es
// exactamente para eso para lo que ficha.jsx publica FICHA_ANCLAS ya resueltas. Aquí no se
// recalcula a mano ni una coordenada del formulario.
// COLUMNA SEGURA 4:5 — todo lo que informa vive entre x=568 y x=1352 (784 px útiles).
//
// DEPENDENCIAS, las dos cargadas en index.html ANTES que las escenas:
//   · `scenes/ficha.jsx`     → FichaProducto + FICHA_ANCLAS.
//   · `scenes/presencia.jsx` → CursorPresencia. Sin su <script> la escena revienta en el beat 3.10:
//     <script type="text/babel" data-presets="env,react" src="scenes/presencia.jsx"></script>
function EscenaHC01({ t }){
  const T = {
    cambio:  0.0, // "Este precio ayer era otro"           → el precio cuenta de 1290 a 990 y el campo pasa a MODIFICADO
    varios:  3.1, // "Sois varios tocando"                 → Marta, Javier y Nuria entran desde 3 bordes, escalonados +0.14 s
    nadie:   5.7, // "nadie se acuerda de quién fue"       → los tres salen con fade 0.3 s; entra el interrogante gris
    dinaup:  7.7, // "Dinaup sí"                           → el interrogante pasa a azul #0085FF y la marca sube a opacidad 1
    unica1:  9.2, // "¿Quién ha tocado esto"               → la ficha baja a 0.35 + saturate 0.55; ÚNICA COSA mitad 1
    unica2: 10.8, // "Clic derecho en el nombre del campo" → mitad 2, y queda fija hasta el corte (13.03)
  };

  const A = FICHA_ANCLAS;   // precioControl {x:746, y:567, w:176, h:42, cx:834, cy:588}

  // ── BEAT 1 · «Este precio ayer era otro» — el cambio ocurre y no tiene cara ──────────────────
  // El contador entra por la prop `precio` tal cual (1290 → 990, crudo, sin euro ni separadores:
  // es el mismo par de cifras que la escena 02 enseñará en el diálogo, que pinta el valor tal
  // como está guardado). Que el protagonista lea «990» mientras los nativos de al lado leen
  // «612,40» o «41,00» no es un descuido: es un campo PERSONALIZADO, guarda lo que se tecleó,
  // y los formateados a dos decimales son los autocalculados del producto.
  const valor = useCountUp(1290, 990, T.cambio, 0.9, t);
  // En el formulario real el estado MODIFICADO no tiene transición: salta en el instante en que
  // el valor cambia. Aquí salta con el contador ya en marcha (+0.10 s), así que el corte queda
  // escondido dentro del movimiento y no se lee como un parpadeo.
  const modificado = t >= T.cambio + 0.10;
  // UN solo latido, y azul. El azul es el idioma del propio formulario para «esto lo han tocado»
  // (#0ea5e9 es el punto del campo modificado): ni rojo ni alarma, aquí nadie ha hecho nada malo.
  // El anillo se abre hacia fuera y se apaga; a t=1.8 s ya no existe. La cresta cae en 0.9 s,
  // que es justo cuando el contador aterriza en 990: el latido y la cifra rematan a la vez.
  const latP   = clamp((t - T.cambio)/1.8, 0, 1);
  const latido = Math.sin(latP*Math.PI);
  const latD   = lerp(4, 20, Easing.easeOutCubic(latP));   // hasta 20 px: el borde derecho llega a
  const anillo = {                                          // 942 y la columna 2 empieza en 946
    x: A.precioControl.x - latD,     y: A.precioControl.y - latD,
    w: A.precioControl.w + latD*2,   h: A.precioControl.h + latD*2,
  };

  // ── BEAT 2 · «Sois varios tocando» — Marta, Javier y Nuria: cara, nombre y color ────────────
  // Ya no son tres punteros grises anónimos. Son tres <CursorPresencia/> (scenes/presencia.jsx)
  // con foto, nombre y un color de la rueda de Dinaup. NO es licencia: UserPresence.razor ya
  // enseña dentro del producto quién más está en la MISMA pantalla ahora mismo, con la foto de
  // cada uno; esto es esa función traducida a la convención de vídeo (puntero + pastilla).
  //
  // POR QUÉ ESTO ENDURECE EL BEAT SIGUIENTE EN VEZ DE ABLANDARLO: cuanto más concreta es la gente
  // que pasó por aquí —cara, nombre, color—, más brutal es que a los 5.7 s se vayan sin dejar ni
  // una marca sobre el dato y la pregunta siga sin respuesta. Se ha ido gente con cara y nombre,
  // y aun así nadie sabe quién fue.
  //
  // EL CÍRCULO: Marta va de azul y Javier de verde porque en la escena 02 el historial firma
  // «Marta Ruiz · 18:02» y «Javier Sanz · 12 ago 09:41» con ESTA misma foto y ESTE mismo anillo.
  // Marta cae justo encima del campo del precio porque ella es quien lo cambió: la respuesta lleva
  // dos beats en pantalla antes de que la voz formule la pregunta.
  //
  // COLOCACIÓN (canvas 1920×1080; la ficha ocupa x 528..1392 · y 150..995). Las tres cajas de las
  // pastillas están MEDIDAS en el navegador, no calculadas a ojo:
  //   Marta 700..831 × 512..562 · Javier 1202..1336 × 732..782 · Nuria 766..894 × 918..968.
  //   · las tres dentro de la columna segura x 568..1352 EN TODO INSTANTE, entrada incluida (ver
  //     abajo por qué Javier no puede entrar desde la derecha);
  //   · ninguna toca la fila del precio (y 567..609) ni el titular (y 44..124): el protagonista
  //     no se tapa nunca, y Marta se queda a 5 px justos por encima del cuadro;
  //   · la pastilla cuelga 24 px a la derecha de la punta y mide ~135, así que la punta más a la
  //     derecha (Javier) no puede pasar de x≈1180;
  //   · el recorrido de entrada es de ~130-150 px, en la línea de los ~190 de los punteros grises a
  //     los que sustituyen: en una escena de 13 s y 6 beats, una deriva corta no se lee.
  //
  // POR QUÉ JAVIER ENTRA DESDE ABAJO Y NO DESDE LA DERECHA (medido, 13/08): con dx:+150 su pastilla
  // nacía en x 1341..1416 — fuera de la columna segura y fuera del propio recorte 4:5 (que acaba en
  // 1392), o sea que en feed se le veía entrar con el nombre cortado durante 0,36 s. El margen no da
  // para negociarlo: en reposo la pastilla ya llega a 1337,4 y el rebote de entrada la lleva a
  // 1344,4, así que cualquier dx > 32 px se sale. Se cambia la DIRECCIÓN, no el sitio: la posición
  // de reposo —que es la que está medida contra el formulario— no se toca ni un píxel.
  const PRESENTES = [
    { nombre:'Marta',  foto:'/_engine/assets/avatares/marta.jpg',  color:PRES_RUEDA.azul,
      x: 676, y:478, dx:   0, dy:-130 },   // por arriba, y aterriza JUSTO encima del precio
    { nombre:'Javier', foto:'/_engine/assets/avatares/javier.jpg', color:PRES_RUEDA.verde,
      x:1178, y:698, dx:   0, dy: 130 },   // por abajo, sobre el hueco libre de la card comercial
    { nombre:'Nuria',  foto:'/_engine/assets/avatares/nuria.jpg',  color:PRES_RUEDA.amarillo,
      x: 742, y:884, dx:-150, dy:  40 },   // por abajo-izquierda, sobre la card de inventario
  ];

  // ── BEAT 3 · «nadie se acuerda de quién fue» — el interrogante ──────────────────────────────
  // Entra 0.16 s después de que los tres empiecen a irse: primero se vacía la pantalla de caras
  // —y ahora son caras de verdad—, y en ese hueco aparece la pregunta. Capa de anotación, pegada
  // al borde derecho del cuadro del precio como una pegatina sobre el campo.
  const iqP = clamp((t - T.nadie - 0.16)/0.45, 0, 1);
  const iqE = Easing.easeOutBack(iqP);

  // ── BEAT 4 · «Dinaup sí» — el interrogante pasa a azul y la marca sube ──────────────────────
  const azul    = Easing.easeOutCubic(clamp((t - T.dinaup)/0.4, 0, 1));
  const iqColor = `rgb(${Math.round(lerp(148,0,azul))},${Math.round(lerp(163,133,azul))},${Math.round(lerp(184,255,azul))})`;
  const logoOp  = lerp(0.45, 1, azul);   // la firma lleva en pantalla desde t=0: esto es realce

  // ── BEATS 5 y 6 · LA ÚNICA COSA, en dos mitades ────────────────────────────────────────────
  // `atenuacion` es literalmente el par del plan: opacity 0.35 + saturate 0.55. Sin velo blanco.
  const veloE = Easing.easeOutCubic(clamp((t - T.unica1)/0.5,  0, 1));
  const u1E   = Easing.easeOutCubic(clamp((t - T.unica1)/0.55, 0, 1));
  const u2E   = Easing.easeOutCubic(clamp((t - T.unica2)/0.55, 0, 1));

  return (
    <SlideCanvas variant="light">

      {/* ── Cabecera. SIN fade de entrada: en el fotograma 0 lo único que se mueve es el precio.
             El titular repite la primera frase de la voz porque esta pieza se ve muda la
             primera vez (formato feed). ─────────────────────────────────────────────────────── */}
      <div style={{position:'absolute', left:568, width:784, top:44, textAlign:'center', zIndex:6,
                   opacity: lerp(1, 0.22, veloE)}}>
        <div className="f-plex" style={{fontSize:15, fontWeight:600, letterSpacing:'2px', color:'var(--dn-primary)'}}>
          HISTÓRICO POR CAMPO
        </div>
        <div className="f-plex" style={{fontSize:42, fontWeight:700, letterSpacing:'-0.03em',
                                        lineHeight:1.15, marginTop:12, color:'#0F172A'}}>
          Este precio ayer era otro
        </div>
      </div>

      {/* ── LA FICHA: el formulario real de Dinaup, entero y ya hecho ─────────────────────────
             Sección Productos · registro «Compresor 50 litros» · pestaña General. El
             protagonista es «Precio de venta», el campo personalizado (por eso tiene historial:
             el servidor solo lo guarda de las claves que empiezan por pr_). ──────────────────── */}
      <FichaProducto
        t={t}
        modo="completa"
        precio={valor}
        estadoPrecio={modificado ? 'modificado' : 'normal'}
        atenuacion={veloE}
        zIndex={5}
      />

      {/* ── El latido del cambio: un anillo azul que se abre sobre el cuadro y se apaga ─────── */}
      {latido > 0.01 && (
        <div style={{position:'absolute', left:anillo.x, top:anillo.y, width:anillo.w, height:anillo.h,
                     borderRadius: 8 + latD, border:'2px solid #0EA5E9',
                     boxShadow:`0 0 ${Math.round(26*latido)}px rgba(14,165,233,${0.45*latido})`,
                     opacity: latido*0.85, zIndex:18, pointerEvents:'none'}}/>
      )}

      {/* ── «Sois varios tocando»: Marta, Javier y Nuria, con cara y con nombre ──────────────
             La entrada (pop + rebote), la salida (fade 0.3 s + deriva de 6 px) y el corte —fuera
             de [entrada, salida+0.3] no pinta ni medio píxel— los lleva <CursorPresencia/>. Aquí
             solo se le da el escalonado (+0.14 s) y el deslizamiento desde su borde. ────────── */}
      {PRESENTES.map((c, i)=>{
        const nace = T.varios + i*0.14;
        const e = Easing.easeOutCubic(clamp((t - nace)/0.6, 0, 1));
        return (
          <CursorPresencia
            key={c.nombre}
            t={t}
            x={c.x + c.dx*(1 - e)}
            y={c.y + c.dy*(1 - e)}
            nombre={c.nombre}
            foto={c.foto}
            color={c.color}
            entrada={nace}
            salida={T.nadie}
            zIndex={22}
          />
        );
      })}

      {/* ── «Nadie se acuerda de quién fue»: el interrogante, pegado al cuadro del precio ─────
             Centro en x=908: la pegatina va del 870 al 946, es decir, muerde el borde derecho
             del control (que a partir de x≈836 está vacío) y termina justo donde empieza la
             columna 2 del formulario. Así no tapa ni una letra de «PRECIO MEDIO COMPRA».
             El glifo va a 48 px en vez de los 56 del plan por ese mismo motivo: con 56 la
             pegatina se comía la etiqueta del campo de al lado. ─────────────────────────────── */}
      {iqP > 0 && (
        <div style={{position:'absolute', left:908, top:588, width:76, height:76, zIndex:24,
                     display:'flex', alignItems:'center', justifyContent:'center', borderRadius:'50%',
                     background:'#fff',
                     border:`1px solid ${azul > 0 ? 'rgba(0,133,255,0.5)' : '#E2E8F0'}`,
                     boxShadow:`0 10px 26px rgba(15,23,42,0.18), 0 0 ${Math.round(30*azul)}px rgba(0,133,255,${0.42*azul})`,
                     opacity: clamp(iqP*1.6, 0, 1) * lerp(1, 0.35, veloE),
                     transform:`translate(-50%,-50%) scale(${lerp(0.6, 1, iqE)})`}}>
          <span className="f-plex" style={{fontSize:48, fontWeight:700, lineHeight:1, color:iqColor}}>?</span>
        </div>
      )}

      {/* ── LA ÚNICA COSA (promesa), en dos mitades, sobre la ficha atenuada ─────────────────
             Las dos cajas son de 784 px exactos (568→1352): si un día la frase creciera, parte
             la línea dentro de la columna segura en vez de desbordarla. ────────────────────── */}
      {u1E > 0 && (
        <div className="f-plex" style={{position:'absolute', left:568, width:784, top:656, textAlign:'center', zIndex:40,
                                        fontSize:68, fontWeight:800, letterSpacing:'-0.03em', lineHeight:1.1,
                                        color:'#0F172A', opacity:u1E, transform:`translateY(${(1 - u1E)*14}px)`}}>
          ¿Quién ha tocado esto?
        </div>
      )}
      {u2E > 0 && (
        <div className="f-plex" style={{position:'absolute', left:568, width:784, top:752, textAlign:'center', zIndex:40,
                                        fontSize:62, fontWeight:800, letterSpacing:'-0.03em', lineHeight:1.16,
                                        opacity:u2E, transform:`translateY(${(1 - u2E)*14}px)`}}>
          <span className="grad-text">Clic derecho<br/>en el nombre del campo.</span>
        </div>
      )}

      {/* ── La marca: firma en pantalla desde el fotograma 0 (Ley del Contrato: quién habla).
             Va bajo la ficha, que termina en y=995, dentro de la columna segura. ────────────── */}
      <div style={{position:'absolute', left:568, top:1006, width:170, height:40, zIndex:8}}>
        <span style={{position:'absolute', left:-26, top:-22, width:222, height:84, borderRadius:42,
                      background:'radial-gradient(ellipse at center, rgba(0,133,255,0.22), rgba(0,133,255,0) 70%)',
                      opacity:azul, pointerEvents:'none'}}/>
        <DinaupLogo size={38} style={{opacity:logoOp, position:'relative'}}/>
      </div>

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