/* Add custom Js code below */ 
document.addEventListener("DOMContentLoaded", function () {
  // ✅ تطبيق الكود فقط على الصفحة الرئيسية
  const isHome = window.location.pathname === "/" || window.location.pathname.includes("index");
  if (!isHome) return;

  const header = document.querySelector(".index header");
  if (!header) return;


  // ✅ إنشاء الحاوية الأساسية
  const wrapper = document.createElement("div");
  Object.assign(wrapper.style, {
    position: "relative",
    zIndex: "-1",
    overflow: "hidden",
  });
  // ✅ إعداد الفيديو
  const video = document.createElement("video");
  Object.assign(video, {
    src: "https://a.top4top.io/m_3396y4alc1.mp4",
    autoplay: true,
    loop: true,
    muted: true,
    playsInline: true,
  });
  Object.assign(video.style, {
    display: "block",
    width: "100vw",
    height: "100vh",
    objectFit: "cover",
  });

  // ✅ إعداد الشريط المتحرك
  const banner = document.createElement("div");
  banner.className = "custom-moving-banner";
  const message = "🚚 توصيل مجاني عند الطلب بـ 550 ريال فما فوق 🤩 — ";
  banner.innerHTML = `<div class="scroll-wrapper">${message.repeat(30)}</div>`;
  Object.assign(banner.style, {
    backgroundColor: "#000",
    color: "#fff",
    fontSize: "14px",
    fontWeight: "bold",
    overflow: "hidden",
    whiteSpace: "nowrap",
    padding: "10px 0",
    direction: "ltr",
  });

  const scrollWrapper = banner.querySelector(".scroll-wrapper");
  Object.assign(scrollWrapper.style, {
    display: "inline-block",
    whiteSpace: "nowrap",
    animation: "scrollTextLTR 120s linear infinite",
  });

  // ✅ تعريف التحريك من اليسار لليمين
  const style = document.createElement("style");
  style.textContent = `
    @keyframes scrollTextLTR {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
  `;
  document.head.appendChild(style);

  // ✅ إضافة الفيديو والشريط إلى الصفحة
  wrapper.appendChild(video);
  wrapper.appendChild(banner);
  header.parentNode.insertBefore(wrapper, header.nextSibling);


  // ✅ استبدال العنوان 6B باللوقو
  document.querySelectorAll("h3").forEach((h3) => {
    if (h3.textContent.trim() === "6B") {
      const logo = document.createElement("img");
      Object.assign(logo, {
        src: "https://cdn.salla.sa/RAYXWX/czFoDoxbumRlODp7jsGxajeeXpsnGULIRrCdeM6b.png",
        alt: "شعار المتجر",
      });
      Object.assign(logo.style, {
        height: "100px",
        marginBottom: "40px",
      });
      h3.replaceWith(logo);
    }
  });
});



const banner = document.createElement("div");
banner.className = "whatsapp-moving-banner";
banner.innerHTML = `
  <div class="scroll-wrapper" style="max-width: 1200px; margin: 0 auto;">
    <a href="https://wa.me/966543214813" target="_blank"
       style="color: #fff; display: inline-flex; align-items: center; gap: 10px; text-decoration: none;">
      محتار وش يناسبك.. اسألنا وابشر🤩
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg"
           alt="WhatsApp" style="width: 20px; height: 20px;">
    </a>
  </div>
`;

// ✅ تنسيقات الشريط
Object.assign(banner.style, {
  backgroundColor: "green",
  color: "#fff",
  fontSize: "16px",
  fontWeight: "bold",
  overflow: "hidden",
  whiteSpace: "nowrap",
  padding: "10px",
  direction: "rtl",
  width: "100%",
  margin: "10px 0", // علشان يكون فيه مسافة فوق وتحت
  textAlign: "center",
});

// ✅ إضافة الشريط بعد العنصر اللي فيه .s-block__title
const target = document.querySelector(".s-block__title");
if (target && target.parentNode) {
  target.parentNode.insertBefore(banner, target.nextSibling);
}