/*!
 * Escena 4 — CTA "Contáctanos para activar Sm@rt".
 * El módulo es ADICIONAL, no incluido. Invita a contactar.
 */
(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 style="display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;width:100%;max-width:780px;">
        <span class="kicker cta-kicker" style="opacity:0;">BETA · DISPONIBLE BAJO SOLICITUD</span>

        <h1 class="title gradient cta-title" style="font-size:clamp(28px,5.2vw,56px);">${SPM_Util.splitText('Activa Sm@rt en tu cuenta')}</h1>

        <p class="subtitle cta-sub" style="opacity:0;max-width:660px;font-size:clamp(15px,1.8vw,19px);font-weight:600;color:#0b1220;">
          Adquiere ya el módulo <b style="background:linear-gradient(120deg,#7c5cff,#00d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;">Agente Sm@rt</b> para tu SmartPOS.
          <br/>Vuélvete Sm@rt.
        </p>

        <div class="contact-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;margin-top:8px;">

          <a class="contact-card" data-i="0" target="_blank" rel="noopener"
             href="https://wa.me/573142579675?text=Quiero%20activar%20el%20Agente%20Sm%40rt%20en%20mi%20cuenta%20SmartPOS"
             style="opacity:0;transform:translateY(18px);text-decoration:none;color:inherit;
                    background:white;border:1px solid rgba(10,30,80,.08);border-radius:14px;padding:18px;
                    display:flex;flex-direction:column;align-items:center;gap:8px;
                    box-shadow:0 8px 24px rgba(10,30,80,.06);transition:transform .2s, box-shadow .2s;cursor:pointer;">
            <div style="width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 0 0 1.51 5.26l.213.339-1.004 3.667 3.77-1.011z"/></svg>
            </div>
            <div style="font-size:11px;letter-spacing:1.6px;color:rgba(10,30,80,.55);font-weight:700;">WHATSAPP</div>
            <div style="font-size:14px;font-weight:800;">+57 314 257 9675</div>
          </a>

          <a class="contact-card" data-i="1"
             href="mailto:ventas@tiendasmart.net?subject=Activación%20Agente%20Sm@rt%20IA"
             style="opacity:0;transform:translateY(18px);text-decoration:none;color:inherit;
                    background:white;border:1px solid rgba(10,30,80,.08);border-radius:14px;padding:18px;
                    display:flex;flex-direction:column;align-items:center;gap:8px;
                    box-shadow:0 8px 24px rgba(10,30,80,.06);transition:transform .2s, box-shadow .2s;cursor:pointer;">
            <div style="width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#00d4ff,#7c5cff);display:flex;align-items:center;justify-content:center;">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4l-8 5-8-5V6l8 5 8-5z"/></svg>
            </div>
            <div style="font-size:11px;letter-spacing:1.6px;color:rgba(10,30,80,.55);font-weight:700;">EMAIL</div>
            <div style="font-size:14px;font-weight:800;">ventas@tiendasmart.net</div>
          </a>

          <a class="contact-card" data-i="2" target="_blank" rel="noopener"
             href="https://tiendasmart.net"
             style="opacity:0;transform:translateY(18px);text-decoration:none;color:inherit;
                    background:white;border:1px solid rgba(10,30,80,.08);border-radius:14px;padding:18px;
                    display:flex;flex-direction:column;align-items:center;gap:8px;
                    box-shadow:0 8px 24px rgba(10,30,80,.06);transition:transform .2s, box-shadow .2s;cursor:pointer;">
            <div style="width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#7c5cff,#ff4ecd);display:flex;align-items:center;justify-content:center;">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2zm6.93 9h-2.95a15.65 15.65 0 0 0-1.38-5.84A8.03 8.03 0 0 1 18.93 11zM12 4.04c.83 1.2 1.48 3.27 1.61 6.96h-3.22C10.52 7.31 11.17 5.24 12 4.04zM4.26 14a8.013 8.013 0 0 1 0-4h3.38a16.6 16.6 0 0 0 0 4zm.81 2h2.95a15.65 15.65 0 0 0 1.38 5.84A7.99 7.99 0 0 1 5.07 16zm2.95-8H5.07a7.99 7.99 0 0 1 4.33-3.84A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-3.27-1.61-6.96h3.22c-.13 3.69-.78 5.76-1.61 6.96zM14.36 14H9.64a14.49 14.49 0 0 1 0-4h4.72a14.49 14.49 0 0 1 0 4zm.25 7.84A15.65 15.65 0 0 0 15.99 16h2.95a8.03 8.03 0 0 1-4.33 5.84zM16.36 14a16.6 16.6 0 0 0 0-4h3.38a8.013 8.013 0 0 1 0 4z"/></svg>
            </div>
            <div style="font-size:11px;letter-spacing:1.6px;color:rgba(10,30,80,.55);font-weight:700;">WEB</div>
            <div style="font-size:14px;font-weight:800;">tiendasmart.net</div>
          </a>
        </div>

        <div class="cta-footer" style="opacity:0;display:flex;align-items:center;gap:12px;margin-top:6px;font-size:12px;color:rgba(10,30,80,.55);">
          <img src="${BASE}../images/logo.png" alt="SmartPOS" style="height:22px;opacity:.85;">
          <span>Tu información está segura · Atención en horario de oficina · Activación remota en menos de 24h.</span>
        </div>

        <div class="cta-help" style="opacity:0;font-size:12px;color:rgba(10,30,80,.5);margin-top:2px;">
          Cierra este aviso para iniciar sesión normalmente.
        </div>
      </div>
    `;
  }

  window.SmartposPromoScene_cta = {
    duration: 10000,
    enter: function (el, ctx) {
      build(el, ctx);
      ctx.stage.params.blobIntensity = 1.2;

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

      tl.fromTo(el.querySelector('.cta-kicker'), { y: 14, opacity: 0 }, { opacity: 1, y: 0, duration: 0.5 }, 0);

      tl.add(function () {
        anime({
          targets: el.querySelectorAll('.cta-title .char'),
          translateY: [60, 0], opacity: [0, 1], rotateZ: [-6, 0],
          duration: 950, delay: anime.stagger(22), easing: 'easeOutExpo'
        });
      }, 0.3);

      tl.fromTo(el.querySelector('.cta-sub'), { y: 14, opacity: 0 },
        { opacity: 1, y: 0, duration: 0.6 }, 1.6);

      tl.add(function () {
        anime({
          targets: el.querySelectorAll('.contact-card'),
          translateY: [18, 0], opacity: [0, 1],
          duration: 700, delay: anime.stagger(140), easing: 'easeOutBack'
        });
      }, 2.2);

      tl.fromTo(el.querySelector('.cta-footer'), { opacity: 0 }, { opacity: 1, duration: 0.6 }, 3.2);
      tl.fromTo(el.querySelector('.cta-help'),   { opacity: 0 }, { opacity: 1, duration: 0.6 }, 3.6);

      // Hover micro-bump permanente en cards (vía clase + JS pequeño)
      el.querySelectorAll('.contact-card').forEach(function (card) {
        card.addEventListener('mouseenter', function () {
          gsap.to(card, { y: -4, boxShadow: '0 20px 40px rgba(124,92,255,.18)', duration: 0.25 });
        });
        card.addEventListener('mouseleave', function () {
          gsap.to(card, { y: 0, boxShadow: '0 8px 24px rgba(10,30,80,.06)', duration: 0.25 });
        });
      });

      // Loop sutil en el título
      tl.to(el.querySelector('.cta-title'), {
        filter: 'drop-shadow(0 0 24px rgba(124,92,255,.25))',
        repeat: -1, yoyo: true, duration: 2.4, ease: 'sine.inOut'
      }, 4);

      return tl;
    },
    exit: function (el) {
      return gsap.to(el, { opacity: 0, duration: 0.4 });
    }
  };
})();
