/* Add custom Js code below */
 
/* تعطيل النقر بزر الفأرة الأيمن ومنع تحديد النص */
document.addEventListener('contextmenu', function (event) {
    event.preventDefault();
    alert('🤔🤔🤔🤔');
});
 
document.addEventListener('selectstart', function (event) {
    event.preventDefault();
});
 
/* Add custom Js code below */
document.addEventListener("DOMContentLoaded", () => {
    const bannerEntries = document.querySelectorAll(".banner-entry");
 
    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add("visible");
                    // Uncomment the line below to stop observing after animation
                    // observer.unobserve(entry.target);
                } else {
                    entry.target.classList.remove("visible");
                }
            });
        },
        { threshold: 0.1 }
    );
 
    bannerEntries.forEach(entry => observer.observe(entry));
});
 
/* Add custom Js code below */
document.addEventListener("DOMContentLoaded", () => {
    const bannerFixedImgs = document.querySelectorAll(".banner--fixed img");
 
    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add("visible");
                } else {
                    entry.target.classList.remove("visible");
                }
            });
        },
        { threshold: 0.1 }
    );
 
    bannerFixedImgs.forEach(entry => observer.observe(entry));
});
 
document.addEventListener("DOMContentLoaded", function () {
    function toggleScrollAnimations() {
        let productCards = document.querySelectorAll('[dir="rtl"] .carousel-slider .swiper');
        let windowHeight = window.innerHeight;
 
        productCards.forEach((card, index) => {
            let rect = card.getBoundingClientRect();
            if (rect.top < windowHeight && rect.bottom > 0) {
                card.style.transitionDelay = `${index * 0.05}s`;
                card.classList.add("animate-card");
            } else {
                card.classList.remove("animate-card");
            }
        });
    }
 
    window.addEventListener("load", toggleScrollAnimations);
    window.addEventListener("scroll", toggleScrollAnimations);
    window.addEventListener("resize", toggleScrollAnimations);
 
    toggleScrollAnimations();
});
 
/* ===== WhatsApp floating button + Scroll-to-top button ===== */
/* Wrapped in DOMContentLoaded + guarded against duplicate injection */
document.addEventListener("DOMContentLoaded", function () {
 
    /* ---- WhatsApp float (modern style) ---- */
    if (!document.querySelector('.whatsapp-float')) {
        var whatsappFloat = document.createElement('div');
        whatsappFloat.className = 'whatsapp-float';
 
        var whatsappLink = document.createElement('a');
        // NOTE: wa.me links must NOT include a "+" before the number
        whatsappLink.href = 'https://wa.me/966558089099';
        whatsappLink.target = '_blank';
        whatsappLink.rel = 'noopener noreferrer';
        whatsappLink.className = 'whatsapp-btn';
        whatsappLink.setAttribute('aria-label', 'Chat on WhatsApp');
 
        // Crisp inline SVG instead of a raster PNG — sharp at any size, no external request
        whatsappLink.innerHTML = `
            <span class="whatsapp-pulse"></span>
            <svg viewBox="0 0 32 32" class="whatsapp-icon" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M16.001 3C9.373 3 4 8.373 4 15c0 2.386.697 4.61 1.899 6.484L4 29l7.71-1.862A11.94 11.94 0 0 0 16.001 27C22.628 27 28 21.627 28 15S22.628 3 16.001 3Zm.001 21.75c-1.94 0-3.76-.53-5.32-1.45l-.382-.226-4.573 1.104 1.223-4.455-.249-.396A9.71 9.71 0 0 1 5.25 15c0-5.936 4.815-10.75 10.752-10.75 5.936 0 10.75 4.814 10.75 10.75 0 5.936-4.814 10.75-10.75 10.75Zm5.902-8.049c-.323-.162-1.912-.943-2.208-1.05-.296-.108-.512-.162-.727.161-.216.324-.836 1.05-1.025 1.267-.188.216-.377.243-.7.081-.323-.161-1.363-.502-2.596-1.6-.96-.856-1.608-1.913-1.797-2.237-.188-.324-.02-.499.141-.66.145-.144.323-.377.485-.566.161-.19.215-.324.323-.54.108-.216.054-.405-.027-.567-.081-.161-.727-1.752-.997-2.4-.262-.63-.529-.545-.727-.555l-.619-.011c-.216 0-.567.081-.864.405-.296.324-1.132 1.106-1.132 2.698 0 1.591 1.159 3.129 1.32 3.345.161.216 2.282 3.484 5.53 4.887.773.334 1.375.534 1.845.683.775.246 1.48.211 2.037.128.621-.093 1.912-.782 2.182-1.537.27-.756.27-1.402.189-1.537-.081-.135-.297-.216-.62-.378Z"/>
            </svg>
        `;
 
        whatsappFloat.appendChild(whatsappLink);
        document.body.appendChild(whatsappFloat);
 
        var whatsappStyle = document.createElement('style');
        whatsappStyle.innerHTML = `
        .whatsapp-float {
          position: fixed;
          bottom: 130px;
          left: 24px;
          z-index: 100;
        }
 
        .whatsapp-btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            border-radius: 18px;
            background: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 55%, #EC4899 100%);
            border: 1px solid rgba(255,255,255,0.3);
            box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4), 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25);
            text-decoration: none;
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-radius 0.3s ease;
        }
 
        .whatsapp-btn:hover {
            transform: scale(1.08) translateY(-2px);
            border-radius: 50%;
            box-shadow: 0 12px 28px rgba(139, 92, 246, 0.5), 0 4px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.3);
        }
 
        .whatsapp-btn:active {
            transform: scale(0.96);
        }
 
        .whatsapp-icon {
            width: 28px;
            height: 28px;
            color: #fff;
            position: relative;
            z-index: 2;
        }
 
        .whatsapp-pulse {
            position: absolute;
            inset: 0;
            border-radius: 18px;
            background: #8B5CF6;
            opacity: 0.55;
            animation: whatsapp-pulse-anim 2.2s ease-out infinite;
            z-index: 1;
        }
 
        @keyframes whatsapp-pulse-anim {
            0% { transform: scale(1); opacity: 0.55; }
            100% { transform: scale(1.9); opacity: 0; }
        }
 
        @media (prefers-reduced-motion: reduce) {
            .whatsapp-pulse { animation: none; }
            .whatsapp-btn { transition: none; }
        }
        `;
        document.head.appendChild(whatsappStyle);
    }
 
    /* ---- Scroll to top (modern style: circular progress ring) ---- */
    if (!document.querySelector('.scroll-top-float')) {
        var scrollTopFloat = document.createElement('div');
        scrollTopFloat.className = 'scroll-top-float';
 
        var scrollTopButton = document.createElement('button');
        scrollTopButton.className = 'scroll-top-button';
        scrollTopButton.setAttribute('aria-label', 'Scroll to top');
        scrollTopButton.type = 'button';
 
        // SVG ring shows how far down the page you've scrolled; fills in as you go
        scrollTopButton.innerHTML = `
            <svg class="scroll-top-ring" viewBox="0 0 44 44">
                <defs>
                    <linearGradient id="scrollTopRingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" stop-color="#4F46E5"/>
                        <stop offset="55%" stop-color="#8B5CF6"/>
                        <stop offset="100%" stop-color="#EC4899"/>
                    </linearGradient>
                </defs>
                <circle class="scroll-top-ring-bg" cx="22" cy="22" r="19"></circle>
                <circle class="scroll-top-ring-fg" cx="22" cy="22" r="19"></circle>
            </svg>
            <svg class="scroll-top-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 19V5M12 5L6 11M12 5L18 11" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        `;
 
        scrollTopFloat.appendChild(scrollTopButton);
        document.body.appendChild(scrollTopFloat);
 
        var ringFg = scrollTopButton.querySelector('.scroll-top-ring-fg');
        var ringRadius = 19;
        var ringCircumference = 2 * Math.PI * ringRadius;
        ringFg.style.strokeDasharray = ringCircumference;
 
        scrollTopButton.addEventListener('click', function () {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
 
        function updateScrollTopButton() {
            var scrollTop = window.scrollY;
            var docHeight = document.documentElement.scrollHeight - window.innerHeight;
            var progress = docHeight > 0 ? Math.min(scrollTop / docHeight, 1) : 0;
 
            ringFg.style.strokeDashoffset = ringCircumference * (1 - progress);
            scrollTopFloat.classList.toggle('is-visible', scrollTop > 200);
        }
 
        document.addEventListener('scroll', updateScrollTopButton, { passive: true });
        updateScrollTopButton();
 
        var scrollTopStyle = document.createElement('style');
        scrollTopStyle.innerHTML = `
        .scroll-top-float {
            position: fixed;
            bottom: 130px;
            right: 24px;
            z-index: 100;
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
 
        .scroll-top-float.is-visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
 
        .scroll-top-button {
            position: relative;
            width: 52px;
            height: 52px;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-radius 0.3s ease;
        }
 
        .scroll-top-button:hover {
            transform: translateY(-3px);
            border-radius: 50%;
            box-shadow: 0 12px 24px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1);
        }
 
        .scroll-top-button:active {
            transform: translateY(0) scale(0.94);
        }
 
        .scroll-top-ring {
            position: absolute;
            inset: 0;
            width: 52px;
            height: 52px;
            transform: rotate(-90deg);
        }
 
        .scroll-top-ring-bg {
            fill: none;
            stroke: rgba(0,0,0,0.08);
            stroke-width: 3;
        }
 
        .scroll-top-ring-fg {
            fill: none;
            stroke: url(#scrollTopRingGrad);
            stroke-width: 3;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.1s linear;
        }
 
        .scroll-top-arrow {
            width: 20px;
            height: 20px;
            color: #8B5CF6;
            position: relative;
            z-index: 2;
        }
 
        @media (prefers-reduced-motion: reduce) {
            .scroll-top-button, .scroll-top-float { transition: none; }
        }
        `;
        document.head.appendChild(scrollTopStyle);
    }
});