// === Escena 03 — Qué: pestaña «Agregar» → Catálogo / Recientes → el más verde → «Seleccionados» ===
// BuscadorConceptosGaleriaU.razor: «¿Qué desea Vender?», pestañas «Catálogo» y «Recientes» (Recientes son los
// documentos recientes de ESE cliente: ConceptosRecientesU). Lo que no está en el catálogo se añade tal cual
// como texto (ConceptoU ConceptoTexto=@Busqueda). La línea lleva «Und», «Precio», «Subtotal», «Total»
// (ItemGenericoEditorDePreciosU) y la barra de resumen «Sub.», «IVA», «Total» (TPVSummaryBarU).
function EscenaFV03({ t }){
  const G = GUION[2];
  const T = {
    agregar:B(G,'pestaña Agregar'),        // "en la pestaña Agregar"
    catalogo:B(G,'catálogo.'),             // "está tu catálogo"
    busca:B(G,'Busca un producto'),        // "Busca un producto arriba"
    recientes:B(G,'Recientes:'),           // "o abre Recientes"
    pulsa:B(G,'Pulsa el más'),             // "Pulsa el más verde"
    pasa:B(G,'la línea pasa'),             // "y la línea pasa a la izquierda"
    selec:B(G,'Seleccionados.'),           // "a Seleccionados"
    unidades:B(G,'unidades y su'),         // "sus unidades"
    precio:B(G,'precio.'),                 // "y su precio"
    tres:B(G,'Pon tres unidades'),         // "Pon tres unidades"
    total:B(G,'su total se'),              // "y su total se recalcula solo"
    vendes:B(G,'¿Vendes algo'),            // "¿Vendes algo que no está en el catálogo?"
    escribe:B(G,'Escríbelo'),              // "Escríbelo en el buscador"
    anade:B(G,'añádelo tal cual'),         // "y añádelo tal cual"
    resumen:B(G,'la barra de resumen'),    // "Abajo, la barra de resumen"
    base:B(G,'la base'),                   // "suma la base"
    imp:B(G,'el impuesto'),                // "el impuesto"
    tot:B(G,'y el total'),                 // "y el total"
    todas:B(G,'¿Y si algo vale'),          // "¿Y si algo vale para todas las líneas?"
  };
  const CAT = [{ 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 €' }];
  const sub = (t >= T.recientes + 0.2 && t < T.pulsa - 0.6) ? 'Recientes' : 'Catálogo';
  const clic1 = T.pulsa + 0.7, clic2 = T.anade + 0.3;
  const und = t >= T.tres + 0.4 ? 3 : 1;
  const conTexto = t >= clic2 + 0.2;
  const precio2 = t >= clic2 + 1.4 ? 30 : 0;
  const escrito = 'Desplazamiento'.slice(0, Math.floor(clamp((t - T.escribe - 0.2) / 1.2, 0, 1) * 14));
  const buscando = t >= T.escribe && t < clic2 + 0.5;

  const l1 = t >= clic1 + 0.15 ? [{ nombre:'Hora de soporte', und:String(und), precio:'45,00 €', total:eur(45 * und), aparece:clamp((t - clic1 - 0.15) / 0.6, 0, 1),
               foco:{ und:entre(t, T.unidades, T.precio, 0.2) > 0.5 || entre(t, T.tres, T.total + 0.8, 0.2) > 0.5, precio:entre(t, T.precio, T.tres, 0.2) > 0.5 } }] : [];
  const lineas = conTexto ? [...l1, { nombre:'Desplazamiento', texto:true, und:'1', precio:eur(precio2), total:eur(precio2), aparece:clamp((t - clic2 - 0.2) / 0.6, 0, 1) }] : l1;
  const base = lineas.length ? 45 * und + (conTexto ? precio2 : 0) : 0;
  const iva = Math.round(base * 21) / 100;

  const resultado = buscando && escrito.length >= 3 ? (
    <div style={{ position:'absolute', left:14, right:14, top:64, height:300, border:'1px dashed #294ab6', borderRadius:6 }}>
      <div style={{ position:'absolute', left:8, top:8, display:'flex', alignItems:'center', gap:6 }}>
        <span style={{ fontSize:10.5, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em', color:'#fff', background:'#085786', borderRadius:10, padding:'2px 8px' }}>Resultados de búsqueda</span>
        <b style={{ fontSize:13 }}>{escrito}</b>
      </div>
      <div style={{ position:'absolute', left:6, top:40, width:490, height:54, borderRadius:8, border:`1px solid ${UI.border}`, background:'#fff' }}>
        <div style={{ position:'absolute', left:10, top:10, width:34, height:34, borderRadius:6, background:'#eef4fb', display:'flex', alignItems:'center', justifyContent:'center' }}><Ico n="short_text" s={20} c="#7aa7d8"/></div>
        <div style={{ position:'absolute', left:54, top:17, fontSize:13.5, fontWeight:600 }}>{escrito}</div>
        <div style={{ position:'absolute', right:10, top:13, width:28, height:28, borderRadius:4, background:UI.success, display:'flex', alignItems:'center', justifyContent:'center' }}><Ico n="add" s={18} c="#fff"/></div>
      </div>
    </div>
  ) : null;

  const cursor = [{ t:0, x:900, y:470 }, { t:T.pulsa - 0.3, x:900, y:470 }, { t:clic1, x:1146, y:389 }, { t:T.tres - 0.6, x:1146, y:389 },
                  { t:T.tres + 0.3, x:62, y:236 }, { t:T.escribe - 0.4, x:62, y:236 }, { t:T.anade, x:1146, y:300 }, { t:clic2 + 1.2, x:1000, y:470 }];

  return (
    <Escena t={t} eyebrow="2 · A LA DERECHA" titulo="Qué le vendes"
      fuera={<Cursor t={t} frames={cursor} clicks={[clic1, T.tres + 0.35, clic2]} desde={T.pulsa - 0.8}/>}>
      <VentanaVenta cliente="Talleres Ebro, S.L." df="Talleres Ebro, S.L." envio="" fecha="" lineaDF={1} tab="Agregar"
        lineas={lineas} sub={base} iva={iva} total={base + iva}
        derecha={<PanelAgregar sub={sub} productos={CAT} busqueda={buscando ? escrito : ''} focoBuscar={entre(t, T.busca, T.recientes, 0.3) + (buscando ? 1 : 0)} resultado={resultado}/>}
        encima={<>
          <Marca x={tabX(0) - 2} y={130} w={80} h={34} p={entre(t, T.agregar, T.catalogo, 0.3)} r={5}/>
          <Marca x={FV.der.x + 20} y={168 + 132} w={490} h={232} p={entre(t, T.catalogo, T.busca, 0.3)}/>
          <Marca x={FV.der.x + 116} y={168 + 62} w={100} h={32} p={entre(t, T.recientes, T.pulsa - 0.6, 0.3)} r={5}/>
          <Marca x={FV.izq.x} y={FV.izq.y} w={FV.izq.w} h={FV.izq.h} p={entre(t, T.selec, T.unidades, 0.3)}/>
          <Marca x={14 + 8 + 504} y={212} w={104} h={40} p={entre(t, T.total, T.vendes, 0.3)} color={UI.success} r={6}/>
          <Marca x={FV.resumen.x} y={FV.resumen.y} w={FV.resumen.w} h={FV.resumen.h} p={entre(t, T.resumen, T.todas, 0.3)}/>
          <Marca x={tabX(2) - 2} y={130} w={102} h={34} p={ap(t, T.todas, 0.5)} r={5}/>
        </>}/>
    </Escena>
  );
}
Object.assign(window, { EscenaFV03 });