/* Add custom Js code below */ 
document.addEventListener("DOMContentLoaded", function() {
    const sections = document.querySelectorAll('section');

    function checkVisibility() {
        sections.forEach(section => {
            const position = section.getBoundingClientRect();
            if (position.top < window.innerHeight && position.bottom >= 0) {
                section.classList.add('visible');
            } else {
                section.classList.remove('visible');
            }
        });
    }

    window.addEventListener("scroll", checkVisibility);
    checkVisibility(); // Check on load
});


// Create the WhatsApp button container
var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

// Create the WhatsApp link container
var whatsappPopup = document.createElement('div');
whatsappPopup.className = 'whatsapp-popup';
whatsappPopup.style.display = 'none'; // Initially hidden

// Create the popup content with avatar, text, and list of options
var popupContent = `
  <div class="popup-header">
    <div class="avatar-container">
      <img src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="Avatar" class="avatar-img">
      <span class="support-text">الدعم الفني</span>
    </div>
    <button class="close-popup">×</button>
  </div>
  <div class="popup-body">
    <p>مرحباً بك، نحن متواجدون لخدمتك</p>
    <p>برجاء ارسال رقم:</p>
    <ul class="options-list">
      <li>1- لتتبع الطلب</li>
      <li>2- مشكلة</li>
      <li>3- استفسار</li>
    </ul>
    <a href="https://wa.me/+966501362683" target="_blank" class="whatsapp-button">تواصل معنا</a>
    <div class="adfaz-container">
      <a href="https://adfaz.sa/" target="_blank" class="adfaz-link">
        <img src="https://i.ibb.co/P4YVDmW/Black-Gold-White-Luxury-Royal-Crown-Logo.png" alt="Adfaz" class="adfaz-img">
        <span class="adfaz-text">برمجة وتطوير أدفاز</span>
      </a>
    </div>
  </div>
`;

whatsappPopup.innerHTML = popupContent;

// Append the popup to the container
whatsappFloat.appendChild(whatsappPopup);

// Create the WhatsApp icon
var whatsappIcon = document.createElement('img');
whatsappIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
whatsappIcon.alt = 'WhatsApp';
whatsappIcon.className = 'whatsapp-icon';

// Append the icon to the container
whatsappFloat.appendChild(whatsappIcon);

// Append the WhatsApp button to the body
document.body.appendChild(whatsappFloat);

// Add CSS styles dynamically
var style = document.createElement('style');
style.innerHTML = `
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}

.whatsapp-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.whatsapp-icon:hover {
  transform: scale(1.1);
}

.whatsapp-popup {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 300px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 15px;
  z-index: 101;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-container {
  display: flex;
  align-items: center;
}

.avatar-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.support-text {
  font-size: 16px;
  font-weight: bold;
}

.close-popup {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.popup-body {
}

.options-list {
  list-style-type: none;
  padding: 0;
  margin: 10px 0;
}

.options-list li {
  margin-bottom: 5px;
}

.whatsapp-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #25d366;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 15px;
}

.whatsapp-button:hover {
  background-color: #1ebe55;
}

.adfaz-container {
  display: flex;
  align-items: center;
}

.adfaz-link {
  display: flex;
  text-decoration: none;
  color: black;
}

.adfaz-img {
    width: 30px;
    height: 30px;
    margin-left: 3px;
}

.adfaz-text {
  font-size: 12px;
}
`;
document.head.appendChild(style);

// Toggle the popup when the icon is clicked
whatsappIcon.addEventListener('click', function() {
  whatsappPopup.style.display = (whatsappPopup.style.display === 'none') ? 'block' : 'none';
});

// Close the popup when the close button is clicked
document.querySelector('.close-popup').addEventListener('click', function() {
  whatsappPopup.style.display = 'none';
});




(function () {

    const JACO_URL = "https://jaco.live/@DAFER_2026?lang=ar&theme=light&uid=3007878065";
    const JACO_IMAGE = "https://i.ibb.co/ymJ9z6RQ/ndp2o-Ip-1.png";

    function addJacoIcon() {

        // نستهدف كل قوائم السوشيال:
        // الديسكتوب + الموبايل
        const socialLists = document.querySelectorAll(
            ".s-social-list"
        );

        if (!socialLists.length) return;

        socialLists.forEach(function (socialList) {

            // منع التكرار
            if (socialList.querySelector(".jaco-social-link")) return;

            const item = document.createElement("li");

            // نفس كلاس الأيقونات الأصلية
            item.className = "s-social-link jaco-social-link";

            item.innerHTML = `
                <a
                    href="${JACO_URL}"
                    rel="noopener noreferrer"
                    target="_blank"
                    title="Jaco"
                    aria-label="Jaco"
                >
                    <span class="s-social-icon">
                        <img
                            src="${JACO_IMAGE}"
                            alt="Jaco"
                        >
                    </span>
                </a>
            `;

            socialList.appendChild(item);
        });

        // إضافة CSS مرة واحدة
        if (!document.querySelector("#jaco-social-style")) {

            const style = document.createElement("style");

            style.id = "jaco-social-style";

            style.textContent = `

                /* =========================
                   JACO
                   ========================= */

                .jaco-social-link img {
                    width: 32px !important;
                    height: 32px !important;
                    padding: 4px !important;
                    display: block !important;
                    object-fit: contain !important;
                    box-sizing: border-box !important;
                }


                /* =========================
                   MOBILE
                   3 أيقونات في كل صف
                   ========================= */

                @media (max-width: 1023px) {

                    .contact-social .s-social-list {
                        display: grid !important;

                        grid-template-columns:
                            repeat(3, minmax(0, 1fr)) !important;

                        column-gap: 0 !important;
                        row-gap: 8px !important;

                        width: 100% !important;
                        max-width: 100% !important;

                        margin: 0 !important;
                        padding: 0 !important;

                        box-sizing: border-box !important;
                    }


                    .contact-social .s-social-list
                    .s-social-link {

                        width: 100% !important;
                        max-width: 100% !important;

                        min-width: 0 !important;

                        margin: 0 !important;
                        padding: 0 !important;

                        display: flex !important;

                        align-items: center !important;
                        justify-content: center !important;

                        box-sizing: border-box !important;
                    }


                    .contact-social .s-social-list
                    .s-social-link a {

                        display: flex !important;

                        align-items: center !important;
                        justify-content: center !important;

                        margin: 0 !important;
                    }


                    .contact-social .s-social-list
                    .s-social-icon {

                        display: flex !important;

                        align-items: center !important;
                        justify-content: center !important;
                    }


                    .contact-social .jaco-social-link img {

                        width: 32px !important;
                        height: 32px !important;

                        padding: 4px !important;

                        object-fit: contain !important;
                        box-sizing: border-box !important;
                    }
                }


                /* الموبايلات الصغيرة */
                @media (max-width: 380px) {

                    .contact-social .s-social-list {
                        row-gap: 5px !important;
                    }

                }

            `;

            document.head.appendChild(style);
        }
    }


    // تشغيل عند تحميل الصفحة
    function init() {
        addJacoIcon();
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }


    // مراقبة إعادة بناء عناصر Salla
    const observer = new MutationObserver(function () {
        addJacoIcon();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

})();