// === Escena 02 — A quién: Cliente → datos fiscales → Envío → Fecha → el número no se escribe ===
// TPVHeaderBarU.razor: «Cliente» (DnzRowSelector), «Datos fiscales», «Tipo Venta», «Envío», «Estado», «Fecha» y
// la píldora de validaciones. Al elegir cliente se ponen sus datos fiscales por defecto (TPVBuilder.cs:602)
// y debajo sale la línea con identificación fiscal y dirección (TPVHeader_QuickDatosFiscalesyEnvioBarU).
// Fecha vacía → «Se guardará con la fecha actual» (TPVParametrosU). Con numeración automática el campo
// «Número» ni siquiera aparece en una venta nueva (TPVBuilder.UI.cs:27): se asigna al guardar.
function EscenaFV02({ t }){
  const G = GUION[1];
  const T = {
    cliente:B(G,'Cliente.'),                 // "el primer campo es Cliente"
    escribe:B(G,'Escribe unas letras'),      // "Escribe unas letras de su nombre"
    elige:B(G,'elígelo de la lista'),        // "y elígelo de la lista"
    trae:B(G,'trae sus datos fiscales'),     // "Dinaup trae sus datos fiscales"
    debajo:B(G,'Debajo de la barra'),        // "Debajo de la barra los ves en una línea"
    ident:B(G,'identificación fiscal'),      // "identificación fiscal"
    direccion:B(G,'y dirección'),            // "y dirección"
    envio:B(G,'elige la dirección en Envío'),// "elige la dirección en Envío"
    fecha:B(G,'está la fecha'),              // "A la derecha está la fecha"
    vacia:B(G,'Si la dejas vacía'),          // "Si la dejas vacía, se guarda con la de hoy"
    numero:B(G,'¿Y el número?'),             // "¿Y el número?"
    auto:B(G,'Con numeración automática'),   // "Con numeración automática, se asigna al guardar"
    ahora:B(G,'Ahora, qué le vendes'),       // "Ahora, qué le vendes"
  };
  const escrito = 'Talle'.slice(0, Math.floor(clamp((t - T.escribe - 0.3) / 0.9, 0, 1) * 5));
  const elegido = t >= T.elige + 0.55;
  const lista = entre(t, T.escribe + 0.9, T.elige + 0.55, 0.3);
  const df = t >= T.trae ? 'Talleres Ebro, S.L.' : '';
  const lineaDF = ap(t, T.debajo, 0.5);
  const fin = ap(t, T.ahora, 0.6);

  const cursor = [{ t:0, x:640, y:430 }, { t:T.escribe, x:640, y:430 }, { t:T.elige - 0.1, x:110, y:110 }, { t:T.elige + 1.6, x:300, y:300 }];
  const OPC = ['Talleres Ebro, S.L.', 'Talleres Aragón, S.C.', 'Talleres Delicias, S.L.'];

  return (
    <Escena t={t} eyebrow="1 · ARRIBA" titulo="A quién le facturas"
      fuera={<>
        <Cursor t={t} frames={cursor} clicks={[T.elige + 0.45]} desde={T.escribe - 0.2}/>
        <Nota x={1380} y={430} p={entre(t, T.vacia, T.numero, 0.4)}>Vacía: se guarda con la de hoy</Nota>
        <Nota x={1180} y={430} p={entre(t, T.auto, T.ahora, 0.4)}>Número: se asigna al guardar</Nota>
      </>}>
      <VentanaVenta cliente={elegido ? 'Talleres Ebro, S.L.' : escrito} focoCliente={entre(t, T.escribe, T.elige + 0.6, 0.3)} df={df} envio="" fecha=""
        lineaDF={lineaDF} tab="Agregar" lineas={[]} sub={0} iva={0} total={0}
        derecha={<PanelAgregar productos={[{ nombre:'Mantenimiento mensual', precio:'180,00 €' }, { nombre:'Hora de soporte', precio:'45,00 €' },
                                           { nombre:'Instalación', precio:'90,00 €' }, { nombre:'Revisión anual', precio:'120,00 €' }]}/>}
        encima={<>
          {lista > 0 && (
            <div style={{ position:'absolute', left:16, top:90, width:280, background:'#fff', borderRadius:6, boxShadow:'0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06)',
                          border:`1px solid ${UI.border}`, opacity:lista, padding:'4px 0', zIndex:30 }}>
              {OPC.map((o, i) => (
                <div key={o} style={{ height:30, display:'flex', alignItems:'center', gap:8, padding:'0 12px', fontSize:13, background:i === 0 && t > T.elige - 0.2 ? 'rgba(0,111,255,0.10)' : 'transparent' }}>
                  <Ico n="person" s={15}/>{o}
                </div>
              ))}
            </div>
          )}
          <Marca x={FV.cliente.x} y={FV.cliente.y} w={FV.cliente.w} h={48} p={entre(t, T.cliente, T.escribe, 0.4)}/>
          <Marca x={FV.df.x} y={FV.df.y} w={FV.df.w} h={48} p={entre(t, T.trae, T.debajo, 0.4)}/>
          <Marca x={FV.linea.x + 8} y={FV.linea.y} w={92} h={FV.linea.h} p={entre(t, T.ident, T.direccion, 0.3)} r={5}/>
          <Marca x={FV.linea.x + 96} y={FV.linea.y} w={236} h={FV.linea.h} p={entre(t, T.direccion, T.envio, 0.3)} r={5}/>
          <Marca x={FV.envio.x} y={FV.envio.y} w={FV.envio.w} h={48} p={entre(t, T.envio, T.fecha, 0.4)}/>
          <Marca x={FV.fecha.x} y={FV.fecha.y} w={FV.fecha.w} h={48} p={entre(t, T.fecha, T.numero, 0.4)}/>
          <Marca x={FV.estado.x} y={FV.estado.y} w={FV.fecha.x + FV.fecha.w - FV.estado.x} h={48} p={entre(t, T.numero, T.ahora, 0.4)} color={UI.faint}/>
          <Marca x={FV.der.x} y={FV.der.y} w={FV.der.w} h={FV.der.h} p={fin}/>
        </>}/>
    </Escena>
  );
}
Object.assign(window, { EscenaFV02 });