/*!
 * Helper para escenas tipo "Capacidad" con video preview + lightbox.
 * Expone window.SPM_FeatureScene(opts) que retorna un objeto { duration, enter, exit }.
 */
(function () {
  'use strict';
  var anime = window.anime, gsap = window.gsap;

  function build(el, ctx, cfg) {
    SPM_Util.clear(el);
    var BASE = ctx.base;
    var videoSrc = BASE + 'videos/' + cfg.video;
    el.innerHTML = `
      <div class="feat-wrap" style="display:grid;grid-template-columns:1fr 1.05fr;gap:32px;align-items:center;width:100%;max-width:920px;">
        <div class="feat-text" style="display:flex;flex-direction:column;gap:14px;">
          <span class="kicker" style="opacity:0;align-self:flex-start;">${cfg.kicker}</span>
          <h1 class="title feat-title" style="text-align:left;font-size:clamp(22px,3.6vw,40px);">${SPM_Util.splitText(cfg.title)}</h1>
          <p class="subtitle feat-sub" style="text-align:left;opacity:0;margin-top:4px;">${cfg.sub}</p>
          <ul class="bullets" style="opacity:0;list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px;">
            ${cfg.bullets.map(function (b) { return `
              <li style="display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:rgba(20,30,60,.78);line-height:1.4;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="flex:none;margin-top:2px;">
                  <circle cx="12" cy="12" r="10" fill="url(#bullGrad${cfg.id})"/>
                  <path d="M8 12.5l3 3 5-6" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                </svg>
                <span>${b}</span>
              </li>
            `; }).join('')}
          </ul>
          <svg width="0" height="0" style="position:absolute;">
            <defs>
              <linearGradient id="bullGrad${cfg.id}" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#00d4ff"/>
                <stop offset="100%" stop-color="#7c5cff"/>
              </linearGradient>
            </defs>
          </svg>
          <button class="ctrl-btn primary feat-cta" data-act="open-lb" data-src="${videoSrc}" data-title="${cfg.title}"
                  style="opacity:0;align-self:flex-start;margin-top:6px;padding:11px 18px;font-size:14px;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
            Ver demo completo
          </button>
        </div>

        <div class="video-card feat-video" data-act="open-lb" data-src="${videoSrc}" data-title="${cfg.title}"
             style="opacity:0;transform:translateY(20px) scale(.96);">
          <video class="preview" src="${videoSrc}" autoplay muted loop playsinline preload="metadata"></video>
          <div class="play-overlay"></div>
          <div class="play-btn" style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(10,30,80,.30);">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="#0b1220"><path d="M8 5v14l11-7z"/></svg>
          </div>
          <span class="badge-bottom"><span class="dot"></span> DEMO REAL · CLIC PARA AMPLIAR</span>
        </div>
      </div>
    `;
  }

  window.SPM_FeatureScene = function (cfg) {
    return {
      duration: cfg.duration || 11000,
      enter: function (el, ctx) {
        build(el, ctx, cfg);
        ctx.stage.params.blobIntensity = cfg.intensity || 1.0;

        gsap.set(el, { opacity: 1 });
        var tl = gsap.timeline();

        tl.fromTo(el.querySelector('.kicker'), { y: 12, opacity: 0 }, { opacity: 1, y: 0, duration: 0.45 }, 0);

        tl.add(function () {
          anime({
            targets: el.querySelectorAll('.feat-title .char'),
            translateY: [30, 0], opacity: [0, 1],
            duration: 750, delay: anime.stagger(20), easing: 'easeOutExpo'
          });
        }, 0.2);

        tl.fromTo(el.querySelector('.feat-sub'), { y: 12, opacity: 0 },
          { opacity: 1, y: 0, duration: 0.55 }, 1.1);

        tl.fromTo(el.querySelector('.bullets'), { y: 14, opacity: 0 },
          { opacity: 1, y: 0, duration: 0.55 }, 1.4);

        tl.add(function () {
          anime({
            targets: el.querySelectorAll('.bullets li'),
            translateX: [-18, 0], opacity: [0, 1],
            duration: 500, delay: anime.stagger(110), easing: 'easeOutQuart'
          });
        }, 1.4);

        tl.fromTo(el.querySelector('.feat-cta'), { y: 12, opacity: 0 },
          { opacity: 1, y: 0, duration: 0.5, ease: 'back.out(2)' }, 2.4);

        // Video card entra con bounce
        tl.fromTo(el.querySelector('.feat-video'),
          { opacity: 0, y: 20, scale: 0.96 },
          { opacity: 1, y: 0, scale: 1, duration: 0.8, ease: 'back.out(1.6)' }, 1.0);

        return tl;
      },
      exit: function (el) {
        // Pausar preview al salir para liberar CPU/red
        var v = el.querySelector('video.preview');
        if (v) { try { v.pause(); } catch (e) {} }
        return gsap.to(el, { opacity: 0, y: -20, duration: 0.5, ease: 'power2.in' });
      }
    };
  };
})();
