document.addEventListener('DOMContentLoaded', function () {
  
    if (window.location.pathname === '/') { 
        // نافذة منبثقة لرسالة واتساب
        const popup = document.createElement('div');
        popup.className = 'whatsapp-popup';
        popup.style.cssText = `
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 350px;
            background: #fff;
            border: 2px solid #008080;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            animation: fadeIn 0.5s ease-in-out;
        `;
        popup.innerHTML = `
            <div style="position: relative; width: 100%;">
                <span class="close-popup" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px;">&times;</span>
            </div>
            <img src="https://example.com/whatsapp-icon.png" alt="WhatsApp" style="width: 50px; height: 50px; margin-bottom: 15px;">
            <h3 style="color: #008080; margin-bottom: 10px;">هل واجهتك مشكلة أثناء الطلب؟</h3>
            <p style="color: #333; margin-bottom: 20px;">تفضل واتساب <a href="https://wa.me/0575323505" style="color: #008080; text-decoration: none; font-weight: bold;">اضغط هنا</a></p>
        `;
        document.body.appendChild(popup);

        // إغلاق النافذة عند النقر على زر "x"
        const closeButton = popup.querySelector('.close-popup');
        closeButton.addEventListener('click', () => {
            popup.style.display = 'none';
        });

        setTimeout(function () {
            popup.style.animation = 'fadeOut 0.5s ease-in-out';
            setTimeout(function () {
                popup.style.display = 'none';
            }, 500);
        }, 10000); 

     
    }
});
document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, { passive: false });

document.addEventListener('gesturestart', function(event) {
    event.preventDefault();
});

(function() {
    function injectPerfectLayoutWhatsAppWidget() {
        if (!document.getElementById('shaikha-circle-wa-styles')) {
            var style = document.createElement('style');
            style.id = 'shaikha-circle-wa-styles';
            style.innerHTML = `
                div[id^="gb-widget-"] { display: none !important; opacity: 0 !important; visibility: hidden !important; }
                
                .wa-info-box {
                    position: fixed;
                    right: 85px;
                    bottom: 20px;
                    background: rgba(0, 0, 0, 0.95);
                    backdrop-filter: blur(10px);
                    color: #fff;
                    padding: 10px 14px;
                    border-radius: 12px;
                    border: 1px solid #d4af37;
                    text-align: right;
                    font-family: 'DINNextLTArabic-Regular', sans-serif;
                    z-index: 999997;
                    opacity: 0;
                    transform: translateX(20px) scale(0.95);
                    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                    pointer-events: none;
                    width: 220px;
                }
                .wa-info-box h5 { margin: 0 0 4px 0; font-size: 12px; font-weight: bold; color: #d4af37; }
                .wa-info-box p { margin: 0; font-size: 10px; color: #e5e5e5; line-height: 1.4; }

                .wa-circle-sub-btn {
                    position: fixed;
                    right: 25px;
                    bottom: 25px;
                    width: 46px;
                    height: 46px;
                    border-radius: 50%;
                    background: #25D366;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
                    cursor: pointer;
                    transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
                    z-index: 999998;
                    opacity: 0;
                    transform: scale(0) rotate(-45deg);
                    text-decoration: none;
                }
                
                .wa-btn-label {
                    position: fixed;
                    right: 80px;
                    background: #ffffff;
                    color: #000000;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
                    border: 1px solid #eaeaea;
                    padding: 4px 10px;
                    border-radius: 8px;
                    font-size: 11px;
                    font-weight: bold;
                    font-family: 'DINNextLTArabic-Regular', sans-serif;
                    white-space: nowrap;
                    opacity: 0;
                    transform: translateX(15px);
                    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                    pointer-events: none;
                    text-align: right;
                    z-index: 999997;
                    display: flex;
                    flex-direction: column;
                }
                
                .wa-btn-label span {
                    font-size: 9px;
                    font-weight: normal;
                    color: #666666;
                    margin-top: 0px;
                    padding-top: 1px;
                    opacity: 0;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease;
                }
                
                @keyframes pulseDescription {
                    0%, 100% { opacity: 0; max-height: 0px; }
                    15%, 85% { opacity: 1; max-height: 20px; }
                }
                
                .wa-circle-active .wa-btn-label span {
                    animation: pulseDescription 6s infinite ease-in-out;
                }
                
                .wa-circle-active #wa-label-support span {
                    animation-delay: 1.5s;
                }
                
                .wa-circle-active #wa-btn-sales {
                    opacity: 1;
                    transform: scale(1) translateY(-60px) rotate(0deg);
                }
                .wa-circle-active #wa-btn-support {
                    opacity: 1;
                    transform: scale(1) translateY(-118px) rotate(0deg);
                    transition-delay: 0.05s; 
                }
                
                .wa-circle-active #wa-label-sales {
                    opacity: 1;
                    transform: translateX(0);
                    bottom: 88px;
                    transition-delay: 0.15s;
                }
                .wa-circle-active #wa-label-support {
                    opacity: 1;
                    transform: translateX(0);
                    bottom: 146px;
                    transition-delay: 0.2s;
                }
                
                .wa-circle-active .wa-info-box {
                    opacity: 1;
                    transform: translateX(0) scale(1);
                    transition-delay: 0.1s;
                }
            `;
            document.head.appendChild(style);
        }

        if (!document.getElementById('shaikha-circle-wa-container')) {
            var container = document.createElement('div');
            container.id = 'shaikha-circle-wa-container';
            
            var salesPhone = "966575323505"; 
            var supportPhone = "966591754692"; 

            container.innerHTML = `
                <div class="wa-info-box">
                    <h5>مركز خدمة عملاء شيخة</h5>
                    <p>يرجى اختيار القسم المطلوب لضمان سرعة الرد:</p>
                </div>

                <div id="wa-label-sales" class="wa-btn-label">
                    المبيعات والاستفسارات
                    <span>للمساعدة قبل الشراء والدفع 🛍️</span>
                </div>
                <a href="https://wa.me/${salesPhone}?text=مرحباً%20متجر%20شيخة،%20عندي%20استفسار%20قبل%20الشراء" target="_blank" id="wa-btn-sales" class="wa-circle-sub-btn">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" width="22">
                </a>
                
                <div id="wa-label-support" class="wa-btn-label">
                    الدعم ومتابعة الطلبات
                    <span>للشحن، التعديل، أو الشكاوى 🛠️</span>
                </div>
                <a href="https://wa.me/${supportPhone}?text=مرحباً%20متجر%20شيخة،%20أود%20متابعة%20طلبي" target="_blank" id="wa-btn-support" class="wa-circle-sub-btn" style="background: #075E54;">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" width="22">
                </a>

                <div id="wa-circle-trigger" style="position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%; background: #000000; border: 2px solid #d4af37; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); cursor: pointer; z-index: 999999; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);">
                    <img id="wa-circle-icon-img" src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" width="28" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);">
                </div>
            `;
            document.body.appendChild(container);

            var mainTrigger = document.getElementById('wa-circle-trigger');
            mainTrigger.addEventListener('click', function(e) {
                e.stopPropagation();
                container.classList.toggle('wa-circle-active');
                
                var iconImg = document.getElementById('wa-circle-icon-img');
                if (container.classList.contains('wa-circle-active')) {
                    mainTrigger.style.transform = "scale(0.92)";
                    iconImg.style.transform = "rotate(135deg)";
                } else {
                    mainTrigger.style.transform = "scale(1)";
                    iconImg.style.transform = "rotate(0deg)";
                }
            });

            var closeWidget = function() {
                container.classList.remove('wa-circle-active');
                document.getElementById('wa-circle-trigger').style.transform = "scale(1)";
                document.getElementById('wa-circle-icon-img').style.transform = "rotate(0deg)";
            };

            document.addEventListener('click', closeWidget);
            window.addEventListener('scroll', closeWidget, { passive: true });
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectPerfectLayoutWhatsAppWidget);
    } else {
        injectPerfectLayoutWhatsAppWidget();
    }
})();