// preloader.js
(function () {
  // إنشاء العنصر الأساسي للـ Preloader
  const preloader = document.createElement("div");
  preloader.className = "preloader";

  // إنشاء عنصر النقاط المتحركة
  const loader = document.createElement("div");
  loader.className = "dots-loader";

  // إنشاء 3 نقاط
  for (let i = 0; i < 3; i++) {
    const dot = document.createElement("span");
    loader.appendChild(dot);
  }

  preloader.appendChild(loader);
  document.body.appendChild(preloader);

  // إنشاء CSS داخل صفحة الويب من خلال <style>
  const style = document.createElement("style");
  style.textContent = `
    .preloader {
      position: fixed;
      top: 0;
      left: 0;

      background: #3D3D3D;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 0.6s ease, visibility 0.6s;
    }

    .preloader-hide {
      opacity: 0;
      visibility: hidden;
    }

    .dots-loader {
      display: flex;
      gap: 12px;
    }

    .dots-loader span {
      width: 14px;
      height: 14px;
      background: white;
      border-radius: 50%;
      animation: bounce 0.6s infinite ease-in-out alternate;
    }

    .dots-loader span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .dots-loader span:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes bounce {
      to {
        transform: translateY(-14px);
        opacity: 0.6;
      }
    }
  `;
  document.head.appendChild(style);

  // عند تحميل الصفحة بالكامل، نخفي الـ Preloader
  window.addEventListener("load", function () {
    preloader.classList.add("preloader-hide");
    setTimeout(() => {
      preloader.remove();
    }, 600);
  });
})();