document.addEventListener("DOMContentLoaded", () => {
  const section = document.querySelector("#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(3)");
  if (!section) return;

  const menuHTML = `
  <div class="side-menu">
  <ul>
    <li><a href="/%D8%A7%D9%84%D9%85%D9%81%D8%A7%D8%B1%D8%B4/c1489028710">المفارش</a></li>
    <li><a href="/%D8%A7%D9%84%D9%84%D8%A8%D8%A7%D8%AF/c334902026">اللباد</a></li>
    <li><a href="/%D8%A7%D9%84%D9%85%D8%AE%D8%AF%D8%A7%D8%AA/c159813653">المخدات</a></li>
    <li><a href="/%D8%A7%D8%B1%D9%88%D8%A7%D8%A8-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AD%D9%85%D8%A7%D9%85-%D9%88%D8%A7%D9%84%D9%85%D9%86%D8%A7%D8%B4%D9%81/c1358044177">الأرواب</a></li>
    <li><a href="/%D8%A7%D9%84%D9%85%D9%86%D8%A7%D8%B4%D9%81/c1317107996">المناشف</a></li>
    <li><a href="/%D9%88%D8%A7%D9%82%D9%8A-%D9%85%D8%B1%D8%AA%D8%A8%D8%A9/c1259739649">عازل المرتبة</a></li>
    <li><a href="/offers">البكجات والعروض</a></li>
  </ul>
</div>


  `;
  function updateMenu() {
    const existingMenu = section.querySelector(".side-menu");

    if (window.innerWidth >= 1024) {
      if (!existingMenu) {
        section.style.display = "flex";
        section.style.alignItems = "flex-start";
        section.style.justifyContent = "flex-start";
        section.style.gap = "20px";
        section.style.flexWrap = "wrap";
        section.insertAdjacentHTML("afterbegin", menuHTML);
      }
    } else {

      if (existingMenu) existingMenu.remove();
      section.style.display = "";
      section.style.alignItems = "";
      section.style.justifyContent = "";
      section.style.gap = "";
      section.style.flexWrap = "";
    }
  }

  updateMenu();

  window.addEventListener("resize", updateMenu);
});

document.addEventListener("DOMContentLoaded", () => {
  const footer = document.querySelector("footer.store-footer");
  if (!footer) return;

  const logoHTML = `
    <div class="logo-container">
      <div class="logo-text">

        <p>جازل افرش بيتك على ذوقك<br>بجودة تستحقها وراحة بلا حدود</p>
      </div>
      <div class="separator"></div>
      <img src="https://i.postimg.cc/50LT8fmx/Asset-1.png" alt="Jazzil Home Logo" class="logo-image">
    </div>
  `;

  footer.insertAdjacentHTML("afterbegin", logoHTML);

  const logoContainer = footer.querySelector(".logo-container");
  if (logoContainer) {
    footer.style.display = "flex";
    footer.style.flexDirection = "column";
    footer.style.alignItems = "center";

    // Make logo bigger
    logoContainer.style.transform = "scale(1.4)";
    logoContainer.style.transformOrigin = "center";

    // Handle responsive stacking
    const adjustLayout = () => {
      if (window.innerWidth <= 768) {
        logoContainer.style.flexDirection = "column";
        logoContainer.style.textAlign = "center";
        logoContainer.style.gap = "0.5rem";
      } else {
        logoContainer.style.flexDirection = "row";
        logoContainer.style.gap = "1rem";
      }
      logoContainer.style.display = "flex";
      logoContainer.style.alignItems = "center";
      logoContainer.style.justifyContent = "center";
    };

    // Apply layout immediately + on resize
    adjustLayout();
    window.addEventListener("resize", adjustLayout);
  }
});
document.addEventListener("DOMContentLoaded", function () {
  const section = document.querySelector("#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(20)");
  if (!section) return;

  // Add the class only once
  section.classList.add("centered-title");

  const container = section.querySelector(".container");
  if (!container) return;

  // Avoid inserting if it already exists
  if (!container.querySelector(".s-block__title.angel-products-title")) {
    const newDiv = document.createElement("div");
    newDiv.className = "s-block__title angel-products-title";
    newDiv.innerHTML = `
      <div class="title-wrapper flex flex-col gap-4 items-center justify-center">
        <div class="flex flex-col w-auto">
          <h2 class="w-full da-cp">لية تختار جازل</h2>
          <p class="w-full !p-0 text-gray-400 da-ts"></p>
        </div>
      </div>
    `;

    // Insert above banner
    const banner = container.querySelector(".banner");
    if (banner) {
      container.insertBefore(newDiv, banner);
    } else {
      container.appendChild(newDiv);
    }
  }
});
document.addEventListener("DOMContentLoaded", function() {
    // Mapping of page URLs to their banner image links
    const bannerMap = {
        "https://jazzill.com/%D8%A7%D9%84%D9%85%D9%81%D8%A7%D8%B1%D8%B4/c1489028710": "https://i.postimg.cc/bvkWJwZZ/3.webp",
        "https://jazzill.com/%D8%A7%D9%84%D9%84%D8%A8%D8%A7%D8%AF/c334902026": "https://i.postimg.cc/1zw2t384/4.webp",
        "https://jazzill.com/%D8%A7%D9%84%D9%85%D8%AE%D8%AF%D8%A7%D8%AA/c159813653": "https://i.postimg.cc/DzLHZwS5/5.webp",
        "https://jazzill.com/%D8%A7%D8%B1%D9%88%D8%A7%D8%A8-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AD%D9%85%D8%A7%D9%85-%D9%88%D8%A7%D9%84%D9%85%D9%86%D8%A7%D8%B4%D9%81/c1358044177": "https://i.postimg.cc/3wmVRxk1/6.webp",
        "https://jazzill.com/%D8%A7%D9%84%D9%85%D9%86%D8%A7%D8%B4%D9%81/c1317107996": "https://i.postimg.cc/FK38RHYD/7.webp",
        "https://jazzill.com/%D9%88%D8%A7%D9%82%D9%8A-%D9%85%D8%B1%D8%AA%D8%A8%D8%A9/c1259739649": "https://i.postimg.cc/cJw2HLv7/8.webp",
        "https://jazzill.com/offers": "https://i.postimg.cc/FK38RHYf/10.webp"

    };

    const currentURL = window.location.href;

    const bannerImage = bannerMap[currentURL];

    if (bannerImage) {

        const targetSection = document.querySelector(".cat-square-banner.mt-4");

        if (targetSection && !document.querySelector(".s-block--fixed-banner")) {
            // Create the banner section
            const newSection = document.createElement("section");
            newSection.className = "s-block s-block--fixed-banner wide-placeholder";

            newSection.innerHTML = `
                <div class="container">
                    <a href="https://jazzill.com/offers" class="banner banner--fixed overflow-hidden" aria-label="Banner">
                        <img width="100%" class="lazy loaded"
                             src="${bannerImage}"
                             data-src="${bannerImage}"
                             alt="" loading="lazy">
                    </a>
                </div>
            `;

            // Insert it before the target section
            targetSection.parentNode.insertBefore(newSection, targetSection);
        }
    }
});