var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

// Create the WhatsApp link 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="logo-container">
    <a >
      <img src="">
    </a>
  </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/+966554415279" 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://iili.io/Fv1sNIa.gif';
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: 100px;
left: 20px;
z-index: 100;
}
.logo-container{
  height: 50px;
  margin: auto;
}
.whatsapp-icon {
width: 50px;
height: 50px;
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: 155px;
  left: 20px;
  background: linear-gradient(var(--main-color), var(--second-color));
  width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 15px;
  color: white;
  z-index: 101;
  border-radius: 10px;
}

.popup-header {
  display: flex
;
  justify-content: space-between;
  align-items: center;
}
.adfaz-container {
  display: flex
;
  padding-top: 6px;
  align-items: flex-end;
  justify-content: space-evenly;
}
.avatar-img {
width: 40px;
height: 40px;
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;
    color: white;
}
.support-text {
font-size: 16px;
font-weight: bold;
}

`;
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';
});

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

(function coffeeLoaderV3() {
  // 1. إضافة خط Aref Ruqaa من Google Fonts
  const fontLink = document.createElement("link");
  fontLink.rel = "stylesheet";
  fontLink.href = "https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@700&display=swap";
  document.head.appendChild(fontLink);

  const loader = document.createElement("div");
  loader.id = "fancy-coffee-loader";

  const styles = document.createElement("style");
  styles.textContent = `
    /* General Loader Container */
    #fancy-coffee-loader {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      background: #0a0a0a; /* خلفية سوداء عميقة */
      transition: opacity 0.8s ease-in-out;
    }

    /* Coffee Bean Background (More subtle) */
    #fancy-coffee-loader::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('https://images.unsplash.com/photo-1541167760496-1c88593a1f30?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
      background-size: cover;
      background-position: center;
      opacity: 0.05; /* شفافية خفيفة جداً */
      pointer-events: none;
    }

    /* Modern Coffee Cup and Saucer */
    .cup-scene {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .cup {
        width: 150px;
        height: 120px;
        background: #1c1c1c; /* لون أسود أنيق */
        border-radius: 0 0 70px 70px;
        position: relative;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), inset 0 5px 10px rgba(255, 255, 255, 0.05);
        z-index: 2;
    }

    /* Handle */
    .cup::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 60px;
        background: transparent;
        border: 4px solid #ccaa66; /* لون نحاسي/ذهبي للمقبض */
        border-radius: 0 35px 35px 0;
        right: -38px;
        top: 25px;
        box-shadow: 0 0 5px rgba(204, 170, 102, 0.5);
    }

    /* Coffee Surface / Rim */
    .cup::after {
        content: "";
        position: absolute;
        width: 90%;
        height: 10px;
        background: #ccaa66; /* لون نحاسي لامع */
        border-radius: 50%;
        top: 0;
        left: 5%;
        box-shadow: 0 0 10px rgba(204, 170, 102, 0.8);
    }

    /* Saucer */
    .saucer {
        width: 220px;
        height: 15px;
        background: #252525;
        border-radius: 50%;
        margin-top: -5px; /* يوضع تحت الكوب قليلاً */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
        border: 2px solid #ccaa66; /* حافة نحاسية */
        z-index: 1;
    }

    /* Steam effect */
    .steam {
        position: absolute;
        bottom: 110%;
        left: 50%;
        transform: translateX(-50%);
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        animation: steam-up 6s ease-out infinite;
        filter: blur(3px);
    }

    .steam:nth-child(2) { animation-delay: 1s; }
    .steam:nth-child(3) { animation-delay: 2s; }
    .steam:nth-child(4) { animation-delay: 3s; }

    @keyframes steam-up {
        0% { transform: translate(-50%, 0) scale(0.5); opacity: 0.8; }
        100% { transform: translate(-50%, -200px) scale(6); opacity: 0; }
    }

    /* Slogan Text - Appearance */
    .slogan-text {
        font-family: 'Aref Ruqaa', serif;
        font-size: 2.8em; /* حجم أكبر بكثير */
        font-weight: 700;
        color: #ccaa66; /* لون نحاسي/ذهبي فاخر */
        text-shadow: 0 0 15px rgba(204, 170, 102, 0.5); /* ظل ذهبي */
        margin-top: 50px;
        opacity: 0; /* يبدأ مخفياً */
        animation: fade-in-text 1.5s ease-out 1.5s forwards; /* يظهر بعد 1.5 ثانية من بداية التحميل */
        white-space: nowrap;
    }

    @keyframes fade-in-text {
        to { opacity: 1; }
    }
  `;

  // 2. Build the HTML structure
  const cupScene = document.createElement("div");
  cupScene.className = "cup-scene";

  const cup = document.createElement("div");
  cup.className = "cup";

  // The smoke elements
  for (let i = 0; i < 4; i++) {
    const steam = document.createElement("div");
    steam.className = "steam";
    cup.appendChild(steam);
  }

  const saucer = document.createElement("div");
  saucer.className = "saucer";

  // The slogan text 
  const slogan = document.createElement("h2");
  slogan.className = "slogan-text";
  slogan.textContent = "SARI ... مزاج القهوه";

  // 3. Assemble and inject into the page
  cupScene.appendChild(cup);
  cupScene.appendChild(saucer); 
  loader.appendChild(cupScene);
  loader.appendChild(slogan);
 
  document.head.appendChild(styles);
  document.body.appendChild(loader);

  // 4. Hide the loader after the page loads
  window.addEventListener("load", () => {
    // الانتظار 4 ثواني (يكفي لظهور الفنجان واكتمال النص)
    setTimeout(() => {
      loader.style.opacity = "0";
      setTimeout(() => loader.remove(), 800);
    }, 4000); 
  });
})();