/*!
 * SmartposPromoBgStage — Fondo claro "mesh gradient" estilo Stripe/Linear.
 * Canvas 2D liviano: blanco con 4 blobs de marca que se mueven lentamente.
 * Diseñado para NO interferir con el texto (velo blanco superior + grid sutil).
 * Reemplaza al antiguo Three.js (sin dependencias externas pesadas).
 */
(function () {
  'use strict';

  function BgStage(canvas) {
    this.canvas = canvas;
    this.ctx2d = canvas.getContext('2d');

    var self = this;
    this._resize();
    this._onResize = function () { self._resize(); };
    window.addEventListener('resize', this._onResize);
    if (window.ResizeObserver) {
      this._ro = new ResizeObserver(function () { self._resize(); });
      this._ro.observe(canvas.parentElement);
    }

    this.blobs = [
      { color: 'rgba(0, 212, 255, 0.55)',  x: 0.18, y: 0.28, r: 0.55, p: 0.0 },
      { color: 'rgba(124, 92, 255, 0.50)', x: 0.82, y: 0.22, r: 0.50, p: 1.4 },
      { color: 'rgba(255, 78, 205, 0.40)', x: 0.78, y: 0.82, r: 0.55, p: 2.7 },
      { color: 'rgba(16, 185, 129, 0.35)', x: 0.20, y: 0.82, r: 0.50, p: 4.1 }
    ];

    // Compatible con la API previa que usaban las escenas
    this.params = {
      hue: 0.55,
      cameraDist: 14,
      cameraSpin: 0.06,
      particleSpeed: 1.0,
      lineThreshold: 2.6,
      haloIntensity: 0.0,
      blobIntensity: 1.0
    };

    this._t = 0;
    this._raf = 0;
    this._running = true;
    this._loop = this._loop.bind(this);
    this._loop();
  }

  BgStage.prototype._resize = function () {
    var rect = this.canvas.getBoundingClientRect();
    var dpr = Math.min(window.devicePixelRatio || 1, 2);
    this.w = Math.max(rect.width, 320);
    this.h = Math.max(rect.height, 200);
    this.canvas.width  = Math.round(this.w * dpr);
    this.canvas.height = Math.round(this.h * dpr);
    this.canvas.style.width  = this.w + 'px';
    this.canvas.style.height = this.h + 'px';
    this.ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
  };

  BgStage.prototype._loop = function () {
    if (!this._running) return;
    this._raf = requestAnimationFrame(this._loop);
    this._t += 0.005;

    var ctx = this.ctx2d, w = this.w, h = this.h;
    var t = this._t;
    var intensity = this.params.blobIntensity;

    // Fondo blanco con leve gradiente vertical
    var g = ctx.createLinearGradient(0, 0, 0, h);
    g.addColorStop(0, '#ffffff');
    g.addColorStop(1, '#f3f7ff');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, w, h);

    // Blobs de color (composición lighter)
    ctx.globalCompositeOperation = 'lighter';
    for (var i = 0; i < this.blobs.length; i++) {
      var b = this.blobs[i];
      var cx = (b.x + Math.sin(t * 0.6 + b.p) * 0.06) * w;
      var cy = (b.y + Math.cos(t * 0.7 + b.p) * 0.06) * h;
      var rr = Math.min(w, h) * b.r * (1 + Math.sin(t * 0.4 + b.p) * 0.06) * intensity;
      var rg = ctx.createRadialGradient(cx, cy, 0, cx, cy, rr);
      rg.addColorStop(0, b.color);
      rg.addColorStop(1, 'rgba(255,255,255,0)');
      ctx.fillStyle = rg;
      ctx.fillRect(0, 0, w, h);
    }
    ctx.globalCompositeOperation = 'source-over';

    // Velo blanco para garantizar legibilidad del texto
    ctx.fillStyle = 'rgba(255,255,255,0.62)';
    ctx.fillRect(0, 0, w, h);

    // Grid sutil "tech" (líneas finas)
    ctx.strokeStyle = 'rgba(10, 30, 80, 0.045)';
    ctx.lineWidth = 1;
    var step = 40;
    var ox = (Math.sin(t * 0.2) * 8);
    var oy = (Math.cos(t * 0.2) * 8);
    for (var x = -step + (ox % step); x < w; x += step) {
      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
    }
    for (var y = -step + (oy % step); y < h; y += step) {
      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
    }
  };

  BgStage.prototype.destroy = function () {
    this._running = false;
    cancelAnimationFrame(this._raf);
    window.removeEventListener('resize', this._onResize);
    if (this._ro) this._ro.disconnect();
  };

  // Conserva nombres antiguos para no tocar modal.js / director.js
  window.SmartposPromoThreeStage = BgStage;
})();
