/* MIRAI — GSAP animation layer (additive, does not modify markup or copy) */

(function () {
  if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
    console.warn("[MIRAI] GSAP not available, animations skipped");
    return;
  }
  gsap.registerPlugin(ScrollTrigger);

  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduceMotion) return;

  let ctx = null;
  let magneticCleanups = [];

  function clearMagnetics() {
    magneticCleanups.forEach((fn) => fn());
    magneticCleanups = [];
  }

  function setupMagnetic(selector, strength = 14) {
    document.querySelectorAll(selector).forEach((btn) => {
      const onMove = (e) => {
        const r = btn.getBoundingClientRect();
        const x = (e.clientX - r.left - r.width / 2) / r.width;
        const y = (e.clientY - r.top - r.height / 2) / r.height;
        gsap.to(btn, { x: x * strength, y: y * strength, duration: 0.4, ease: "power3.out" });
      };
      const onLeave = () => {
        gsap.to(btn, { x: 0, y: 0, duration: 0.6, ease: "elastic.out(1, 0.5)" });
      };
      btn.addEventListener("mousemove", onMove);
      btn.addEventListener("mouseleave", onLeave);
      magneticCleanups.push(() => {
        btn.removeEventListener("mousemove", onMove);
        btn.removeEventListener("mouseleave", onLeave);
      });
    });
  }

  function setupHoverLift(selector, lift = -6) {
    document.querySelectorAll(selector).forEach((el) => {
      const onEnter = () => gsap.to(el, { y: lift, duration: 0.4, ease: "power3.out" });
      const onLeave = () => gsap.to(el, { y: 0, duration: 0.5, ease: "power3.out" });
      el.addEventListener("mouseenter", onEnter);
      el.addEventListener("mouseleave", onLeave);
      magneticCleanups.push(() => {
        el.removeEventListener("mouseenter", onEnter);
        el.removeEventListener("mouseleave", onLeave);
      });
    });
  }

  function init() {
    if (ctx) ctx.revert();
    clearMagnetics();

    ctx = gsap.context(() => {
      // ===== NAV — slide down on load =====
      gsap.from(".nav", {
        y: -40,
        opacity: 0,
        duration: 0.9,
        ease: "power3.out",
        clearProps: "all",
      });

      // ===== HERO decorative parallax =====
      const hero = document.querySelector(".hero");
      if (hero) {
        gsap.to(".hero__orb", {
          y: 140,
          scale: 1.15,
          ease: "none",
          scrollTrigger: { trigger: hero, start: "top top", end: "bottom top", scrub: true },
        });
        gsap.to(".hero__beam", {
          y: -100,
          ease: "none",
          scrollTrigger: { trigger: hero, start: "top top", end: "bottom top", scrub: true },
        });
        gsap.to(".hero__sheen", {
          yPercent: 25,
          opacity: 0.4,
          ease: "none",
          scrollTrigger: { trigger: hero, start: "top top", end: "bottom top", scrub: true },
        });

        // Slow drift on orb (perpetual)
        gsap.to(".hero__orb", {
          x: "+=30",
          duration: 6,
          yoyo: true,
          repeat: -1,
          ease: "sine.inOut",
        });
      }

      // ===== DASHBOARD — entrance + perpetual float =====
      const dash = document.querySelector(".dash");
      if (dash) {
        gsap.from(dash, {
          y: 80,
          scale: 0.96,
          opacity: 0,
          duration: 1.1,
          ease: "power3.out",
          delay: 0.3,
          clearProps: "opacity",
        });
        gsap.to(dash, {
          y: "-=8",
          duration: 3.6,
          yoyo: true,
          repeat: -1,
          ease: "sine.inOut",
          delay: 1.5,
        });
      }

      // Dashboard bars draw-in on scroll
      ScrollTrigger.batch(".dash__chart .bar", {
        start: "top 92%",
        onEnter: (batch) =>
          gsap.from(batch, {
            scaleY: 0,
            transformOrigin: "bottom center",
            duration: 0.8,
            ease: "power3.out",
            stagger: 0.05,
          }),
      });

      // ===== EL CAMBIO — hub entrance + data flowing into the agent =====
      const cambioHub = document.querySelector(".cambio-hub");
      if (cambioHub) {
        gsap.timeline({
          scrollTrigger: { trigger: cambioHub, start: "top 82%" },
        })
          .from(".cambio-hub .cambio-ring", {
            scale: 0, opacity: 0, duration: 0.8, ease: "power2.out", stagger: 0.15, transformOrigin: "center", clearProps: "all",
          })
          .from(".cambio-hub .cambio-spoke", {
            scale: 0, opacity: 0, duration: 0.5, ease: "power2.out", stagger: 0.06, transformOrigin: "center", clearProps: "all",
          }, "<0.1")
          .from(".cambio-hub .cambio-node", {
            scale: 0, opacity: 0, duration: 0.55, ease: "back.out(2.2)", stagger: 0.08, transformOrigin: "center", clearProps: "all",
          }, "-=0.3")
          .from(".cambio-hub .cambio-center", {
            scale: 0, opacity: 0, duration: 0.7, ease: "back.out(1.8)", transformOrigin: "center", clearProps: "all",
          }, "-=0.25")
          .call(() => {
            // GSAP leaves an inline transform-origin on SVG nodes after clearProps;
            // strip it so the CSS hover scale (transform-origin: center) takes over.
            cambioHub.querySelectorAll(".cambio-node, .cambio-spoke, .cambio-center, .cambio-ring")
              .forEach((el) => el.style.removeProperty("transform-origin"));
          });

        // Perpetual pulse: a dot travels from each channel into the agent
        document.querySelectorAll(".cambio-pulse-dot").forEach((dot, i) => {
          const x = parseFloat(dot.dataset.x);
          const y = parseFloat(dot.dataset.y);
          const cx = parseFloat(dot.dataset.cx);
          const cy = parseFloat(dot.dataset.cy);
          gsap.fromTo(
            dot,
            { attr: { cx: x, cy: y }, opacity: 0.9 },
            {
              attr: { cx, cy },
              opacity: 0,
              duration: 1.6,
              ease: "power1.in",
              repeat: -1,
              repeatDelay: 1.3,
              delay: 0.6 + i * 0.45,
              scrollTrigger: { trigger: cambioHub, start: "top 82%" },
            }
          );
        });
      }

      // ===== FEATURE CARDS — animate inner pieces (avoids conflict with .fade-up) =====
      document.querySelectorAll(".feature").forEach((card) => {
        const inner = card.querySelectorAll(
          ".feature__index, .feature__visual, .feature__title, .feature__desc"
        );
        gsap.from(inner, {
          y: 24,
          opacity: 0,
          duration: 0.7,
          ease: "power3.out",
          stagger: 0.08,
          scrollTrigger: { trigger: card, start: "top 88%" },
          clearProps: "all",
        });
      });
      setupHoverLift(".feature", -8);

      // Glow icons subtle pulse
      gsap.to(".glow-icon", {
        scale: 1.06,
        duration: 2.4,
        yoyo: true,
        repeat: -1,
        ease: "sine.inOut",
        stagger: { each: 0.3, from: "random" },
      });

      // Wave stems shimmer
      gsap.to(".viz-wave .stem", {
        scaleY: 0.6,
        transformOrigin: "center bottom",
        duration: 0.9,
        yoyo: true,
        repeat: -1,
        ease: "sine.inOut",
        stagger: { each: 0.05, from: "center", repeat: -1, yoyo: true },
      });

      // Network nodes pulse
      gsap.to(".viz-network circle", {
        opacity: 0.4,
        duration: 1.6,
        yoyo: true,
        repeat: -1,
        ease: "sine.inOut",
        stagger: { each: 0.18, from: "random" },
      });

      // ===== METRICS =====
      ScrollTrigger.batch(".metric", {
        start: "top 92%",
        onEnter: (batch) =>
          gsap.from(batch, {
            y: 30,
            opacity: 0,
            duration: 0.7,
            ease: "power3.out",
            stagger: 0.1,
            clearProps: "all",
          }),
      });

      // ===== STEPS — animate inner content =====
      document.querySelectorAll(".step").forEach((s) => {
        const kids = s.querySelectorAll(".step__num, .step__title, .step__body");
        gsap.from(kids, {
          y: 20,
          opacity: 0,
          duration: 0.6,
          ease: "power3.out",
          stagger: 0.08,
          scrollTrigger: { trigger: s, start: "top 88%" },
          clearProps: "all",
        });
      });
      setupHoverLift(".step--card", -6);

      // ===== HOW section — timeline line draw + dots pop =====
      const howLine = document.querySelector(".steps--timeline .steps__line");
      if (howLine) {
        gsap.from(howLine, {
          scaleX: 0,
          transformOrigin: "left center",
          duration: 1.1,
          ease: "power3.out",
          scrollTrigger: { trigger: ".steps--timeline", start: "top 80%" },
          clearProps: "transform",
        });
      }
      gsap.from(".step__dot", {
        scale: 0,
        opacity: 0,
        duration: 0.5,
        ease: "back.out(2)",
        stagger: 0.12,
        scrollTrigger: { trigger: ".steps--timeline", start: "top 80%" },
        clearProps: "all",
      });

      // How background parallax
      const howSection = document.querySelector(".section--how");
      if (howSection) {
        gsap.to(".how__orb", {
          y: 80,
          ease: "none",
          scrollTrigger: { trigger: howSection, start: "top bottom", end: "bottom top", scrub: true },
        });
        gsap.to(".how__grid", {
          yPercent: -8,
          ease: "none",
          scrollTrigger: { trigger: howSection, start: "top bottom", end: "bottom top", scrub: true },
        });
      }

      // ===== LOGOS carousel — fade-in =====
      gsap.from(".logos__viewport", {
        opacity: 0,
        y: 24,
        duration: 0.9,
        ease: "power3.out",
        scrollTrigger: { trigger: ".section--logos", start: "top 85%" },
        clearProps: "all",
      });

      // ===== CASE — quote and stats =====
      gsap.from(".case__quote .mark", {
        scale: 0,
        opacity: 0,
        duration: 0.8,
        ease: "back.out(2)",
        stagger: 0.15,
        scrollTrigger: { trigger: ".case", start: "top 80%" },
        clearProps: "all",
      });

      ScrollTrigger.batch(".case__stat", {
        start: "top 88%",
        onEnter: (batch) =>
          gsap.from(batch, {
            scale: 0.85,
            opacity: 0,
            duration: 0.7,
            ease: "back.out(1.4)",
            stagger: 0.12,
            clearProps: "all",
          }),
      });

      // ===== PRICING =====
      gsap.from(".plan", {
        y: 60,
        opacity: 0,
        duration: 0.9,
        ease: "power3.out",
        scrollTrigger: { trigger: ".plan", start: "top 88%" },
        clearProps: "all",
      });
      gsap.from(".plan__features li", {
        x: -16,
        opacity: 0,
        duration: 0.5,
        ease: "power2.out",
        stagger: 0.06,
        scrollTrigger: { trigger: ".plan__features", start: "top 90%" },
        clearProps: "all",
      });

      // ===== FOR WHOM list =====
      ScrollTrigger.batch(".forwhom__list li", {
        start: "top 92%",
        onEnter: (batch) =>
          gsap.from(batch, {
            x: -28,
            opacity: 0,
            duration: 0.6,
            ease: "power3.out",
            stagger: 0.08,
            clearProps: "all",
          }),
      });

      // ===== FAQ items =====
      ScrollTrigger.batch(".faq__item", {
        start: "top 92%",
        onEnter: (batch) =>
          gsap.from(batch, {
            y: 18,
            opacity: 0,
            duration: 0.5,
            ease: "power3.out",
            stagger: 0.06,
            clearProps: "all",
          }),
      });

      // ===== ABOUT cards — animate inner =====
      document.querySelectorAll(".about__card").forEach((card) => {
        const kids = card.querySelectorAll(".about__eyebrow, .about__body");
        gsap.from(kids, {
          y: 20,
          opacity: 0,
          duration: 0.6,
          ease: "power3.out",
          stagger: 0.1,
          scrollTrigger: { trigger: card, start: "top 88%" },
          clearProps: "all",
        });
      });

      // ===== CONTACT form fields =====
      document.querySelectorAll(".contact__card").forEach((card) => {
        const kids = card.querySelectorAll(".contact__field, .contact__actions");
        gsap.from(kids, {
          y: 20,
          opacity: 0,
          duration: 0.6,
          ease: "power3.out",
          stagger: 0.08,
          scrollTrigger: { trigger: card, start: "top 85%" },
          clearProps: "all",
        });
      });

      // ===== FOOTER reveal =====
      gsap.from(".footer__main > *", {
        y: 30,
        opacity: 0,
        duration: 0.7,
        ease: "power3.out",
        stagger: 0.1,
        scrollTrigger: { trigger: ".footer", start: "top 95%" },
        clearProps: "all",
      });

      // ===== Magnetic buttons =====
      setupMagnetic(".btn--primary", 14);
      setupMagnetic(".btn--outline", 10);
      setupMagnetic(".nav__cta .btn", 8);
    });

    // Force layout sync after dynamic content
    requestAnimationFrame(() => ScrollTrigger.refresh());
  }

  function boot() {
    // Wait for React mount
    let tries = 0;
    const ready = () => {
      const mounted = document.querySelector(".hero, .subpage");
      if (mounted || tries > 40) {
        init();
        setTimeout(() => ScrollTrigger.refresh(), 250);
        setTimeout(() => ScrollTrigger.refresh(), 1200);
      } else {
        tries++;
        setTimeout(ready, 50);
      }
    };
    ready();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", boot);
  } else {
    boot();
  }

  // Re-initialise when the hash router swaps the page
  window.addEventListener("hashchange", () => {
    setTimeout(() => {
      init();
      ScrollTrigger.refresh();
    }, 120);
  });

  window.addEventListener("load", () => ScrollTrigger.refresh());
})();