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

  /* ===============================
     Glass header scroll effect
     =============================== */
  function glassHeaderScroll() {
    if (window.scrollY > 40) {
      document.body.classList.add("header-scrolled");
    } else {
      document.body.classList.remove("header-scrolled");
    }
  }

  glassHeaderScroll();
  window.addEventListener("scroll", glassHeaderScroll, { passive: true });


  /* ===============================
     Desktop menu with dropdown (updated links)
     =============================== */
  function createDesktopMenu() {
    const mainnav = document.querySelector("header.store-header #mainnav");
    if (!mainnav) return;

    const oldMenu = mainnav.querySelector(".desktop-menu-fix");

    if (window.innerWidth < 769) {
      if (oldMenu) oldMenu.remove();
      return;
    }

    if (oldMenu) return;

    const menu = document.createElement("nav");
    menu.className = "desktop-menu-fix";

    menu.innerHTML = `
      <a href="/" class="desktop-menu-link">الرئيسية</a>

      <div class="desktop-menu-item has-dropdown">
        <a href="/categories" class="desktop-menu-link">المتجر</a>

        <div class="desktop-dropdown">
          <a href="https://som-cares.com/category/KRQmPq">منتجات البشرة</a>
          <a href="https://som-cares.com/category/eQXjad">منتجات الشعر</a>
          <a href="https://som-cares.com/category/wAKZom">منتجات الجسم</a>
          <a href="https://som-cares.com/category/OyoWXg">مستحضرات المكياج</a>
          <a href="https://som-cares.com/category/dbrEyX">العطور</a>
          <a href="https://som-cares.com/offers">العروض</a>
          <a href="https://som-cares.com/category/vAdxjl">الأكثر مبيعًا</a>
          <a href="https://som-cares.com/category/PDANzQ">وصل حديثًا</a>
          <a href="https://som-cares.com/category/QlqbEo">مجموعة الرجل</a>
          <a href="https://som-cares.com/category/lvQlwx">مستلزمات الأطفال</a>
          <a href="https://som-cares.com/category/rRPlOp">مجموعات العناية</a>
        </div>
      </div>

      <a href="/offers" class="desktop-menu-link">تخفيضات</a>
      <a href="/blog" class="desktop-menu-link">مقالات</a>
    `;

    mainnav.appendChild(menu);
  }

  createDesktopMenu();
  setTimeout(createDesktopMenu, 500);
  setTimeout(createDesktopMenu, 1500);

  window.addEventListener("resize", createDesktopMenu);


  /* ===============================
     Dual images side by side on mobile
     =============================== */
  function fixDualImagesOnMobile() {
    const allElements = document.querySelectorAll("*");

    allElements.forEach(function (el) {
      const tagName = el.tagName.toLowerCase();

      if (!tagName.startsWith("salla-dual-image-links")) return;
      if (!el.shadowRoot) return;

      const shadow = el.shadowRoot;

      if (shadow.querySelector("#fix-dual-images-mobile")) return;

      const style = document.createElement("style");
      style.id = "fix-dual-images-mobile";

      style.innerHTML = `
        @media (max-width: 768px) {
          .section-container {
            padding-left: 12px !important;
            padding-right: 12px !important;
          }

          .images-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px !important;
            align-items: stretch !important;
          }

          .image-link {
            width: 100% !important;
            display: block !important;
          }

          .image-link img {
            width: 100% !important;
            height: auto !important;
            display: block !important;
            object-fit: cover !important;
            border-radius: 12px !important;
          }
        }
      `;

      shadow.appendChild(style);
    });
  }

  fixDualImagesOnMobile();
  setInterval(fixDualImagesOnMobile, 500);
  window.addEventListener("load", fixDualImagesOnMobile);
  window.addEventListener("resize", fixDualImagesOnMobile);

});