// intialization plugins
$(document).ready(function () {

    //animation icon toggler of navbar
    $(`.navbar-toggler`).click(function() {
        $(`.navbar-toggler`).toggleClass(`active`);
    });

    //Wow intit
    wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 200,
        mobile: true,
        live: false
    });
    wow.init();

    //fancybox
    $("[data-fancybox]").fancybox({
        selector: '[data-fancybox="images"]',
        // loop: true
    });

    //  loader 
    // $(window).on("load", function() {
    //     $("#preloader").addClass("isdone");
    // });

});

// Swiper
$(document).ready(function () {

    //////////////////// partners_swiper  ////////////////////
    var swiper = new Swiper('.partners_sec .partners_swiper', {
        // loop: true,
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        // autoplay: {
        //     delay: 2500,
        // },
        navigation: {
            nextEl: '.partners_sec .swiper-button-next',
            prevEl: '.partners_sec .swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        breakpoints: {
            640: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 20,
            },
            1024: {
                slidesPerView: 5,
                spaceBetween: 20,
            },
        }
    });


    //////////////////// Swiper  ////////////////////
    // var swiper = new Swiper(' .swiper-container', {
    //     // loop: true,
    //     speed: 900,
    //     slidesPerView: 1,
    //     spaceBetween: 15,
    //     // autoplay: {
    //     //     delay: 2500,
    //     // },
    //     //In Tabs
    //     // observer: true,
    //     // observeParents: true,
    //     navigation: {
    //         nextEl: '.swiper-button-next',
    //         prevEl: '.swiper-button-prev',
    //     },
    //     pagination: {
    //         el: '.swiper-pagination',
    //         clickable: true
    //     },
    //     breakpoints: {
    //         640: {
    //             slidesPerView: 2,
    //             spaceBetween: 20,
    //         },
    //         768: {
    //             slidesPerView: 3,
    //             spaceBetween: 20,
    //         },
    //         1024: {
    //             slidesPerView: 5,
    //             spaceBetween: 20,
    //             // Prevent swiper in lg screens
    //             // allowTouchMove: false,
    //             // preventClicks: false
    //         },
    //     }
    // });

});

// Sticky Navbar with GSAP ScrollTrigger
(function () {
  document.addEventListener("DOMContentLoaded", function () {
    const navbar = document.querySelector(".navs-container .navbar");

    if (!navbar) return;

    let isFixed = false;

    // Use GSAP ScrollTrigger instead of scroll event
    ScrollTrigger.create({
      start: 50,
      end: "max",
      onUpdate: (self) => {
        if (self.scroll() > 50 && !isFixed) {
          navbar.classList.add("fixed_nav");
          isFixed = true;
        } else if (self.scroll() <= 50 && isFixed) {
          navbar.classList.remove("fixed_nav");
          isFixed = false;
        }
      }
    });
  });
})();

// ================= GSAP INIT =================
document.addEventListener("DOMContentLoaded", () => {

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

  // Global defaults
  gsap.defaults({
    duration: 1,
    ease: "power3.out"
  });

  // Smooth scroll
  ScrollSmoother.create({
    wrapper: "#smooth-wrapper",
    content: "#smooth-content",
    smooth: 1.2,
    effects: true
  });

  initAnimations();

});


// ================= GSAP SYSTEM =================
function initAnimations() {

  // 🔹 fade up
  gsap.utils.toArray(".gsap-fade-up").forEach(el => {
    gsap.from(el, {
      y: 80,
      opacity: 0,
      duration: 1,
      delay: el.dataset.delay || 0,
      ease: "power4.out",
      scrollTrigger: {
        trigger: el,
        start: "top 85%",
        toggleActions: "play none none none"
      }
    });
  });


  // 🔹 slide from left (with depth)
  gsap.utils.toArray(".gsap-left").forEach(el => {
    gsap.from(el, {
      x: -150,
      opacity: 0,
      rotate: -3,
      duration: 1.2,
      ease: "power4.out",
      scrollTrigger: {
        trigger: el,
        start: "top 85%",
        toggleActions: "play none none none"
      }
    });
  });


  // 🔹 slide from right
  gsap.utils.toArray(".gsap-right").forEach(el => {
    gsap.from(el, {
      x: 150,
      opacity: 0,
      rotate: 3,
      duration: 1.2,
      ease: "power4.out",
      scrollTrigger: {
        trigger: el,
        start: "top 85%",
        toggleActions: "play none none none"
      }
    });
  });


  // 🔹 scale + rotate (premium feel)
  gsap.utils.toArray(".gsap-scale-rotate").forEach(el => {
    gsap.from(el, {
      scale: 0.8,
      rotate: -5,
      opacity: 0,
      duration: 1.2,
      ease: "back.out(1.7)",
      scrollTrigger: {
        trigger: el,
        start: "top 85%",
        toggleActions: "play none none none"
      }
    });
  });


  // 🔹 blur reveal 
  gsap.utils.toArray(".gsap-blur").forEach(el => {
    gsap.from(el, {
      opacity: 0,
      filter: "blur(10px)",
      y: 50,
      duration: 1,
      ease: "power3.out",
      scrollTrigger: {
        trigger: el,
        start: "top 85%",
        toggleActions: "play none none none"
      }
    });
  });


  // 🔹 stagger group 
  gsap.utils.toArray(".gsap-stagger").forEach(parent => {

    const items = parent.children;

    gsap.from(items, {
      y: 60,
      opacity: 0,
      stagger: 0.15,
      duration: 1,
      ease: "power3.out",
      scrollTrigger: {
        trigger: parent,
        start: "top 85%",
        toggleActions: "play none none none"
      }
    });

  });


    // ================= STATICS CREATIVE =================
    gsap.utils.toArray(".gsap-zoomIn-creative").forEach(parent => {

        const cards = parent.querySelectorAll(".item");

        gsap.from(cards, {
            opacity: 0,
            scale: 0.85,
            rotateX: 40,
            y: 60,
            filter: "blur(8px)",
            transformOrigin: "top center",
            stagger: 0.12,
            duration: 1.2,
            ease: "power4.out",

            scrollTrigger: {
            trigger: parent,
            start: "top 75%",
            toggleActions: "play none none none"
            }
        });

    });

    // counter animation
    gsap.utils.toArray(".counter").forEach(el => {

    const finalValue = +el.textContent;

    let obj = { val: 0 };

    gsap.fromTo(obj,
        { val: 0 },
        {
        val: finalValue,
        duration: 1.5,
        ease: "power1.out",

        onUpdate: () => {
            el.textContent = Math.floor(obj.val);
        },

        scrollTrigger: {
            trigger: el,
            start: "top 85%",
            toggleActions: "play none none none",
            once: true
        }
        }
    );

    });

    //gsap-reveal
    gsap.utils.toArray(".gsap-reveal").forEach(el => {

        gsap.fromTo(el,
            {
            y: 100,
            opacity: 0,
            clipPath: "inset(0 0 100% 0)"
            },
            {
            y: 0,
            opacity: 1,
            clipPath: "inset(0 0 0% 0)",
            duration: 1.2,
            delay: el.dataset.delay || 0,
            ease: "power4.out",

            scrollTrigger: {
                trigger: el,
                start: "top 85%",
                toggleActions: "play none none none"
            }
            }
        );

    });

    //gsap-parallax-img
    gsap.utils.toArray(".gsap-parallax-img").forEach(el => {

        gsap.fromTo(el,
            {
            scale: 1.2,
            y: 80
            },
            {
            scale: 1,
            y: -40,
            ease: "none",

            scrollTrigger: {
                trigger: el,
                start: "top bottom",
                end: "bottom top",
                scrub: 1.5
            }
            }
        );

    });

    //gsap-geo-card 
    gsap.utils.toArray(".gsap-geo-card").forEach(card => {

    const maxTilt = 10;

    card.addEventListener("mousemove", (e) => {

        const rect = card.getBoundingClientRect();

        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        const centerX = rect.width / 2;
        const centerY = rect.height / 2;

        const rotateY = ((x - centerX) / centerX) * maxTilt;
        const rotateX = ((centerY - y) / centerY) * maxTilt;

        gsap.to(card, {
        rotateX: rotateX,
        rotateY: rotateY,
        scale: 1.05,
        duration: 0.3,
        ease: "power2.out",
        transformPerspective: 800,
        transformOrigin: "center"
        });

    });

    card.addEventListener("mouseleave", () => {

        gsap.to(card, {
        rotateX: 0,
        rotateY: 0,
        scale: 1,
        duration: 0.5,
        ease: "power3.out"
        });

    });

    });
    gsap.utils.toArray(".geo_sec .icon").forEach(el => {

        gsap.to(el, {
            y: -10,
            duration: 2,
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        });

    });


    // ================= HOVER-ZOOM-CONTENT =================
    gsap.utils.toArray(".hover-zoom-content").forEach((card, i) => {

    const img = card.querySelector(".bg");
    const content = card.querySelector(".txt_box");

    // ===== Scroll (enter + leave) =====
    gsap.fromTo(card,
        {
        opacity: 0,
        y: 100,
        scale: 0.92,
        rotate: 1.5,
        filter: "blur(6px)"
        },
        {
        opacity: 1,
        y: 0,
        scale: 1,
        rotate: 0,
        filter: "blur(0px)",
        duration: 1.2,
        delay: i * 0.1,
        ease: "power4.out",
        scrollTrigger: {
            trigger: card,
            start: "top 85%",
            toggleActions: "play none none none"
        }
        }
    );

    // content reveal
    gsap.fromTo(content,
        {
        y: 60,
        opacity: 0
        },
        {
        y: 0,
        opacity: 1,
        duration: 1,
        delay: 0.2,
        ease: "power3.out",
        scrollTrigger: {
            trigger: card,
            start: "top 85%",
            toggleActions: "play none none none"
        }
        }
    );

    // ===== Hover =====
    card.addEventListener("mouseenter", () => {

        gsap.to(img, {
        scale: 1.12,
        duration: 0.6,
        ease: "power2.out"
        });

        gsap.to(content, {
        y: -12,
        duration: 0.4,
        ease: "power2.out"
        });

    });

    card.addEventListener("mouseleave", () => {

        gsap.to(img, {
        scale: 1,
        duration: 0.6,
        ease: "power3.out"
        });

        gsap.to(content, {
        y: 0,
        duration: 0.4,
        ease: "power3.out"
        });

    });

    });


// ================= MOTION-SOFT-TILT =================
gsap.utils.toArray(".motion-soft-tilt").forEach((card, i) => {

  const img = card.querySelector("img");

  // ===== Scroll (soft reveal) =====
  gsap.fromTo(card,
    {
      opacity: 0,
      scale: 0.95,
      y: 30,
      filter: "blur(4px)"
    },
    {
      opacity: 1,
      scale: 1,
      y: 0,
      filter: "blur(0px)",
      duration: 0.8,
      delay: i * 0.05,
      ease: "power2.out",
      scrollTrigger: {
        trigger: card,
        start: "top 90%",
        toggleActions: "play none none none"
      }
    }
  );

  // ===== Hover (very subtle tilt) =====
  card.addEventListener("mousemove", (e) => {

    const rect = card.getBoundingClientRect();

    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const rotateY = ((x - centerX) / centerX) * 4; // قليل
    const rotateX = ((centerY - y) / centerY) * 4;

    gsap.to(card, {
      rotateX: rotateX,
      rotateY: rotateY,
      scale: 1.03,
      duration: 0.3,
      ease: "power2.out",
      transformPerspective: 800
    });

  });

  card.addEventListener("mouseleave", () => {

    gsap.to(card, {
      rotateX: 0,
      rotateY: 0,
      scale: 1,
      duration: 0.4,
      ease: "power3.out"
    });

  });

});

}

