/* Add custom Js code below */ 
/* Add custom Js code below */ 
/* Add custom Js code below */ 
/* 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/+966544409151" 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';
    });