"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";

/**
 * Port of `html/assets/animations.js`. Runs GSAP + ScrollTrigger intros,
 * scroll-linked parallax, magnetic hover, 3D tilt, scroll progress, and the
 * page-load curtain. Selectors match the class names used by the section
 * components — keep them in sync.
 *
 * Re-runs on every route change so dynamic ACF-driven pages animate when
 * navigated to. Cleans up all triggers and listeners on unmount.
 */
export function Animations() {
  const pathname = usePathname();

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

    let cancelled = false;
    const eventCleanups: Array<() => void> = [];
    let progressEl: HTMLDivElement | null = null;

    (async () => {
      const gsapMod = await import("gsap");
      const stMod = await import("gsap/ScrollTrigger");
      if (cancelled) return;
      const gsap = gsapMod.gsap || gsapMod.default;
      const ScrollTrigger = stMod.ScrollTrigger || stMod.default;
      gsap.registerPlugin(ScrollTrigger);

      document.documentElement.classList.add("has-gsap");

      // 1. HERO (homepage cinematic video)
      const heroVideo = document.querySelector<HTMLElement>(".hero-video");
      if (heroVideo) {
        const tl = gsap.timeline({ defaults: { ease: "power3.out" }, delay: 0.15 });
        tl.from(".hero-eyebrow", { opacity: 0, y: 18, duration: 0.65 })
          .from(".hero-title", { opacity: 0, y: 40, duration: 1.0, ease: "power4.out" }, "-=0.25")
          .from(".hero-title .accent", { backgroundSize: "0% 100%", duration: 0.6, ease: "power2.out" }, "-=0.4")
          .from(".hero-sub", { opacity: 0, y: 22, duration: 0.7 }, "-=0.55")
          .from(".hero-ctas .btn", { opacity: 0, y: 18, duration: 0.5, stagger: 0.08 }, "-=0.4")
          .from(".hero-badges .b", { opacity: 0, y: 14, scale: 0.9, duration: 0.5, stagger: 0.06, ease: "back.out(1.5)" }, "-=0.35")
          .from(".hero-strip", { opacity: 0, y: 30, duration: 0.8, ease: "power3.out" }, "-=0.6")
          .from(".hero-scroll", { opacity: 0, duration: 0.6 }, "-=0.3");

        gsap.to(".hero-content", {
          y: 100, opacity: 0.55, ease: "none",
          scrollTrigger: { trigger: ".hero-video", start: "top top", end: "bottom top", scrub: true },
        });
        gsap.to(".hero-video video", {
          scale: 1.08, ease: "none",
          scrollTrigger: { trigger: ".hero-video", start: "top top", end: "bottom top", scrub: true },
        });
        gsap.to(".hero-strip", {
          y: -20, ease: "none",
          scrollTrigger: { trigger: ".hero-video", start: "top top", end: "bottom top", scrub: true },
        });
      }

      // 2. INNER-PAGE HEADERS
      document.querySelectorAll<HTMLElement>(".page-head").forEach((head) => {
        gsap.from(head.querySelectorAll(".crumbs, .eyebrow, h1, .lede"), {
          opacity: 0, y: 28, duration: 0.8, stagger: 0.12, ease: "power3.out",
        });
      });

      // 2b. PAGE HERO v2
      document.querySelectorAll<HTMLElement>(".page-hero").forEach((hero) => {
        const title = hero.querySelector<HTMLElement>(".ph-title");
        if (title && !title.dataset.lined) {
          Array.from(title.querySelectorAll<HTMLElement>(".line")).forEach((line) => {
            if (line.querySelector(":scope > span")) return;
            const inner = document.createElement("span");
            inner.innerHTML = line.innerHTML;
            line.innerHTML = "";
            line.appendChild(inner);
          });
          title.dataset.lined = "1";
        }

        const tl = gsap.timeline({ defaults: { ease: "power3.out" }, delay: 0.1 });
        tl.from(hero.querySelector(".ph-crumbs"), { opacity: 0, y: 14, duration: 0.55 })
          .from(hero.querySelector(".ph-eyebrow"), { opacity: 0, y: 16, duration: 0.55 }, "-=0.3")
          .from(hero.querySelectorAll(".ph-title .line > span"), {
            yPercent: 110, opacity: 0, duration: 0.95, stagger: 0.1, ease: "power4.out",
          }, "-=0.25")
          .from(hero.querySelector(".ph-lede"), { opacity: 0, y: 22, duration: 0.7 }, "-=0.45")
          .from(hero.querySelectorAll(".ph-stat"), {
            opacity: 0, y: 18, scale: 0.92, duration: 0.5, stagger: 0.08, ease: "back.out(1.6)",
          }, "-=0.4")
          .from(hero.querySelectorAll(".ph-cta .btn"), {
            opacity: 0, y: 16, duration: 0.5, stagger: 0.08,
          }, "-=0.3")
          .from(hero.querySelector(".ph-stage"), {
            opacity: 0, x: 60, scale: 0.94, duration: 1.0, ease: "power4.out",
          }, 0.25)
          .from(hero.querySelector(".ph-stamp"), {
            opacity: 0, rotation: -22, scale: 0.6, duration: 0.55, ease: "back.out(1.9)",
          }, "-=0.4")
          .from(hero.querySelector(".ph-floor"), { opacity: 0, y: 14, duration: 0.5 }, "-=0.35")
          .from(hero.querySelectorAll(".ph-pol"), {
            opacity: 0, y: 40, rotation: 0, scale: 0.7, duration: 0.7, stagger: 0.15, ease: "back.out(1.5)",
          }, "-=0.55")
          .from(hero.querySelector(".ph-ring"), {
            opacity: 0, scale: 0.5, duration: 0.6, ease: "back.out(1.7)",
          }, "-=0.4");

        const stage = hero.querySelector(".ph-stage");
        if (stage) {
          gsap.to(stage, {
            y: 80, ease: "none",
            scrollTrigger: { trigger: hero, start: "top top", end: "bottom top", scrub: true },
          });
        }
        hero.querySelectorAll<HTMLElement>(".ph-pol").forEach((p, i) => {
          gsap.to(p, {
            y: 40 + i * 20, ease: "none",
            scrollTrigger: { trigger: hero, start: "top top", end: "bottom top", scrub: true },
          });
        });
        const ring = hero.querySelector(".ph-ring");
        if (ring) {
          gsap.to(ring, {
            y: -40, rotation: 30, ease: "none",
            scrollTrigger: { trigger: hero, start: "top top", end: "bottom top", scrub: true },
          });
        }
        const content = hero.querySelector(".ph-content");
        if (content) {
          gsap.to(content, {
            y: 60, opacity: 0.7, ease: "none",
            scrollTrigger: { trigger: hero, start: "top top", end: "bottom top", scrub: true },
          });
        }
      });

      // 3. ABOUT HERO
      const aboutHero = document.querySelector<HTMLElement>(".about-hero");
      if (aboutHero) {
        const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
        tl.from(aboutHero.querySelectorAll(".crumbs, .eyebrow, h1, .lede"), { opacity: 0, y: 24, duration: 0.7, stagger: 0.1 })
          .from(aboutHero.querySelector(".stage"), { opacity: 0, y: 50, scale: 0.94, duration: 0.9, ease: "power3.out" }, "-=0.45")
          .from(aboutHero.querySelector(".stage .badge"), { opacity: 0, rotation: -22, scale: 0.7, duration: 0.5, ease: "back.out(1.8)" }, "-=0.4")
          .from(aboutHero.querySelector(".stage .floor"), { opacity: 0, y: 14, duration: 0.5 }, "-=0.3");
      }

      // 4. UMRAH HERO
      const umrahHero = document.querySelector<HTMLElement>(".umrah-hero");
      if (umrahHero) {
        const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
        tl.from(umrahHero.querySelectorAll(".crumbs, .eyebrow, h1, .lede"), { opacity: 0, y: 24, duration: 0.7, stagger: 0.1 })
          .from(umrahHero.querySelector(".note-card"), { opacity: 0, x: -20, duration: 0.6 }, "-=0.35")
          .from(umrahHero.querySelector(".visual"), { opacity: 0, scale: 0.92, y: 30, duration: 0.95 }, "-=0.65")
          .from(umrahHero.querySelector(".visual .stamp"), { opacity: 0, rotation: -22, scale: 0.7, duration: 0.55, ease: "back.out(1.8)" }, "-=0.45")
          .from(umrahHero.querySelector(".visual .floor"), { opacity: 0, y: 12, duration: 0.5 }, "-=0.3");
      }

      // 5. CONTACT HERO
      const contactHero = document.querySelector<HTMLElement>(".contact-hero");
      if (contactHero) {
        gsap.from(contactHero.querySelectorAll(".crumbs, .eyebrow, h1, .lede"), {
          opacity: 0, y: 24, duration: 0.7, stagger: 0.12, ease: "power3.out",
        });
      }

      // 6. SECTION HEADINGS (reveal on scroll)
      const headSelectors = [".section-title", ".sec-head", ".services .head", ".whyus .head"];
      headSelectors.forEach((sel) => {
        document.querySelectorAll<HTMLElement>(sel).forEach((head) => {
          const targets = head.querySelectorAll(".eyebrow, h2, .h-section, .lede, .right a");
          if (!targets.length) return;
          gsap.from(targets, {
            opacity: 0, y: 30, duration: 0.75, stagger: 0.1, ease: "power3.out",
            scrollTrigger: { trigger: head, start: "top 85%" },
          });
        });
      });

      // 7. INTRO COPY + STATS (homepage)
      const intro = document.querySelector<HTMLElement>(".intro");
      if (intro) {
        gsap.from(intro.querySelectorAll(".copy > p"), {
          opacity: 0, y: 22, duration: 0.65, stagger: 0.12, ease: "power3.out",
          scrollTrigger: { trigger: intro, start: "top 80%" },
        });
        const stats = intro.querySelector(".stats");
        if (stats) {
          gsap.from(intro.querySelectorAll(".stats .s"), {
            opacity: 0, y: 22, scale: 0.92, duration: 0.55, stagger: 0.1, ease: "back.out(1.4)",
            scrollTrigger: { trigger: stats, start: "top 88%" },
          });
        }
      }

      // 8. SERVICE CARDS
      if (document.querySelector(".svc-grid")) {
        gsap.from(".svc", {
          opacity: 0, y: 60, duration: 0.7, stagger: 0.1, ease: "power3.out",
          scrollTrigger: { trigger: ".svc-grid", start: "top 80%" },
        });
      }

      // 9. WHY-US CARDS
      if (document.querySelector(".why-grid")) {
        gsap.from(".why-card", {
          opacity: 0, y: 44, duration: 0.6, stagger: 0.08, ease: "power3.out",
          scrollTrigger: { trigger: ".why-grid", start: "top 80%" },
        });
      }

      // 10. TYPE-CARDS
      document.querySelectorAll<HTMLElement>(".type-grid").forEach((grid) => {
        gsap.from(grid.querySelectorAll(".type-card"), {
          opacity: 0, y: 44, duration: 0.55, stagger: 0.06, ease: "power3.out",
          scrollTrigger: { trigger: grid, start: "top 82%" },
        });
      });

      // 11. FEATURE LISTS
      document.querySelectorAll<HTMLElement>(".feature-list").forEach((list) => {
        gsap.from(list.querySelectorAll("li"), {
          opacity: 0, x: 24, duration: 0.55, stagger: 0.07, ease: "power3.out",
          scrollTrigger: { trigger: list, start: "top 85%" },
        });
      });

      // 12. OFFER LISTS
      document.querySelectorAll<HTMLElement>(".offer-grid").forEach((grid) => {
        gsap.from(grid.querySelectorAll(".offer"), {
          opacity: 0, y: 32, duration: 0.55, stagger: 0.06, ease: "power3.out",
          scrollTrigger: { trigger: grid, start: "top 85%" },
        });
      });

      // 13. DESTINATION TILES
      document.querySelectorAll<HTMLElement>(".dest-grid").forEach((grid) => {
        gsap.from(grid.querySelectorAll(".dest"), {
          opacity: 0, y: 50, scale: 0.94, duration: 0.65, stagger: 0.08, ease: "power3.out",
          scrollTrigger: { trigger: grid, start: "top 82%" },
        });
      });

      // 14. CHIP LISTS
      document.querySelectorAll<HTMLElement>(".chip-list").forEach((list) => {
        gsap.from(list.querySelectorAll(".chip"), {
          opacity: 0, y: 16, scale: 0.85, duration: 0.45, stagger: 0.04, ease: "back.out(1.7)",
          scrollTrigger: { trigger: list, start: "top 88%" },
        });
      });

      // 15. VALUES + VM CARDS
      document.querySelectorAll<HTMLElement>(".values-grid").forEach((grid) => {
        gsap.from(grid.querySelectorAll(".value"), {
          opacity: 0, y: 44, duration: 0.6, stagger: 0.07, ease: "power3.out",
          scrollTrigger: { trigger: grid, start: "top 82%" },
        });
      });
      document.querySelectorAll<HTMLElement>(".vm-grid").forEach((grid) => {
        gsap.from(grid.querySelectorAll(".vm"), {
          opacity: 0, y: 44, scale: 0.97, duration: 0.75, stagger: 0.12, ease: "power3.out",
          scrollTrigger: { trigger: grid, start: "top 82%" },
        });
      });

      // 16. CTA BANDS
      document.querySelectorAll<HTMLElement>(".cta-band").forEach((band) => {
        gsap.from(band, {
          opacity: 0, y: 70, scale: 0.96, duration: 0.95, ease: "power3.out",
          scrollTrigger: { trigger: band, start: "top 85%" },
        });
        gsap.from(band.querySelectorAll(".btn"), {
          opacity: 0, y: 18, duration: 0.55, stagger: 0.1, ease: "power3.out",
          scrollTrigger: { trigger: band, start: "top 80%" },
        });
      });

      // 17. CONTACT FORM + METHODS
      const form = document.querySelector<HTMLElement>(".form-card");
      if (form) {
        gsap.from(form, {
          opacity: 0, y: 50, duration: 0.9, ease: "power3.out",
          scrollTrigger: { trigger: form, start: "top 85%" },
        });
        gsap.from(form.querySelectorAll(".field, .field-row"), {
          opacity: 0, y: 16, duration: 0.45, stagger: 0.05, ease: "power3.out",
          scrollTrigger: { trigger: form, start: "top 78%" },
        });
      }
      const methods = document.querySelector<HTMLElement>(".methods");
      if (methods) {
        gsap.from(methods.querySelectorAll(".method"), {
          opacity: 0, x: 32, duration: 0.55, stagger: 0.08, ease: "power3.out",
          scrollTrigger: { trigger: methods, start: "top 85%" },
        });
      }
      const infoCard = document.querySelector<HTMLElement>(".info-card");
      if (infoCard) {
        gsap.from(infoCard, {
          opacity: 0, y: 24, duration: 0.7, ease: "power3.out",
          scrollTrigger: { trigger: infoCard, start: "top 88%" },
        });
      }

      // 17b. GALLERY
      const gallerySec = document.querySelector<HTMLElement>(".gallery-sec");
      if (gallerySec) {
        gsap.from(gallerySec.querySelectorAll(".gallery-head .eyebrow, .gallery-head h2"), {
          opacity: 0, y: 28, duration: 0.7, stagger: 0.1, ease: "power3.out",
          scrollTrigger: { trigger: gallerySec, start: "top 80%" },
        });
        gsap.from(gallerySec.querySelectorAll(".gallery-head .gal-btn"), {
          opacity: 0, scale: 0.6, duration: 0.5, stagger: 0.08, ease: "back.out(1.7)",
          scrollTrigger: { trigger: gallerySec, start: "top 80%" },
        });
        const swiper = gallerySec.querySelector(".gal-swiper");
        if (swiper) {
          gsap.from(swiper, {
            opacity: 0, y: 60, duration: 0.95, ease: "power3.out",
            scrollTrigger: { trigger: gallerySec, start: "top 75%" },
          });
        }
        const marquee = gallerySec.querySelector(".gallery-marquee");
        if (marquee) {
          gsap.from(marquee, {
            opacity: 0, y: 30, duration: 0.7, ease: "power3.out",
            scrollTrigger: { trigger: marquee, start: "top 92%" },
          });
        }
        const foot = gallerySec.querySelector(".gallery-foot");
        if (foot) {
          gsap.from(foot, {
            opacity: 0, y: 16, duration: 0.6, ease: "power3.out",
            scrollTrigger: { trigger: foot, start: "top 95%" },
          });
        }
      }

      // 18. FOOTER — animation removed: ScrollTrigger occasionally left links
      // stuck at opacity:0 when the footer didn't intersect the trigger zone
      // before init, causing "sometimes not appears" on first paint.

      // 19. MAGNETIC HOVER
      const magnetic = document.querySelectorAll<HTMLElement>(
        ".btn-primary, .btn-green, .btn-dark, .hero-strip .go, .submit, .fab-wa",
      );
      magnetic.forEach((btn) => {
        const onMove = (e: MouseEvent) => {
          const r = btn.getBoundingClientRect();
          const x = (e.clientX - r.left - r.width / 2) * 0.18;
          const y = (e.clientY - r.top - r.height / 2) * 0.22;
          gsap.to(btn, { x, y, duration: 0.25, ease: "power3.out" });
        };
        const onLeave = () => {
          gsap.to(btn, { x: 0, y: 0, duration: 0.5, ease: "elastic.out(1, 0.5)" });
        };
        btn.addEventListener("mousemove", onMove);
        btn.addEventListener("mouseleave", onLeave);
        eventCleanups.push(() => {
          btn.removeEventListener("mousemove", onMove);
          btn.removeEventListener("mouseleave", onLeave);
        });
      });

      // 20. 3D TILT
      document.querySelectorAll<HTMLElement>(".svc, .why-card, .value").forEach((card) => {
        const onMove = (e: MouseEvent) => {
          const r = card.getBoundingClientRect();
          const cx = (e.clientX - r.left) / r.width - 0.5;
          const cy = (e.clientY - r.top) / r.height - 0.5;
          gsap.to(card, {
            rotateY: cx * 5, rotateX: -cy * 5,
            transformPerspective: 900, transformOrigin: "center",
            duration: 0.4, ease: "power3.out",
          });
        };
        const onLeave = () => {
          gsap.to(card, { rotateY: 0, rotateX: 0, duration: 0.6, ease: "power3.out" });
        };
        card.addEventListener("mousemove", onMove);
        card.addEventListener("mouseleave", onLeave);
        eventCleanups.push(() => {
          card.removeEventListener("mousemove", onMove);
          card.removeEventListener("mouseleave", onLeave);
        });
      });

      // 21. SCROLL PROGRESS BAR
      progressEl = document.createElement("div");
      progressEl.className = "scroll-progress";
      document.body.appendChild(progressEl);
      gsap.to(progressEl, {
        scaleX: 1, ease: "none", transformOrigin: "right center",
        scrollTrigger: { start: 0, end: "max", scrub: 0.2 },
      });

      // 22. TEAM-BUILDING PAGE — GSAP-driven reveal (replaces CSS observer)
      const tbMain = document.querySelector<HTMLElement>('main[data-page="team-building"]');
      if (tbMain) {
        // Hero intro — fires immediately, no scroll wait.
        const heroTl = gsap.timeline({ defaults: { ease: "power3.out" }, delay: 0.1 });
        heroTl
          .from(tbMain.querySelectorAll(".ph-eyebrow"),       { opacity: 0, y: 20, duration: 0.6 })
          .from(tbMain.querySelectorAll(".ph-title .line"),   { opacity: 0, y: 36, duration: 0.85, stagger: 0.12 }, "-=0.35")
          .from(tbMain.querySelectorAll(".ph-lede"),          { opacity: 0, y: 22, duration: 0.7 }, "-=0.55")
          .from(tbMain.querySelectorAll(".ph-stat"),          { opacity: 0, y: 16, duration: 0.55, stagger: 0.08 }, "-=0.4")
          .from(tbMain.querySelectorAll(".ph-cta .btn"),      { opacity: 0, y: 14, scale: 0.96, duration: 0.5, stagger: 0.08 }, "-=0.3")
          .from(tbMain.querySelectorAll(".ph-stage"),         { opacity: 0, y: 40, scale: 0.94, duration: 0.95, ease: "power4.out" }, "-=0.85");

        // Each non-hero section fades up with stagger on inner cards.
        const sections = tbMain.querySelectorAll<HTMLElement>(":scope > section:not(.page-hero)");
        sections.forEach((section) => {
          // Section block lifts.
          gsap.from(section, {
            opacity: 0, y: 60, duration: 0.9, ease: "power3.out",
            scrollTrigger: {
              trigger: section,
              start: "top 85%",
              toggleActions: "play none none none",
              once: true,
            },
          });

          // Section heading / intro children.
          const heading = section.querySelectorAll(":scope > .wrap > .section-title, :scope > .wrap > .head, :scope > .wrap > .split-intro > :first-child");
          if (heading.length) {
            gsap.from(heading, {
              opacity: 0, y: 24, duration: 0.7, ease: "power3.out",
              scrollTrigger: { trigger: section, start: "top 80%", once: true },
            });
          }

          // Cards / repeating items — stagger.
          const cards = section.querySelectorAll<HTMLElement>(
            ".why-card, .svc, .type-card, .offer, .chip, .feature-list li, .value, .vm, .method, .program-types .pt, .destinations-grid .dest"
          );
          if (cards.length) {
            gsap.from(cards, {
              opacity: 0, y: 28, scale: 0.97, duration: 0.55, ease: "power3.out",
              stagger: 0.07,
              scrollTrigger: { trigger: section, start: "top 78%", once: true },
            });
          }
        });
      }

      // Refresh once everything is registered so positions are correct.
      ScrollTrigger.refresh();
    })();

    return () => {
      cancelled = true;
      eventCleanups.forEach((fn) => fn());
      // Kill any ScrollTriggers created during this effect.
      import("gsap/ScrollTrigger").then((m) => {
        const ST = m.ScrollTrigger || m.default;
        ST.getAll().forEach((t: { kill: () => void }) => t.kill());
      });
      progressEl?.remove();
    };
  }, [pathname]);

  return null;
}