// === Escena 01 — El contrato: para quién es, qué promete y la Única Cosa ===
// Presupuesto → venta (el camino del vídeo) y, debajo, pedido → venta (el otro camino, escena 6).
// No hay flecha presupuesto → pedido: en play un pedido no nace de un presupuesto (PedidosD no
// tiene referencia a presupuesto; solo la venta la tiene: VentasIngresosES.ReferenciaPresupuestoDeVenta).

function DocTarjeta({ x, y, w = 400, ico, tipo, num, importe, e = 1, dx = 0, atenuar = 0, chip }){
  return (
    <div style={{ position:'absolute', left:x, top:y, width:w, opacity:e * (1 - atenuar * 0.65), transform:`translate(${dx}px, ${(1 - e) * 16}px)`,
      background:'#fff', border:`1px solid ${P.borde}`, borderRadius:16, padding:'24px 28px', boxShadow:'0 14px 36px rgba(15,23,42,0.08)' }}>
      <div style={{ display:'flex', alignItems:'center', gap:12 }}>
        <Ico n={ico} s={34} c={P.azul}/><R s={28} w={700}>{tipo}</R><div style={{ flex:1 }}/>{chip}
      </div>
      <div style={{ marginTop:14, display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
        <R s={22} c={P.gris}>{num}</R><R s={26} w={600}>{importe}</R>
      </div>
    </div>
  );
}

function Flecha({ x1, y1, x2, y2, p, color = P.azul, discontinua = false, op = 1 }){
  const L = Math.hypot(x2 - x1, y2 - y1), a = Math.atan2(y2 - y1, x2 - x1);
  const xe = x1 + (x2 - x1) * p, ye = y1 + (y2 - y1) * p;
  return (
    <svg style={{ position:'absolute', left:0, top:0, overflow:'visible', opacity:op }} width="1920" height="1080">
      <line x1={x1} y1={y1} x2={xe} y2={ye} stroke={color} strokeWidth="4" strokeLinecap="round" strokeDasharray={discontinua ? '10 12' : 'none'}/>
      {p > 0.98 && <path d={`M ${x2} ${y2} l ${-18 * Math.cos(a - 0.45)} ${-18 * Math.sin(a - 0.45)} M ${x2} ${y2} l ${-18 * Math.cos(a + 0.45)} ${-18 * Math.sin(a + 0.45)}`} stroke={color} strokeWidth="4" strokeLinecap="round" fill="none"/>}
    </svg>
  );
}

function EscenaPV01({ t }){
  useVoz(0);
  const G = GUION[0];
  const T = {
    ti:B(G,'Tienes un presupuesto'),
    si:B(G,'dice que sí'),
    factura:B(G,'se convierte en una factura'),
    pedido:B(G,'pasar antes por un pedido'),
    idea:B(G,'La regla es corta'),
    nace:B(G,'la venta nace del presupuesto'),
    teclea:B(G,'No se teclea dos veces'),
    empecemos:B(G,'dónde viven'),
  };
  const ePre = pr(t, T.ti, 0.8);
  const eSi = pr(t, T.si, 0.5);
  const pFl = Easing.easeInOutCubic(clamp((t - T.factura) / 1.2, 0, 1));
  const eVen = pr(t, T.factura + 0.9, 0.7);
  const ePed = pr(t, T.pedido, 0.8);
  const pFl2 = Easing.easeInOutCubic(clamp((t - T.pedido - 0.6) / 1.2, 0, 1));
  const at = pr(t, T.idea, 0.8);
  const e1 = pr(t, T.nace, 0.7), e2 = pr(t, T.teclea, 0.7);
  return (
    <SlideCanvas variant="light-soft" bg="#F8FAFC">
      <div style={{ position:'absolute', left:0, right:0, top:70, textAlign:'center', opacity:pr(t, 0, 0.6) }}>
        <DinaupLogo size={34} style={{ margin:'0 auto' }}/>
        <div className="f-plex" style={{ marginTop:26, fontSize:18, fontWeight:600, letterSpacing:'3px', color:P.azul }}>PYMES · PREVENTA</div>
        <h1 className="f-plex" style={{ margin:'12px 0 0', fontSize:62, fontWeight:700, letterSpacing:'-0.03em', color:'#0F172A' }}>Del presupuesto a la factura</h1>
      </div>

      <div style={{ opacity:1 - e1 }}>
        <DocTarjeta x={330} y={420} ico="request_quote" tipo="Presupuesto" num="P-2026-0031" importe="1.210,00 €" e={ePre} atenuar={at}
          chip={eSi > 0 && <span style={{ opacity:eSi }}><Estado txt="Aceptado"/></span>}/>
        <Flecha x1={750} y1={510} x2={1170} y2={510} p={pFl} op={1 - at * 0.65}/>
        <DocTarjeta x={1190} y={420} ico="point_of_sale" tipo="Venta" num="F-2026-0142" importe="1.210,00 €" e={eVen} atenuar={at}/>
        <DocTarjeta x={330} y={680} ico="shopping_cart" tipo="Pedido" num="Si hay que preparar" importe="" e={ePed} atenuar={Math.max(at, 0.35)}/>
        <Flecha x1={750} y1={760} x2={1170} y2={585} p={pFl2} color={P.gris2} discontinua op={1 - at * 0.65}/>
      </div>

      {/* LA ÚNICA COSA · promesa */}
      <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:470, textAlign:'center', fontSize:66, fontWeight:700, letterSpacing:'-0.03em',
        color:'#0F172A', opacity:e1, transform:`translateY(${(1 - e1) * 14}px)` }}>La venta nace del presupuesto.</div>
      <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:575, textAlign:'center', fontSize:44, fontWeight:600,
        color:P.azul, opacity:e2, transform:`translateY(${(1 - e2) * 14}px)` }}>No se teclea dos veces.</div>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPV01, DocTarjeta, Flecha });