// === Escena 04 — Siguiente (clímax): ya está guardado; ahora, cómo trabajas con él ===
// «Siguiente» guarda y pasa al paso 2 (EntidadDialog.razor:795-807). Con id, el título dice «Editar Entidad»
// y salen «Firmas» y «Estadísticas» (:11-15, :245-252). El «+» de Datos fiscales abre DatosFiscalesDialog
// con nombre, NIF y email copiados de la entidad (DatosFiscalesDialog.razor:348-372).
function EscenaAC04({ t }){
  useVoz(3);
  const G = GUION[3];
  const T = {
    guardado: B(G, 'el cliente ya queda guardado'),   // → rótulo «Ya está guardado»
    titulo:   B(G, 'El título pasa'),                 // → Agregar → Editar Entidad
    pestanas: B(G, 'aparecen dos pestañas'),          // → Firmas, Estadísticas
    sabes:    B(G, 'Ya sabes quién es'),              // → la Única Cosa, mitad 1
    ahora:    B(G, 'Ahora, cómo trabajas'),           // → mitad 2
    detalles: B(G, 'Primero, Detalles'),              // → vuelve la ficha: tarjeta Detalles
    mas:      B(G, 'El más de datos fiscales'),       // → clic en el «+»
    ventana:  B(G, 'abre su propia ventana'),         // → entra «Datos fiscales»
    copiados: B(G, 'con el nombre'),                  // → lo copiado, en cascada
    direccion:B(G, 'Solo añades la dirección'),       // → se teclea la dirección
    guardas:  B(G, 'y guardas'),                      // → «Guardar» y se cierra
    inter:    B(G, 'dos interruptores'),              // → los interruptores
    cliente:  B(G, 'es cliente y'),
    proveedor:B(G, 'es proveedor.'),
    dos:      B(G, 'Una misma ficha'),                // → rótulo
    config:   B(G, 'Con es cliente encendido'),       // → asoma «Configuración cliente»
  };
  // La Única Cosa ocupa el centro entre «Ya sabes» y «Primero, Detalles».
  const u1 = pe(t, T.sabes, 0.7), u2 = pe(t, T.ahora, 0.7);
  const uOut = pe(t, T.detalles - 0.3, 0.6);
  const velo = Math.max(0, Math.min(u1, 1 - uOut)) * 0.9;
  // La ventana de datos fiscales.
  const dfIn = pe(t, T.ventana, 0.6), dfOut = pe(t, T.guardas + 1.0, 0.5);
  const df = dfIn * (1 - dfOut);
  const LINEA = 'Calle Mayor, 14';
  const linea = tecleo(LINEA, t, T.direccion + 0.2, 20);
  const dirLlena = t >= T.direccion + 1.1;
  const dir = { linea, municipio: dirLlena ? 'Valencia' : '', provincia: dirLlena ? 'Valencia' : '', cp: dirLlena ? '46001' : '', pais: dirLlena ? 'España' : '' };
  const p = {
    mezcla: pe(t, T.titulo + 0.3, 0.6),
    tabs: pe(t, T.pestanas + 0.2, 0.6),
    verFicha: pe(t, T.titulo + 0.3, 0.6),
    fiscal: t >= T.guardas + 1.2 ? 'Talleres Marbán, S.L.' : '',
    cfgCli: pe(t, T.config + 0.5, 0.8),
    guardar: 0,
  };
  const m = {
    detalles: pulso(t, T.detalles, 1.4),
    fiscal: pulso(t, T.mas - 0.2, 1.2) + pulso(t, T.guardas + 1.3, 1.2),
    esCliente: pulso(t, T.cliente, 1.2),
    esProveedor: pulso(t, T.proveedor, 1.2),
  };
  const md = {
    copia0: pulso(t, T.copiados, 1.0), copia1: pulso(t, T.copiados + 0.7, 1.0), copia2: pulso(t, T.copiados + 1.9, 1.0),
    direccion: 0, guardar: pulso(t, T.guardas + 0.3, 1.0),
  };
  const cursor = { frames:[
    { t:0, x:1497, y:942 },
    { t:T.mas - 1.0, x:1497, y:942 },
    { t:T.mas + 0.2, x:667, y:276 },
    { t:T.ventana + 0.2, x:667, y:276 },
    { t:T.direccion, x:900, y:620 },
    { t:T.direccion + 1.0, x:900, y:620 },
    { t:T.guardas + 0.3, x:1178, y:832 },
    { t:T.guardas + 1.2, x:1300, y:800 },
  ], clicks:[T.mas + 0.3, T.guardas + 0.4] };
  return (
    <SlideCanvas variant="light" bg={C.fondo} grid={false}>
      <AppPymes><Lista/></AppPymes>
      <div style={{ position:'absolute', inset:0, background:'rgba(15,23,42,0.35)' }}/>
      <FichaPaso2 p={p} m={m}/>
      {df > 0 && <div style={{ position:'absolute', inset:0, background:`rgba(15,23,42,${0.3 * df})` }}/>}
      {df > 0 && <VentanaDatosFiscales y={170} h={700} op={df} esc={lerp(0.97, 1, dfIn)} dir={dir} m={md} caret={linea.length && linea.length < LINEA.length ? 'linea' : ''}/>}
      {velo > 0 && <div style={{ position:'absolute', inset:0, background:C.fondo, opacity:velo }}/>}
      {velo > 0 && (
        <div style={{ position:'absolute', left:0, right:0, top:380, textAlign:'center', opacity:Math.min(1, velo / 0.9) }}>
          <div className="f-plex" style={{ fontSize:68, fontWeight:700, letterSpacing:'-0.03em', color:C.gris,
                                           opacity:u1, transform:`translateY(${(1 - u1) * 14}px)` }}>
            <MI n="check_circle" s={58} c={C.exito} style={{ verticalAlign:'-8px', marginRight:18 }}/>Primero, quién es.
          </div>
          <div className="f-plex" style={{ fontSize:68, fontWeight:700, letterSpacing:'-0.03em', color:C.tinta, marginTop:26,
                                           opacity:u2, transform:`translateY(${(1 - u2) * 14}px)` }}>
            Después, cómo trabajas con él.
          </div>
        </div>
      )}
      <Rotulo t={t} desde={T.guardado} hasta={T.sabes - 0.2}>Ya está guardado</Rotulo>
      <Rotulo t={t} desde={T.dos} hasta={T.config + 0.4}>Puede ser cliente y proveedor</Rotulo>
      {t >= T.mas - 1.0 && t < T.guardas + 1.6 && <ScriptedCursor frames={cursor.frames} t={t} clickTimes={cursor.clicks}/>}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaAC04 });