/* Add custom Js styles below */ 

document.addEventListener("DOMContentLoaded", () => {
  // استهداف البانر الرئيسي
  const banner = document.querySelector(".container .banner--fixed");
  if (!banner || banner.querySelector(".banner-overlay")) return;

  // إنشاء الأوفرلاي والزر
  const overlay = document.createElement("div");
  overlay.className = "banner-overlay";
  overlay.innerHTML = `
    <a href="https://jomlah.app/ar/brands" class="cta-btn">تسوق الآن</a>
  `;

  banner.style.position = "relative";
  banner.appendChild(overlay);
});







document.addEventListener("DOMContentLoaded", () => {
  // نتأكد أننا على الصفحة الرئيسية فقط
  if (!location.pathname.endsWith("/") && !location.pathname.endsWith("/ar") && !location.pathname.endsWith("/ar/")) {
    return;
  }

  // نتأكد أنها شاشة موبايل فقط
  if (window.innerWidth > 768) return;

  // التأكد إنك مش عامل بنر قبل كدا
  if (document.querySelector(".mobile-main-banner")) return;

  // نحدد الهيدر أو أول عنصر تحت الهيدر (السلايدر)
  const header = document.querySelector("header") || document.querySelector(".header");

  if (!header) return;

  // إنشاء البنر
  const mobileBanner = document.createElement("div");
  mobileBanner.className = "mobile-main-banner";
  mobileBanner.innerHTML = `
    <a href="https://jomlah.app/ar/brands">
      <img src="https://cdn.salla.sa/PrYrB/9UyT454c2iWj96Ibpe3Vyv0c55plPK5qL9tJOO8P.png" style="width:100%; display:block;" alt="Mobile Banner">
    </a>
  `;

  // إدراج البنر بعد الهيدر مباشرة
  header.insertAdjacentElement("afterend", mobileBanner);
});








document.addEventListener("DOMContentLoaded", () => {
  // الصفحة الرئيسية فقط
  if (!location.pathname.endsWith("/") && !location.pathname.endsWith("/ar") && !location.pathname.endsWith("/ar/")) {
    return;
  }

  // موبايل فقط
  if (window.innerWidth > 768) return;

  // تحديد بنر الموبايل الجديد
  const mobileBanner = document.querySelector(".mobile-main-banner");
  if (!mobileBanner || mobileBanner.querySelector(".mobile-banner-overlay")) return;

  // إنشاء أوفرلاي + زر
  const overlay = document.createElement("div");
  overlay.className = "mobile-banner-overlay";
  overlay.innerHTML = `<a href="https://jomlah.app/ar/brands" class="mobile-cta-btn">تسوق الآن</a>`;

  // تثبيت البانر كـ position relative
  mobileBanner.style.position = "relative";

  // إضافة الزر فوق البنر
  mobileBanner.appendChild(overlay);
});



document.addEventListener("DOMContentLoaded", function () {

  // الصفحة الرئيسية فقط
  if (!location.pathname.endsWith("/") && !location.pathname.endsWith("/ar") && !location.pathname.endsWith("/ar/")) {
    return;
  }

  // استدعاء خط Cairo من Google Fonts
  let link = document.createElement('link');
  link.href = 'https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600&display=swap';
  link.rel = 'stylesheet';
  document.head.appendChild(link);

  let sectionTitleBlock = document.querySelector(".s-block__title");

  if (sectionTitleBlock) {
    sectionTitleBlock.innerHTML = "";

    let section = document.createElement("section");
    section.className = "section-title";

    let title = document.createElement("h2");
    title.className = "main-title";
    title.style.fontFamily = "'Cairo', sans-serif";
    title.style.fontWeight = "600";
    title.style.color = "#e11f1f";
    title.style.fontSize = window.innerWidth >= 768 ? "32px" : "18px";
    title.style.textAlign = "center";
    title.style.margin = "0";
    title.style.display = "flex";
    title.style.justifyContent = "center";

    let textSpan = document.createElement("span");
    textSpan.style.display = "inline-block";
    textSpan.style.transition = "transform 1s ease-in-out";
    title.appendChild(textSpan);

    section.appendChild(title);
    sectionTitleBlock.appendChild(section);

    const text = "تسوق على حسب أقسامنا";
    let scaleUp = true;

    let style = document.createElement("style");
    style.innerHTML = `
      .main-title span::after {
        content: '';
        display: inline-block;
        width: 3px;
        height: 1em;
        background-color: #e11f1f;
        margin-left: 2px;
        animation: blink 1s step-end infinite;
        vertical-align: bottom;
      }
      @keyframes blink { 50% { opacity: 0; } }
    `;
    document.head.appendChild(style);

    function typeWriterLoop() {
      let i = 0;
      function type() {
        if (i <= text.length) {
          textSpan.innerText = text.substring(0, i);
          i++;
          setTimeout(type, 100);
        } else {
          setTimeout(erase, 1000);
        }
      }
      function erase() {
        if (i >= 0) {
          textSpan.innerText = text.substring(0, i);
          i--;
          setTimeout(erase, 50);
        } else {
          setTimeout(type, 500);
        }
      }
      type();
    }

    typeWriterLoop();

    setInterval(() => {
      textSpan.style.transform = scaleUp ? "scale(1.05)" : "scale(1)";
      scaleUp = !scaleUp;
    }, 2000);
  }
});





















// إنشاء البريلودر قبل أي حاجة
document.addEventListener("DOMContentLoaded", function() {
  // منع تمرير الصفحة أثناء البريلود
  document.body.style.overflow = "hidden";

  // إنشاء div للبريلودر
  const preloader = document.createElement("div");
  preloader.id = "preloader";
  preloader.style.position = "fixed";
  preloader.style.top = "0";
  preloader.style.left = "0";
  preloader.style.width = "100%";
  preloader.style.height = "100%";
  preloader.style.backgroundColor = "#f8f2e6";
  preloader.style.display = "flex";
  preloader.style.justifyContent = "center";
  preloader.style.alignItems = "center";
  preloader.style.zIndex = "9999";
  
  // إضافة اللوجو
  const logo = document.createElement("img");
  logo.src = "https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,onerror=redirect,format=auto/PrYrB/PHSNk13lpAEEcwTP5AZuxmqPxq6RsHWBgiPscMOp.png";
  logo.style.width = "150px";
  logo.style.animation = "pulse 1.2s infinite ease-in-out";
  
  preloader.appendChild(logo);
  document.body.prepend(preloader);

  // إضافة أنيميشن للوجو
  const style = document.createElement("style");
  style.innerHTML = `
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
  `;
  document.head.appendChild(style);

  // مدة البريلودر قبل إخفاؤه (مثلاً 3 ثواني)
  setTimeout(() => {
    preloader.style.transition = "opacity 0.5s ease";
    preloader.style.opacity = "0";
    setTimeout(() => {
      preloader.remove();
      document.body.style.overflow = "auto"; // إعادة التمرير
    }, 500);
  }, 3000); // 3000 = 3 ثواني
});









// إنشاء الحاوية
const sparkleContainer = document.createElement("div");
sparkleContainer.id = "sparkle-container";
document.body.appendChild(sparkleContainer);

// ألوان منسقة مع اللوجو (أحمر - أورنج)
const sparkleColors = ["#FF3B30", "#FF9500", "#FF5E3A", "#FFCC00"];

function createSparkle() {
  const sparkle = document.createElement("div");
  sparkle.classList.add("sparkle");

  // مكان البداية
  sparkle.style.left = Math.random() * 100 + "vw";

  // اللون
  sparkle.style.backgroundColor =
    sparkleColors[Math.floor(Math.random() * sparkleColors.length)];

  // مدة السقوط
  const duration = Math.random() * 3 + 2; // بين 2 و 5 ثواني
  sparkle.style.animationDuration = duration + "s";

  // تأخير عشوائي
  sparkle.style.animationDelay = Math.random() * 2 + "s";

  // حجم بسيط جدًا
  const size = Math.random() * 2 + 2;
  sparkle.style.width = size + "px";
  sparkle.style.height = size + "px";

  sparkleContainer.appendChild(sparkle);

  // إزالة بعد الانتهاء
  setTimeout(() => sparkle.remove(), (duration + 2) * 1000);
}

// إنشاء مستمر
setInterval(createSparkle, 100);