/*!
 * Escena 0 — Intro. Presentación de Sm@rt como módulo adicional.
 * Duración: 6s
 */
(function () {
  'use strict';
  var anime = window.anime, gsap = window.gsap;

  function build(el, ctx) {
    SPM_Util.clear(el);
    var BASE = ctx.base;
    el.innerHTML = `
      <div class="intro-wrap" style="display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;">
        <span class="kicker intro-kicker" style="opacity:0;">¡ ESTAMOS DE LANZAMIENTO ! · AGENTE SM@RT</span>

        <div class="logo-ring" style="position:relative;width:128px;height:128px;display:flex;align-items:center;justify-content:center;">
          <svg viewBox="0 0 128 128" style="position:absolute;inset:0;width:100%;height:100%;">
            <defs>
              <linearGradient id="lgIntro" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#00d4ff"/>
                <stop offset="100%" stop-color="#7c5cff"/>
              </linearGradient>
              <radialGradient id="rgIntro" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stop-color="rgba(0,212,255,.18)"/>
                <stop offset="100%" stop-color="rgba(0,212,255,0)"/>
              </radialGradient>
            </defs>
            <circle cx="64" cy="64" r="62" fill="url(#rgIntro)"/>
            <circle class="ring-bg" cx="64" cy="64" r="58" fill="none" stroke="rgba(10,30,80,.10)" stroke-width="2"/>
            <circle class="ring-fg" cx="64" cy="64" r="58" fill="none" stroke="url(#lgIntro)" stroke-width="3"
                    stroke-dasharray="364" stroke-dashoffset="364" stroke-linecap="round"
                    transform="rotate(-90 64 64)"/>
          </svg>
          <img class="logo-img" src="${BASE}assets/images/logo.png" alt="SmartPOS"
               onerror="this.style.display='none'"
               style="width:80px;height:auto;opacity:0;filter:drop-shadow(0 6px 24px rgba(124,92,255,.35));"/>
        </div>

        <h1 class="title gradient intro-title">${SPM_Util.splitText('Te presentamos a Sm@rt')}</h1>
        <p class="subtitle intro-sub" style="opacity:0;max-width:680px;font-size:clamp(15px,1.9vw,20px);font-weight:600;color:#0b1220;">
          El nuevo <b style="background:linear-gradient(120deg,#7c5cff,#00d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;">Agente de Inteligencia Artificial</b>
          <br/>diseñado para <b>automatizar tu día a día</b> en SmartPOS Cloud.
        </p>
      </div>
    `;
  }

  window.SmartposPromoScene_intro = {
    duration: 7500,
    enter: function (el, ctx) {
      build(el, ctx);
      ctx.stage.params.blobIntensity = 0.85;

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

      tl.fromTo(el.querySelector('.intro-kicker'), { y: 12, opacity: 0 }, { opacity: 1, y: 0, duration: 0.5, ease: 'power2.out' }, 0);

      tl.to(el.querySelector('.ring-fg'), { strokeDashoffset: 0, duration: 1.6, ease: 'power3.inOut' }, 0.2);

      tl.fromTo(el.querySelector('.logo-img'),
        { scale: 0.4, opacity: 0 },
        { opacity: 1, scale: 1.0, duration: 0.7, ease: 'back.out(2)' }, 0.7);

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

      // Subtítulo entra antes y con más presencia (escala desde 0.95)
      tl.fromTo(el.querySelector('.intro-sub'),
        { y: 18, opacity: 0, scale: 0.96 },
        { opacity: 1, y: 0, scale: 1, duration: 0.9, ease: 'power3.out' }, 2.4);

      return tl;
    },
    exit: function (el) {
      return gsap.to(el, { opacity: 0, scale: 0.97, duration: 0.5, ease: 'power2.in' });
    }
  };
})();
