// === Escena 01 — Contrato: Facturas Emitidas → botón verde «Factura» → la ventana y sus tres sitios ===
// Pymes · «Ventas & Ingresos» · «Facturas Emitidas» (PymesPage.razor). Encima de la lista, un botón verde
// por tipo de venta (ToolBarsVentaU.razor). Al pulsarlo se abre la ventana «Venta / Ingreso».
function EscenaFV01({ t }){
  const G = GUION[0];
  const T = {
    pymes:B(G,'Entra en Pymes'),            // "Entra en Pymes"
    emitidas:B(G,'Facturas Emitidas'),      // "abre Facturas Emitidas"
    verde:B(G,'botón verde'),               // "un botón verde por cada tipo de venta"
    pulsa:B(G,'Pulsa Factura'),             // "Pulsa Factura"
    clic:B(G,'Factura, y se'),              // (clic sobre «Factura»)
    abre:B(G,'se abre la ventana'),         // "se abre la ventana de venta"
    arriba:B(G,'Arriba, a quién'),          // "Arriba, a quién"
    derecha:B(G,'A la derecha, qué'),       // "A la derecha, qué"
    abajo:B(G,'Abajo, Aceptar'),            // "Abajo, Aceptar"
    empecemos:B(G,'Vamos por arriba'),      // "Vamos por arriba"
  };
  const ven = ap(t, T.abre, 0.8);
  const fondo = ap(t, 0.2, 0.9);
  const vacia = { ocultaVacio:true, cliente:'', df:'', envio:'', fecha:'', 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 €' }]}/> };
  const m1 = ap(t, T.arriba, 0.5), m2 = ap(t, T.derecha, 0.5), m3 = ap(t, T.abajo, 0.5);
  const fin = ap(t, T.empecemos, 0.6);
  const cursor = [{ t:0, x:700, y:420 }, { t:T.pulsa - 0.9, x:700, y:420 }, { t:T.clic, x:300, y:128 }, { t:T.abre + 1.2, x:640, y:470 }];

  const NotaSitio = ({ n, txt, p, top }) => p > 0 && (
    <div className="f-plex" style={{ position:'absolute', left:150, top, display:'flex', alignItems:'center', gap:18, opacity:p, padding:'10px 28px 10px 12px',
                                     background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, boxShadow:'0 10px 28px rgba(15,23,42,0.10)',
                                     transform:`translateY(${(1 - p) * 12}px)`, zIndex:60 }}>
      <span style={{ width:54, height:54, borderRadius:100, background:'#0085FF', color:'#fff', fontSize:28, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center' }}>{n}</span>
      <span style={{ fontSize:40, fontWeight:700, color:'#0F172A' }}>{txt}</span>
    </div>
  );

  return (
    <Escena t={t} eyebrow="TUTORIAL · FACTURAS EMITIDAS" titulo="Emitir una factura de venta"
      fuera={<>
        <Cursor t={t} frames={cursor} clicks={[T.clic]} desde={T.pulsa - 1.2}/>
        <NotaSitio n={1} txt="Arriba, a quién" p={m1} top={420}/>
        <NotaSitio n={2} txt="A la derecha, qué" p={m2} top={510}/>
        <NotaSitio n={3} txt="Abajo, Aceptar" p={m3} top={600}/>
      </>}>
      <div style={{ position:'absolute', inset:0, opacity:fondo }}>
        <PantallaFacturas menuFoco={entre(t, T.emitidas, T.verde)} botonFoco={entre(t, T.verde, T.clic + 0.6)}/>
      </div>
      {ven > 0 && (
        <div style={{ position:'absolute', inset:0, opacity:ven, transform:`scale(${lerp(0.97, 1, ven)})`, transformOrigin:'300px 130px' }}>
          <VentanaVenta {...vacia}/>
          <Marca x={0} y={33} w={1200} h={60} p={m1 * (1 - fin * 0.4)} r={4}/>
          <Marca x={FV.der.x} y={FV.der.y} w={FV.der.w} h={FV.der.h} p={m2 * (1 - fin * 0.4)}/>
          <Marca x={FV.aceptar.x} y={FV.aceptar.y} w={FV.aceptar.w} h={FV.aceptar.h} p={m3 * (1 - fin * 0.4)} color={UI.success} r={6}/>
        </div>
      )}
    </Escena>
  );
}
Object.assign(window, { EscenaFV01 });