/* =====================================================
   GLOBAL INIT (DOM READY)
===================================================== */

$(document).ready(function () {

    /* Navbar toggler animation */
    $(".navbar-toggler").on("click", function () {
        $(this).toggleClass("active");
    });

    /* WOW init */
    const wow = new WOW({
        boxClass: "wow",
        animateClass: "animated",
        offset: 200,
        mobile: true,
        live: false
    });
    wow.init();

    /* Fancybox */
    $("[data-fancybox]").fancybox({
        selector: '[data-fancybox="images"]'
    });

});


/* =====================================================
   SWIPER INIT
===================================================== */

let categSwiper, partnerSwiper;

$(document).ready(function () {

  /* Categories swiper */
  categSwiper = new Swiper(".categ_sec .categ_swiper", {
    speed: 3000,
    slidesPerView: 2,
    spaceBetween: 15,
    centeredSlides: true,
    loop: true,
    freeMode: true,
    grabCursor: true,
    autoplay: {
      delay: 0,
      disableOnInteraction: false
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true
    },
    breakpoints: {
      640: { slidesPerView: 2 },
      768: { slidesPerView: 3 },
      1024: { slidesPerView: 5 }
    },

  });

  /* Partners swiper */
  partnerSwiper = new Swiper(".partners_sec .partner_swiper", {
    loop: true,
    speed: 3000,
    slidesPerView: 2,
    spaceBetween: 15,
    freeMode: true,
    grabCursor: true,
    autoplay: {
      delay: 0,
      disableOnInteraction: false
    },
    breakpoints: {
      640: { slidesPerView: 2 },
      768: { slidesPerView: 3 },
      1024: { slidesPerView: 6 }
    },

  });

});



/* =====================================================
   GSAP INIT (WINDOW LOAD)
===================================================== */

window.addEventListener("load", () => {

  // Register plugins
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText);

  // Create smoother
  const smoother = ScrollSmoother.create({
    wrapper: "#smooth-wrapper",
    content: "#smooth-content",
    smooth: 1.2,
    effects: true,
    normalizeScroll: true
  });

  /* =====================================================
      NAVBAR FIXED
  ===================================================== */
  const navbar = document.querySelector(".navbar");

  ScrollTrigger.create({
    trigger: document.body,
    start: "top top",
    end: "bottom bottom",
    onUpdate: (self) => {
      if (self.scroll() > 80) {
        navbar.classList.add("is-fixed");
      } else {
        navbar.classList.remove("is-fixed");
      }
    }
  });

  // Global ScrollTrigger defaults
  ScrollTrigger.defaults({
    start: "top 80%",
    toggleActions: "play none none none",
    once: false
  });

  // Performance
  gsap.config({
    force3D: true
  });



  /* =====================================================
      ANIMATION SYSTEM INIT
  ===================================================== */

  const initAnimations = () => {

    /* =============================
        FADE UP
    ============================= */
    gsap.utils.toArray(".anim-fade-up").forEach((el) => {
      gsap.from(el, {
        y: 60,
        opacity: 0,
        duration: 0.8,
        ease: "power3.out",
        scrollTrigger: { trigger: el }
      });
    });

    /* =============================
        SCALE IN
    ============================= */
    gsap.utils.toArray(".anim-scale-in").forEach((el) => {
      gsap.from(el, {
        scale: 0.9,
        opacity: 0,
        duration: 0.8,
        ease: "power3.out",
        scrollTrigger: { trigger: el }
      });
    });

    /* =============================
        CLEAN STAGGER
    ============================= */
    gsap.utils.toArray(".anim-stagger").forEach((el) => {
      gsap.from(el.children, {
        y: 30,
        opacity: 0,
        duration: 0.6,
        ease: "power2.out",
        stagger: 0.1,
        clearProps: "all",
        scrollTrigger: { trigger: el }
      });
    });

    /* =============================
        FLOAT
    ============================= */
    gsap.utils.toArray(".anim-float").forEach((el) => {
      gsap.to(el, {
        y: 25,
        repeat: -1,
        yoyo: true,
        duration: 3,
        ease: "sine.inOut"
      });
    });

    /* =============================
        FLOAT ROTATE
    ============================= */
    gsap.utils.toArray(".anim-float2").forEach((el) => {
      gsap.to(el, {
        y: 25,
        rotate: 3,
        repeat: -1,
        yoyo: true,
        duration: 3,
        ease: "sine.inOut"
      });
    });

    /* =============================
        REVEAL (Arabic Safe)
    ============================= */
    gsap.utils.toArray(".anim-reveal").forEach((el) => {
      const inner = document.createElement("span");
      inner.innerHTML = el.innerHTML;
      el.innerHTML = "";
      el.appendChild(inner);

      gsap.set(el, { overflow: "hidden" });

      gsap.from(inner, {
        y: "120%",
        opacity: 0,
        filter: "blur(6px)",
        duration: 1.2,
        ease: "power4.out",
        scrollTrigger: { trigger: el }
      });
    });

    /* =============================
        SLIDE LEFT
    ============================= */
    gsap.utils.toArray(".anim-slide-left").forEach((el) => {
      gsap.from(el, {
        x: -80,
        opacity: 0,
        duration: 0.8,
        ease: "power3.out",
        scrollTrigger: { trigger: el }
      });
    });

    /* =============================
        SLIDE RIGHT
    ============================= */
    gsap.utils.toArray(".anim-slide-right").forEach((el) => {
      gsap.from(el, {
        x: 80,
        opacity: 0,
        duration: 0.8,
        ease: "power3.out",
        scrollTrigger: { trigger: el }
      });
    });

    /* =============================
        FOCUS IN (Image)
    ============================= */
    gsap.utils.toArray(".anim-focus-in").forEach((el) => {
      gsap.from(el, {
        scale: 0.9,
        rotate: 2,
        opacity: 0,
        duration: 1,
        ease: "power3.out",
        scrollTrigger: { trigger: el }
      });
    });

    /* =============================
        ICON POP
    ============================= */
    gsap.utils.toArray(".anim-pop").forEach((el) => {
      gsap.from(el, {
        scale: 0,
        opacity: 0,
        duration: 0.5,
        ease: "back.out(2)",
        scrollTrigger: { trigger: el }
      });
    });

    /* =============================
        PARALLAX SLOW
    ============================= */
    gsap.utils.toArray(".anim-parallax-slow").forEach((el) => {
        gsap.to(el, {
            y: 80,
            ease: "none",
            scrollTrigger: {
            trigger: el,
            scrub: true
            }
        });
    });

    /* =============================
        CARD WAVE
    ============================= */
    gsap.utils.toArray(".anim-card-wave").forEach((el, i) => {

    gsap.from(el, {
        y: 60,
        rotate: -3,
        opacity: 0,
        duration: 0.7,
        ease: "power3.out",
        delay: i * 0.05,
        scrollTrigger: {
        trigger: el,
        }
    });

    });

    /* =============================
        IMAGE REVEAL
    ============================= */
    gsap.utils.toArray(".anim-image-reveal").forEach((el) => {

    const wrapper = document.createElement("div");
    wrapper.style.overflow = "hidden";
    wrapper.style.display = "inline-block";

    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);

    gsap.from(el, {
        scale: 1.2,
        y: 80,
        opacity: 0,
        duration: 1.2,
        ease: "power4.out",
        scrollTrigger: {
        trigger: el,
        }
    });

    });

    /* =============================
        DRIFT
    ============================= */
    gsap.utils.toArray(".anim-drift").forEach((el) => {
    gsap.to(el, {
        y: 100,
        rotate: 5,
        duration: 6,
        repeat: -1,
        yoyo: true,
        ease: "sine.inOut"
    });
    });


  };

  initAnimations();

  /* =====================================================
      MOUSE PARALLAX
  ===================================================== */
  const vectors = document.querySelector(".anim-mouseMovement");

  if (vectors) {
    window.addEventListener("mousemove", (e) => {
      const x = (e.clientX / window.innerWidth - 0.5) * 40;
      const y = (e.clientY / window.innerHeight - 0.5) * 40;

      gsap.to(vectors, {
        x,
        y,
        duration: 0.5,
        ease: "power2.out",
        overwrite: "auto"
      });
    });
  }

  /* =====================================================
    NAV SCROLL (GSAP)
    ===================================================== */

    document.querySelectorAll(".nav-link").forEach((link) => {

    link.addEventListener("click", (e) => {
        e.preventDefault();

        const target = document.querySelector(link.getAttribute("href"));

        if (target) {
        gsap.to(window, {
            scrollTo: {
                y: target,
                offsetY: 70,
                autoKill: true
            },
            duration: 0.8,
            ease: "power2.out"
        });
        }

    });

    });

    /* =====================================================
    NAV ACTIVE (FIXED 🔥)
    ===================================================== */

    const sections = gsap.utils.toArray("section, header");

    ScrollTrigger.create({
    trigger: "#smooth-content",
    start: "top top",
    end: "bottom bottom",

    onUpdate: (self) => {

        let current = sections[0].id;

        sections.forEach((section) => {
        const rect = section.getBoundingClientRect();

        if (rect.top <= window.innerHeight * 0.3) {
            current = section.id;
        }
        });

        setActive(current);

    }
    });

    function setActive(id) {
        document.querySelectorAll(".nav-link").forEach((link) => {
            link.classList.remove("active");

            if (link.getAttribute("href") === `#${id}`) {
            link.classList.add("active");
            }
        });
    }

    document.querySelectorAll(".nav-link, .butn").forEach((link) => {

        link.addEventListener("click", (e) => {
            e.preventDefault();

            const target = document.querySelector(link.getAttribute("href"));

            if (target) {

            const maxScroll = ScrollTrigger.maxScroll(window);

            let y = target.getBoundingClientRect().top + window.scrollY - 70;

            if (y > maxScroll) y = maxScroll;

            gsap.to(window, {
                scrollTo: y,
                duration: 0.8,
                ease: "power2.out"
            });

            }

        });

    });
    
  ScrollTrigger.refresh();

});