// ==========================
//  Navbar toggler
// ==========================
const toggler = document.querySelector(".navbar-toggler");
if (toggler) {
    toggler.addEventListener("click", () => {
        toggler.classList.toggle("active");
    });
}

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

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

    const heroSwiper = new Swiper('.header .heroSwiper', {
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        effect: 'fade',
        navigation: {
            nextEl: '.header .swiper-button-next',
            prevEl: '.header .swiper-button-prev',
        },
        pagination: {
            el: '.header .swiper-pagination',
            clickable: true
        },
        autoplay: {
            delay: 5000,
        },

    });

    const menuSwiper = new Swiper('.menu_sec .menuSwipe', {
        // loop: true,
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        // centeredSlides: true,
        navigation: {
            nextEl: '.menu_sec .swiper-button-next',
            prevEl: '.menu_sec .swiper-button-prev',
        },
        pagination: {
            el: '.menu_sec .swiper-pagination',
            clickable: true
        },
        breakpoints: {
            640: { slidesPerView: 2 },
            768: { slidesPerView: 3 },
            1024: { slidesPerView: 5 }
        },
        autoplay: {
            delay: 5000,
        },

    });

    const servSwiper = new Swiper('.services_sec .serv_swiper', {
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        navigation: {
            nextEl: '.services_sec .swiper-button-next',
            prevEl: '.services_sec .swiper-button-prev',
        },
        pagination: {
            el: '.services_sec .swiper-pagination',
            clickable: true
        },
        breakpoints: {
            640: { slidesPerView: 2 },
            768: { slidesPerView: 3 },
            1024: { slidesPerView: 4 }
        },
        autoplay: {
            delay: 5000,
        },

    });

    const testimonialsSwiper = new Swiper('.testimonials_sec .testimonials_swiper', {
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        navigation: {
            nextEl: '.testimonials_sec .swiper-button-next',
            prevEl: '.testimonials_sec .swiper-button-prev',
        },
        pagination: {
            el: '.testimonials_sec .swiper-pagination',
            clickable: true
        },
        breakpoints: {
            640: { slidesPerView: 2 },
            1024: { slidesPerView: 3 }
        },
        autoplay: {
            delay: 5000,
        },

    });


    const instaSwiper = new Swiper('.instagram-slider', {
        slidesPerView: "auto",
        spaceBetween: 0,
        centeredSlides: true,
        pagination: false,
        navigation: false,
        mousewheel: false,
        keyboard: true,
        speed: 30000,
        allowTouchMove: false,
        a11y: false,
        autoplay: {
            delay: 1,
        },
        loop: true,
        breakpoints: {
            0: {
                slidesPerView: 2,
            },
            480: {
                slidesPerView: 2,
            },
            787: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 4,
            },
            1200: {
                slidesPerView: 6,
            }
        }
    });

});

// ==========================
// GSAP – gallery_sec
// ==========================
document.querySelectorAll('.galleryImg').forEach((card, index) => {
    const img = card.querySelector('img');
    
    gsap.set(card, { transformOrigin: "center center" });
    
    const originalTransforms = [
        { rotation: -12.77, y: -50 },  // nth-child(1)
        { rotation: 10.4, y: 0 },      // nth-child(2)
        { rotation: -8.7, y: -40 },    // nth-child(3)
        { rotation: 0, y: 0 }          // nth-child(4)
    ];
    
    const original = originalTransforms[index];
    let hasInteracted = false;
    
    card.addEventListener('mouseenter', (e) => {
        if (!hasInteracted) {
            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 pushX = ((centerX - x) / 3) * 1.5;
            const pushY = ((centerY - y) / 3) * 1.5;
            
            const additionalRotate = ((x - centerX) / 30) * 1.5;
            
            // ✅ توليد rotation عشوائي بين -15 و 15 درجة
            const randomRotation = (Math.random() - 0.5) * 30; // من -15 إلى +15
            
            gsap.to(card, {
                duration: 0.2,
                x: pushX,
                y: original.y + pushY,
                rotation: original.rotation + additionalRotate + randomRotation, // ✅ إضافة الدوران العشوائي
                ease: "ease",
                onComplete: () => {
                    gsap.to(card, {
                        duration: 0.2,
                        x: 0,
                        y: original.y,
                        rotation: original.rotation, // ✅ الرجوع للدوران الأصلي
                        ease: "ease"
                    });
                }
            });
            
            gsap.to(img, {
                duration: 0.3,
                scale: 1.05,
                z: 20,
                ease: "ease",
                onComplete: () => {
                    gsap.to(img, {
                        duration: 0.2,
                        scale: 1,
                        z: 0,
                        ease: "ease"
                    });
                }
            });
            
            hasInteracted = true;
        }
    });
    
    card.addEventListener('mouseleave', () => {
        hasInteracted = false;
    });
});




// ==========================
// About Section Reveal Animation (FINAL FIXED)
// ==========================
gsap.registerPlugin(ScrollTrigger);

const aboutTl = gsap.timeline({
    scrollTrigger: {
        trigger: ".about_sec",
        start: "top 80%",
        toggleActions: "play none none none"
    }
});

// ---- SVG LOGO REVEAL ----
aboutTl
    .from(".about_sec .logo-curved-text", {
        opacity: 0,
        y: 16,
        duration: 0.6,
        ease: "power3.out"
    })

    .from(".about_sec .logo-since-text", {
        opacity: 0,
        y: 8,
        duration: 0.45,
        ease: "power3.out"
    }, "-=0.25")

    .from(".about_sec .logo-ribbon-shape", {
        scaleX: 0,
        transformOrigin: "center center",
        duration: 0.55,
        ease: "power3.out"
    }, "-=0.25")

    .from(".about_sec .logo-ribbon-text", {
        opacity: 0,
        y: 4,
        duration: 0.35,
        ease: "power2.out"
    }, "-=0.2");

// ---- TEXT CONTENT ----
aboutTl
    .from(".about_sec .badge", {
        opacity: 0,
        y: 14,
        duration: 0.4,
        ease: "power2.out"
    }, "-=0.15")

    .from(".about_sec .title", {
        opacity: 0,
        y: 22,
        duration: 0.55,
        ease: "power3.out"
    })

    .from(".about_sec .p", {
        opacity: 0,
        y: 22,
        duration: 0.65,
        ease: "power3.out"
    });

// ---- BUTTON (FIXED) ----
aboutTl.fromTo(
    ".about_sec .butn",
    {
        autoAlpha: 0,
        y: 12,
        scale: 0.95
    },
    {
        autoAlpha: 1,
        y: 0,
        scale: 1,
        duration: 0.45,
        ease: "back.out(1.4)",
        clearProps: "all"
    },
    "-=0.7"
);

// ---- DECOR VECTORS (PARALLAX FEEL) ----
gsap.from(".about_sec .vector1", {
    scrollTrigger: {
        trigger: ".about_sec",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
    },
    y: -40
});

gsap.from(".about_sec .vector2", {
    scrollTrigger: {
        trigger: ".about_sec",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
    },
    y: 60
});



// ==========================
// Menu Section – SAFE Reveal Animation
// ==========================
gsap.registerPlugin(ScrollTrigger);

/* ==========================
   INITIAL STATE (HIDDEN)
   ========================== */
gsap.set(".menu_sec .sec_head .icon", {
    autoAlpha: 0,
    scale: 0.8
});

gsap.set(".menu_sec .sec_head .title, .menu_sec .sec_head .p", {
    autoAlpha: 0,
    y: 20
});

gsap.set(".menu_sec .swiper-slide .item", {
    autoAlpha: 0,
    scale: 0.85,
    y: 60,
    rotation: gsap.utils.random(-8, 8)
});

/* ==========================
   SECTION TIMELINE
   ========================== */
const menuTl = gsap.timeline({
    scrollTrigger: {
        trigger: ".menu_sec",
        start: "top 70%",   // يظهر وانتِ داخلة السيكشن
        once: true          // مرة واحدة بس
    }
});

/* ==========================
   HEADER REVEAL
   ========================== */
menuTl
    .to(".menu_sec .sec_head .icon", {
        autoAlpha: 1,
        scale: 1,
        duration: 0.3,
        ease: "power2.out"
    })
    .to(".menu_sec .sec_head .title", {
        autoAlpha: 1,
        y: 0,
        duration: 0.35,
        ease: "power3.out"
    }, "-=0.15")
    .to(".menu_sec .sec_head .p", {
        autoAlpha: 1,
        y: 0,
        duration: 0.3,
        ease: "power2.out"
    }, "-=0.2");

/* ==========================
   ITEMS REVEAL (SWIPER SAFE)
   ========================== */
menuTl.to(".menu_sec .swiper-slide .item", {
    autoAlpha: 1,
    scale: 1,
    y: 0,
    rotation: 0,
    duration: 0.6,
    ease: "power3.out",
    stagger: {
        each: 0.06,
        from: "center"
    },
    clearProps: "transform"
}, "-=0.1");

// ==========================
// Services Section Premium Reveal
// ==========================
gsap.registerPlugin(ScrollTrigger);

/* --------- Section Head --------- */
const servicesHeadTl = gsap.timeline({
    scrollTrigger: {
        trigger: ".services_sec",
        start: "top 75%",
        toggleActions: "play none none none"
    }
});

servicesHeadTl
    .from(".services_sec .sec_head .icon", {
        autoAlpha: 0,
        scale: 0.85,
        duration: 0.35,
        ease: "power2.out"
    })
    .from(".services_sec .sec_head .title", {
        autoAlpha: 0,
        y: 20,
        duration: 0.4,
        ease: "power3.out"
    }, "-=0.15")
    .from(".services_sec .sec_head .p", {
        autoAlpha: 0,
        y: 14,
        duration: 0.35,
        ease: "power2.out"
    }, "-=0.15");

/* --------- Cards Reveal --------- */
gsap.from(".services_sec .swiper-slide .item", {
    scrollTrigger: {
        trigger: ".services_sec .serv_swiper",
        start: "top 70%",
    },
    y: 60,
    scale: 0.92,
    autoAlpha: 0,
    duration: 0.7,
    ease: "power3.out",
    stagger: {
        each: 0.08
    }
});

/* --------- Image subtle zoom --------- */
gsap.from(".services_sec .item .secImg", {
    scrollTrigger: {
        trigger: ".services_sec .serv_swiper",
        start: "top 70%",
    },
    scale: 1.1,
    duration: 1.2,
    ease: "power2.out",
    stagger: 0.08
});

/* --------- Decorative vectors (parallax) --------- */
gsap.from(".services_sec .vector1", {
    scrollTrigger: {
        trigger: ".services_sec",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
    },
    y: -60
});

gsap.from(".services_sec .vector2", {
    scrollTrigger: {
        trigger: ".services_sec",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
    },
    y: 40
});

gsap.from(".services_sec .vector3", {
    scrollTrigger: {
        trigger: ".services_sec",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
    },
    y: 70
});

// ==========================
// Cards Section – Premium Reveal
// ==========================
gsap.registerPlugin(ScrollTrigger);

/* --------- Section Head --------- */
const cardsHeadTl = gsap.timeline({
    scrollTrigger: {
        trigger: ".cards_sec",
        start: "top 75%",
        toggleActions: "play none none none"
    }
});

cardsHeadTl
    .from(".cards_sec .sec_head .icon", {
        autoAlpha: 0,
        scale: 0.85,
        duration: 0.35,
        ease: "power2.out"
    })
    .from(".cards_sec .sec_head .title", {
        autoAlpha: 0,
        y: 24,
        duration: 0.45,
        ease: "power3.out"
    }, "-=0.15")
    .from(".cards_sec .sec_head .p", {
        autoAlpha: 0,
        y: 16,
        duration: 0.35,
        ease: "power2.out"
    }, "-=0.2");


/* --------- Cards Reveal (Depth Effect) --------- */
gsap.from(".cards_sec .item", {
    scrollTrigger: {
        trigger: ".cards_sec .row",
        start: "top 70%"
    },
    autoAlpha: 0,
    y: 70,
    rotationX: 8,
    scale: 0.95,
    duration: 0.8,
    ease: "power3.out",
    stagger: 0.12
});


/* --------- Inner Image Soft Zoom --------- */
gsap.from(".cards_sec .flip-card-front .secImg", {
    scrollTrigger: {
        trigger: ".cards_sec .row",
        start: "top 70%"
    },
    scale: 1.12,
    duration: 1.2,
    ease: "power2.out",
    stagger: 0.12
});


/* --------- Floating vector inside card --------- */
gsap.fromTo(
    ".cards_sec .flip-card-front .vector",
    { y: -6 },
    {
        y: 6,
        duration: 3,
        ease: "sine.inOut",
        repeat: -1,
        yoyo: true
    }
);


/* --------- Decorative borders subtle reveal --------- */
gsap.from(".cards_sec .borders", {
    scrollTrigger: {
        trigger: ".cards_sec .row",
        start: "top 70%"
    },
    autoAlpha: 0,
    scale: 0.9,
    duration: 0.6,
    stagger: 0.12,
    ease: "power2.out"
});


/* --------- Background Vectors Parallax --------- */
gsap.from(".cards_sec .vector1", {
    scrollTrigger: {
        trigger: ".cards_sec",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
    },
    y: -60
});

gsap.from(".cards_sec .vector2", {
    scrollTrigger: {
        trigger: ".cards_sec",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
    },
    y: 40
});

gsap.from(".cards_sec .vector3", {
    scrollTrigger: {
        trigger: ".cards_sec",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
    },
    y: 80
});

// ==========================
// Countdown Section Animation
// ==========================
gsap.registerPlugin(ScrollTrigger);

const countdownTl = gsap.timeline({
    scrollTrigger: {
        trigger: ".countdown_sec",
        start: "top 75%",
        toggleActions: "play none none none"
    }
});

countdownTl
    .from(".countdown_sec .title", {
        autoAlpha: 0,
        y: 30,
        duration: 0.5,
        ease: "power3.out"
    })
    .from(".countdown_sec .p", {
        autoAlpha: 0,
        y: 20,
        duration: 0.4,
        ease: "power2.out"
    }, "-=0.25")
    .from(".countdown_sec .time-box", {
        autoAlpha: 0,
        scale: 0.85,
        duration: 0.4,
        ease: "back.out(1.6)",
        stagger: 0.08
    }, "-=0.15");

// blinking dots (subtle)
gsap.to(".countdown_sec .dot", {
    opacity: 0.3,
    duration: 0.8,
    repeat: -1,
    yoyo: true,
    ease: "sine.inOut"
});


// ==========================
// Statics Section Animation
// ==========================
const staticsTl = gsap.timeline({
    scrollTrigger: {
        trigger: ".statics_sec",
        start: "top 75%",
        toggleActions: "play none none none"
    }
});

staticsTl
    .from(".statics_sec .sec_head .icon", {
        autoAlpha: 0,
        scale: 0.85,
        duration: 0.35,
        ease: "power2.out"
    })
    .from(".statics_sec .sec_head .title", {
        autoAlpha: 0,
        y: 24,
        duration: 0.45,
        ease: "power3.out"
    }, "-=0.15")
    .from(".statics_sec .sec_head .p", {
        autoAlpha: 0,
        y: 16,
        duration: 0.35,
        ease: "power2.out"
    }, "-=0.25")
    .from(".statics_sec .item", {
        autoAlpha: 0,
        y: 40,
        duration: 0.6,
        ease: "power3.out",
        stagger: 0.12
    }, "-=0.1");


// ==========================
// Testimonials Section Animation
// ==========================
const testiHeadTl = gsap.timeline({
    scrollTrigger: {
        trigger: ".testimonials_sec",
        start: "top 75%",
        toggleActions: "play none none none"
    }
});

testiHeadTl
    .from(".testimonials_sec .sec_head .icon", {
        autoAlpha: 0,
        scale: 0.85,
        duration: 0.35,
        ease: "power2.out"
    })
    .from(".testimonials_sec .sec_head .title", {
        autoAlpha: 0,
        y: 22,
        duration: 0.45,
        ease: "power3.out"
    }, "-=0.15")
    .from(".testimonials_sec .sec_head .p", {
        autoAlpha: 0,
        y: 16,
        duration: 0.35,
        ease: "power2.out"
    }, "-=0.25");

// cards reveal (NO transform on swiper wrapper)
gsap.from(".testimonials_sec .swiper-slide .item", {
    scrollTrigger: {
        trigger: ".testimonials_sec .swiper-container",
        start: "top 70%"
    },
    autoAlpha: 0,
    y: 35,
    duration: 0.6,
    ease: "power3.out",
    stagger: 0.12
});

// avatar focus
gsap.from(".testimonials_sec .avatar", {
    scrollTrigger: {
        trigger: ".testimonials_sec",
        start: "top 70%"
    },
    scale: 0.85,
    filter: "grayscale(100%)",
    duration: 0.6,
    ease: "power2.out",
    stagger: 0.12
});

// ==========================
// Statics Counters – SMOOTH & PREMIUM
// ==========================
gsap.utils.toArray(".statics_sec .counter").forEach(counter => {

    const rawText = counter.textContent.trim(); // e.g. "5240+"
    const value = parseInt(rawText.replace(/\D/g, ""), 10);
    const suffix = rawText.replace(/[0-9]/g, "");

    const obj = { val: 0 };

    gsap.to(obj, {
        val: value,
        duration: 1.8,
        ease: "power1.out",
        scrollTrigger: {
            trigger: counter,
            start: "top 85%",
            once: true
        },
        onUpdate() {
            counter.innerText =
                Math.floor(obj.val) + suffix;
        }
    });

});
