/* 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://jjksa.com/ar" class="cta-btn">تسوق الآن</a>
  `;

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





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

  // ✅ 1. التحقق من الصفحة الرئيسية فقط
  const isHome = document.body.classList.contains("home") || window.location.pathname === "/";
  if (!isHome) return; // لو مش الصفحة الرئيسية، نخرج بدون تنفيذ أي حاجة

  /* 2️⃣ تحميل خط Beiruti */
  const fontLink = document.createElement("link");
  fontLink.rel = "stylesheet";
  fontLink.href =
    "https://fonts.googleapis.com/css2?family=Beiruti:wght@300;400;600;700&display=swap";
  document.head.appendChild(fontLink);

  /* 3️⃣ أول سكشن البانر الرئيسي */
  let firstBanner = document.querySelector("section.s-block");

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

    let title = document.createElement("h2");
    title.className = "main-title";
    title.innerText = "تسوق على حسب اقسامنا";

    /* 4️⃣ تطبيق الخط مباشرة */
    title.style.fontFamily = "'Beiruti', sans-serif";
    title.style.fontWeight = "700";

    section.appendChild(title);
    firstBanner.parentNode.insertBefore(section, firstBanner.nextSibling);
  }
});







(function () {
  // إنشاء البريلودر فورًا
  const preloader = document.createElement("div");
  preloader.id = "salla-preloader";
  preloader.innerHTML = `
    <img src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/QRxGY/lMtR0rpFa3wl0EPmuIs9oORqzCX9VXg3P9HxHvr6.png" alt="Loading">
  `;
  document.documentElement.appendChild(preloader);

  // إخفاؤه بعد اكتمال التحميل
  const hidePreloader = () => {
    preloader.classList.add("hidden");
    setTimeout(() => preloader.remove(), 100); // إزالة العنصر بسرعة بعد الاختفاء
  };

  // أفضل توقيت لسلة
  window.addEventListener("load", () => {
    setTimeout(hidePreloader, 1000); // 1000ms = ثانية واحدة قبل الاختفاء
  });
})();












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

  const banners = document.querySelectorAll(
    ".s-block--banners .banner-entry"
  );

  banners.forEach((banner) => {

    banner.addEventListener("touchstart", press, { passive: true });
    banner.addEventListener("mousedown", press);

    banner.addEventListener("touchend", release, { passive: true });
    banner.addEventListener("mouseup", release);
    banner.addEventListener("mouseleave", release);

    function press() {
      banner.style.transform = "scale(0.97)";
    }

    function release() {
      banner.style.transform = "";
    }
  });
});








// اختيار div البانرات
const bannersGrid = document.querySelector('.grid.md\\:grid-cols-3');

if (bannersGrid) {

    // CSS شامل للـ grid والنصوص والهافر
    const style = document.createElement('style');
    style.textContent = `
        /* Grid Responsive */
        .grid.md\\:grid-cols-3 {
            display: grid !important;
            gap: 10px !important;
        }

        /* الموبايل: 2 كروت */
        @media (max-width: 767px) {
            .grid.md\\:grid-cols-3 {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }

        /* الديسكتوب: 3 كروت */
        @media (min-width: 768px) {
            .grid.md\\:grid-cols-3 {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 8px !important;
            }
        }

        /* كروت البانرات */
        .banner-entry {
            position: relative;
            height: 200px;
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center; /* تمركز أفقي للنص */
            align-items: center;     /* تمركز عمودي للنص */
            text-decoration: none;
            color: white;
            overflow: hidden;
            border-radius: 8px;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        /* النصوص داخل الكروت */
        .banner-entry__text {
            position: relative;
            z-index: 2;
            text-align: center;
            font-size: 1rem; /* مقاس موحد مناسب للجوال والديسكتوب */
            font-weight: bold;
            line-height: 1.2;
            padding: 0 10px;
        }

        /* Overlay يختفي بشكل افتراضي */
        .banner-entry::before {
            content: "";
            position: absolute;
            top:0; left:0; right:0; bottom:0;
            background: rgba(0,0,0,0); /* بدون غمامة افتراضية */
            transition: background 0.3s ease, transform 0.3s ease;
            z-index:1;
        }

        /* Hover / Active effect */
        .banner-entry:hover::before,
        .banner-entry:active::before {
            background: rgba(0,0,0,0.2); /* الغمامة تظهر عند Hover/Click */
            transform: scale(1.05); /* تكبير خفيف للبانر */
        }

        .banner-entry:hover,
        .banner-entry:active {
            transform: scale(1.03);
            filter: brightness(1.2); /* الصورة تتوهج */
        }
    `;
    document.head.appendChild(style);
}




const style = document.createElement('style');
style.textContent = `
    /* الكارد الخارجي */
    .s-products-slider-card .s-product-card-entry {
        border: 1px solid rgba(0,0,0,0.1) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
        position: relative !important;
        background-color: #fff !important;
    }

    /* صورة الكارد */
    .s-products-slider-card .s-product-card-image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        transition: transform 0.4s ease, filter 0.4s ease !important;
    }

    /* نصوص المحتوى */
    .s-products-slider-card .s-product-card-content {
        padding: 10px 12px !important;
        text-align: center !important;
    }

    .s-products-slider-card .s-product-card-content-title a {
        color: #111 !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        display: block !important;
        margin-bottom: 5px !important;
        transition: color 0.3s ease !important;
    }

    /* Hover effect */
    .s-products-slider-card .s-product-card-entry:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 15px 25px rgba(0,0,0,0.2) !important;
        border-color: rgba(0,0,0,0.3) !important;
    }

    .s-products-slider-card .s-product-card-entry:hover img {
        transform: scale(1.07) !important;
        filter: brightness(1.15) !important;
    }

    .s-products-slider-card .s-product-card-entry:hover .s-product-card-content-title a {
        color: #000 !important;
    }

    /* زر الإضافة للسلة */
    .s-products-slider-card .s-product-card-content-footer button:hover {
        transform: scale(1.05) !important;
    }

    /* Promotion badge */
    .s-products-slider-card .s-product-card-promotion-title {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        background: rgba(255,255,255,0.9) !important;
        color: #111 !important;
        font-size: 0.75rem !important;
        font-weight: bold !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        z-index: 2 !important;
        transition: background 0.3s ease, color 0.3s ease !important;
    }

    .s-products-slider-card .s-product-card-entry:hover .s-product-card-promotion-title {
        background: #111 !important;
        color: #fff !important;
    }
`;
document.head.appendChild(style);






// 1️⃣ استبدال النص باللوجو
document.addEventListener("DOMContentLoaded", function() {
    // حدد العنصر اللي فيه النص "JK"
    const jkElement = document.querySelector('.store-footer__inner a.flex.items-center h3');

    if (jkElement) {
        // انشئ عنصر img جديد
        const logo = document.createElement('img');
        logo.src = "https://cdn.salla.sa/QRxGY/LgzcTMGnH3dwxzotaqEQQcplfNyjzUdxt6HXbeK8.png";
        logo.alt = "JK Logo";
        logo.classList.add("footer-logo");

        // استبدل النص باللوجو
        jkElement.parentNode.replaceChild(logo, jkElement);

        // اضف كلاس للحركة المستمرة (اختياري)
        logo.classList.add("float");
    }
});





















// إنشاء عنصر خاص بالواتساب باستخدام Shadow DOM
const whatsappWrapper = document.createElement('div');
whatsappWrapper.id = 'whatsapp-wrapper';
document.body.appendChild(whatsappWrapper);

// إنشاء Shadow DOM
const shadow = whatsappWrapper.attachShadow({ mode: 'open' });

// HTML و CSS داخل Shadow DOM
shadow.innerHTML = `
    <style>
        #whatsappBtn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: #25D366;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 9999;
            cursor: pointer;
            transform: translateY(100px);
            opacity: 0;
            transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.3s ease;
        }

        #whatsappBtn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 18px rgba(0,0,0,0.4);
        }

        #whatsappBtn svg {
            width: 28px;
            height: 28px;
        }

        #whatsappBtn.show {
            transform: translateY(0);
            opacity: 1;
        }

        /* استجابة للجوال */
        @media (max-width: 768px) {
            #whatsappBtn {
                width: 50px;
                height: 50px;
                bottom: 15px;
                right: 15px;
            }

            #whatsappBtn svg {
                width: 24px;
                height: 24px;
            }
        }
    </style>

    <a id="whatsappBtn" href="https://wa.me/966558237284" target="_blank" aria-label="واتساب">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="white">
            <path d="M27.281 4.65c-2.994-3-6.975-4.65-11.219-4.65-8.738 0-15.85 7.112-15.85 15.856 0 2.794 0.731 5.525 2.119 7.925l-2.25 8.219 8.406-2.206c2.319 1.262 4.925 1.931 7.575 1.931h0.006c0 0 0 0 0 0 8.738 0 15.856-7.113 15.856-15.856 0-4.238-1.65-8.219-4.644-11.219zM16.069 29.05v0c-2.369 0-4.688-0.637-6.713-1.837l-0.481-0.288-4.987 1.306 1.331-4.863-0.313-0.5c-1.325-2.094-2.019-4.519-2.019-7.012 0-7.269 5.912-13.181 13.188-13.181 3.519 0 6.831 1.375 9.319 3.862 2.488 2.494 3.856 5.8 3.856 9.325-0.006 7.275-5.919 13.188-13.181 13.188zM23.294 19.175c-0.394-0.2-2.344-1.156-2.706-1.288s-0.625-0.2-0.894 0.2c-0.262 0.394-1.025 1.288-1.256 1.556-0.231 0.262-0.462 0.3-0.856 0.1s-1.675-0.619-3.188-1.969c-1.175-1.05-1.975-2.35-2.206-2.744s-0.025-0.613 0.175-0.806c0.181-0.175 0.394-0.463 0.594-0.694s0.262-0.394 0.394-0.662c0.131-0.262 0.069-0.494-0.031-0.694s-0.894-2.15-1.219-2.944c-0.319-0.775-0.65-0.669-0.894-0.681-0.231-0.012-0.494-0.012-0.756-0.012s-0.694 0.1-1.056 0.494c-0.363 0.394-1.387 1.356-1.387 3.306s1.419 3.831 1.619 4.1c0.2 0.262 2.794 4.269 6.769 5.981 0.944 0.406 1.681 0.65 2.256 0.837 0.95 0.3 1.813 0.256 2.494 0.156 0.762-0.113 2.344-0.956 2.675-1.881s0.331-1.719 0.231-1.881c-0.094-0.175-0.356-0.275-0.756-0.475z"/>
        </svg>
    </a>
`;

// إضافة الحركة بعد تحميل الصفحة
const whatsappBtn = shadow.getElementById('whatsappBtn');
window.addEventListener('load', () => {
    setTimeout(() => {
        whatsappBtn.classList.add('show');
    }, 500);
});














// إنشاء الحاوية الخاصة بالتساقط
const dropContainer = document.createElement("div");
dropContainer.id = "drop-container";
document.body.appendChild(dropContainer);

// عدد القطرات التي يتم إنشاؤها
const numberOfDrops = 60;

function createDrop() {
  const drop = document.createElement("div");
  drop.classList.add("drop");

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

  // مدة و تأخير الحركة
  const duration = Math.random() * 5 + 3; // بين 3 و 8 ثواني
  const delay = Math.random() * 5;

  drop.style.animationDuration = `${duration}s`;
  drop.style.animationDelay = `${delay}s`;

  // إضافته للحاوية
  dropContainer.appendChild(drop);

  // إزالة العنصر بعد انتهاء الأنيميشن
  setTimeout(() => {
    drop.remove();
  }, (duration + delay) * 1000);
}

// تكرار الإنشاء
setInterval(() => {
  createDrop();
}, 200);