// === Escena 01 — Contrato + abrir el TPV ===
// Contrato (para quién, qué promete, la Única Cosa) y el inicio de /App/TPV: aviso de caja sin vincular
// (AvisoCajaSinVincularU), «Vincular «Mostrador»», tarjeta «Abrir TPV» → «Pantalla completa»
// (HomeSubpage.razor) y la venta a pantalla completa vacía (TPVFullPageSubpageU).
function EscenaTPV01({ t }){
  const G = window.GUION[0];
  const T = {
    titulo:     B(G, "Un cliente en el"),             // "Si cobras en un mostrador"
    cobrar:     B(G, "cobrar una venta"),             // "cobrar una venta"
    cerrar:     B(G, "cerrar la caja del día"),       // "cerrar la caja del día"
    idea1:      B(G, "cada cobro se apunta solo"),    // "cada cobro se apunta solo"
    idea2:      B(G, "Al cerrar, tú solo"),           // "Al cerrar, tú solo cuentas el cajón"
    app:        B(G, "Empieza en la aplicación"),     // "Empieza en la aplicación de punto de venta"
    vincula:    B(G, "vincula este navegador"),       // "vincula este navegador a su caja"
    cuadrar:    B(G, "es la caja que vas"),           // "es la caja que vas a cuadrar"
    pantalla:   B(G, "pulsa pantalla completa"),      // "pulsa pantalla completa"
    ocupa:      B(G, "La venta ocupa"),               // "La venta ocupa toda la pantalla"
    llenar:     B(G, "Vamos a llenar"),               // "Vamos a llenar el ticket"
  };
  const clicVincular = T.cuadrar - 0.5;
  const clicPC = T.pantalla + 0.6;

  // ── Contrato ──
  const cOp = sal(t, T.app - 0.3, 0.6);
  const tP = ent(t, T.titulo + 0.2, 0.9);
  const ch1 = ent(t, T.cobrar), ch2 = ent(t, T.cerrar);
  const i1 = ent(t, T.idea1, 0.8), i2 = ent(t, T.idea2, 0.8);

  // ── App ──
  const wP = ent(t, T.app, 0.9);
  const banOp = sal(t, clicVincular + 0.5, 0.5);
  const sube = lerp(0, 130, ent(t, clicVincular + 0.9, 0.8));
  const posP = ent(t, T.ocupa - 0.3, 0.8);

  const Mini = ({ x, y, ico, color, titulo, texto }) => (
    <Tarjeta style={{ left:x, top:y, width:430, height:112, padding:'14px 18px' }}>
      <div style={{ display:'flex', alignItems:'center', gap:10 }}><Ico n={ico} s={24} c={color}/><span style={{ fontSize:17, fontWeight:700, color:C.tinta }}>{titulo}</span></div>
      <div style={{ fontSize:15, color:C.gris, marginTop:8, lineHeight:1.35 }}>{texto}</div>
    </Tarjeta>
  );
  const Accion = ({ x, ico, color, titulo, texto, btn, btnIco, a }) => (
    <Tarjeta style={{ left:x, top:96, width:430, height:170, padding:'16px 20px' }}>
      <div style={{ display:'flex', alignItems:'center', gap:10 }}><Ico n={ico} s={26} c={color}/><span style={{ fontSize:19, fontWeight:700, color:C.tinta }}>{titulo}</span></div>
      <div style={{ fontSize:16, color:C.gris, marginTop:10, lineHeight:1.35, height:44 }}>{texto}</div>
      <div style={{ marginTop:12 }}><Btn txt={btn} ico={btnIco} variante="text" h={38} fs={16} a={a}/></div>
    </Tarjeta>
  );

  return (
    <Fondo>
      {/* ── Contrato ── */}
      {cOp > 0 && (
        <div style={{ position:'absolute', inset:0, opacity:cOp }}>
          <div style={{ position:'absolute', left:0, right:0, top:200, display:'flex', justifyContent:'center', opacity:tP }}>
            <DinaupLogo size={40}/>
          </div>
          <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:290, textAlign:'center', fontSize:62, fontWeight:700, letterSpacing:'-0.03em', color:C.tinta, opacity:tP, transform:`translateY(${(1 - tP) * 14}px)` }}>
            El TPV: cobrar en mostrador<br/><span style={{ color:C.gris, fontWeight:500 }}>y cerrar la caja</span>
          </div>
          <div style={{ position:'absolute', left:0, right:0, top:500, display:'flex', justifyContent:'center', gap:18 }}>
            {[[ch1, 'payments', 'Cobrar una venta'], [ch2, 'lock', 'Cerrar la caja del día']].map(([p, i, txt]) => (
              <div key={txt} className="f-plex" style={{ display:'flex', alignItems:'center', gap:10, padding:'12px 22px', borderRadius:40, background:'#fff', border:`1px solid ${C.borde}`,
                fontSize:24, fontWeight:600, color:C.tinta, opacity:p, transform:`translateY(${(1 - p) * 12}px)` }}>
                <Ico n={i} s={28} c={C.azul}/>{txt}
              </div>
            ))}
          </div>
          <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:650, textAlign:'center', fontSize:40, fontWeight:600, color:C.tinta, opacity:i1, transform:`translateY(${(1 - i1) * 12}px)` }}>
            Cada cobro se apunta solo.
          </div>
          <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:716, textAlign:'center', fontSize:40, fontWeight:600, color:C.verde, opacity:i2, transform:`translateY(${(1 - i2) * 12}px)` }}>
            Al cerrar, tú solo cuentas el cajón.
          </div>
        </div>
      )}

      {/* ── La app TPV ── */}
      {wP > 0 && (<>
        <Rotulo t={t} s={T.app} paso="PASO 1 · ABRIR EL TPV" titulo={t < T.ocupa ? 'Empieza en la app TPV' : 'La venta, a pantalla completa'}/>
        <Ventana url={t < T.ocupa ? 'play.dinaup.com/App/TPV' : 'play.dinaup.com/App/TPV/POS'} style={{ opacity:wP, transform:`translateY(${(1 - wP) * 18}px)` }}>
          <AppTPV activo="inicio">
            {/* Aviso: navegador sin caja */}
            {banOp > 0 && (
              <div style={{ position:'absolute', left:24, top:20, width:1352, height:100, borderRadius:10, background:C.azul, color:'#fff', opacity:banOp,
                boxShadow:anillo(foco(t, T.vincula, clicVincular + 0.6), '#0B3F86'), display:'flex', alignItems:'center', gap:16, padding:'0 22px', boxSizing:'border-box' }}>
                <Ico n="point_of_sale" s={34} c="#fff"/>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:20, fontWeight:700 }}>Este navegador no está vinculado a ninguna caja</div>
                  <div style={{ fontSize:16, opacity:0.92, marginTop:4 }}>Solo hay una caja en la empresa. Vincula este navegador para habilitar las operaciones de TPV.</div>
                </div>
                <Btn txt="Vincular «Mostrador»" ico="add_link" tipo="success" h={46} fs={17}/>
              </div>
            )}
            <div style={{ position:'absolute', left:24, right:24, top:136 - sube, bottom:0 }}>
              {/* Bienvenida */}
              <div style={{ position:'absolute', left:0, top:0, right:0, height:70, display:'flex', alignItems:'center', gap:16, padding:'0 8px' }}>
                <Ico n="point_of_sale" s={36} c={C.azul}/>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:26, fontWeight:500, color:C.tinta }}>TPV</div>
                  <div style={{ fontSize:16, color:C.gris }}>Punto de venta: ventas, pedidos, presupuestos y caja en un solo sitio.</div>
                </div>
                <Btn txt="Modo guía" ico="school" variante="outlined" h={38} fs={16}/>
              </div>
              <Accion x={0} ico="play_arrow" color={C.azul} titulo="Abrir TPV" texto="Abre la venta a pantalla completa, sin el menú de la app." btn="Pantalla completa" btnIco="fullscreen" a={foco(t, T.pantalla, T.ocupa)}/>
              <Accion x={460} ico="receipt_long" color="#22c55e" titulo="Ventas" texto="Histórico de facturas, conceptos vendidos y mis ventas del período." btn="Ver" btnIco="arrow_forward"/>
              <Accion x={920} ico="view_kanban" color="#7c3aed" titulo="Tablero pedidos" texto="Pedidos pendientes por estado, para cocina y reparto." btn="Abrir" btnIco="arrow_forward"/>
              <Tarjeta style={{ left:0, top:284, width:1352, height:330, padding:'16px 20px' }}>
                <div style={{ display:'flex', alignItems:'center', gap:10 }}><Ico n="school" s={24} c={C.azul}/><span style={{ fontSize:19, fontWeight:600, color:C.tinta }}>Qué puedes hacer con el TPV</span></div>
              </Tarjeta>
              <div style={{ position:'absolute', left:20, top:340 }}>
                <Mini x={0}   y={0}   ico="payments" color={C.ambar} titulo="Cobro rápido" texto="Automático cobra en efectivo el importe exacto y guarda la venta."/>
                <Mini x={444} y={0}   ico="inventory_2" color="#0ea5e9" titulo="Control de stock por almacén" texto="El TPV avisa si vendes más de lo disponible en el almacén."/>
                <Mini x={888} y={0}   ico="lock" color={C.ambar} titulo="Cierres de caja" texto="Arqueo por turno, descuadre detectado y movimientos de efectivo auditables."/>
                <Mini x={0}   y={126} ico="receipt_long" color={C.azul} titulo="Validaciones previas" texto="Antes de guardar la venta se comprueban el stock, el cliente y los datos fiscales."/>
                <Mini x={444} y={126} ico="request_quote" color="#7c3aed" titulo="Precios por catálogo" texto="Tarifas por tipo de cliente, IVA por tipo de venta y precio por cantidad."/>
                <Mini x={888} y={126} ico="warning" color={C.rojo} titulo="Devoluciones" texto="Una venta guardada no se edita: se corrige con una rectificativa vinculada a la original."/>
              </div>
            </div>
          </AppTPV>
          {/* La venta a pantalla completa, vacía */}
          {posP > 0 && <div style={{ position:'absolute', inset:0, opacity:posP }}><PantallaVenta t={t}/></div>}
          <Cursor t={t} op={1 - posP}
            kf={[[T.vincula, 900, 400], [clicVincular - 0.1, 1530, 130], [T.pantalla - 0.2, 1530, 130], [clicPC - 0.1, 440, 289]]}
            clics={[clicVincular, clicPC]}/>
        </Ventana>
      </>)}
    </Fondo>
  );
}
Object.assign(window, { EscenaTPV01 });