(() => {
  const catEl = document.querySelector('.products-index[data-category]');
  if (!catEl) return;

  const raw = catEl.getAttribute('data-category') || '';
  if (!raw.includes('"id":1422444643')) return;

  const appInner = document.querySelector('.app-inner.has-pattern');
  if (!appInner) return;

  appInner.style.setProperty(
    '--pattern-bg',
    'url("https://cdn.files.salla.network/homepage/345024266/b26919e8-572c-4d9a-b4fb-b68aaeed917a.webp")',
    'important'
  );
  appInner.style.setProperty('--pattern-opacity', '0.3', 'important');
})();

document.addEventListener("DOMContentLoaded", function () {
  const featuresWrapper = document.querySelector(".product-features--wrapper");
  const featureItem = document.querySelector(".product-features-item");

  if (!featuresWrapper || !featureItem) return;

  // نخلي العنصر ياخد صف كامل
  const grid = featuresWrapper.querySelector(".grid");
  if (grid) {
    grid.classList.remove("grid-cols-3");
    grid.style.gridTemplateColumns = "1fr";
  }

  // نستبدل المحتوى
  featureItem.innerHTML = `
    <a href="https://jed.tulilab.net/%D9%83%D8%B1%D8%AA-%D8%A5%D9%87%D8%AF%D8%A7%D8%A1/c135858858"
       style="
         display:block;
         width:100%;
         text-align:center;
         text-decoration:none;
         color:inherit;
         line-height:1.8;
       ">
      سعر البوكيه لا يشمل كرت الإهداء، لإضافة كرت يرجى الضغط
      <span style="text-decoration:underline;">هُنا</span>
    </a>
  `;

  featuresWrapper.style.display = "block";
  featureItem.style.display = "block";
  featureItem.style.justifyContent = "center";
  featureItem.style.textAlign = "center";
});

//popup

document.addEventListener("DOMContentLoaded", function () {
  const RIYADH_STORE_URL = "https://tulilab.net/";
  const JEDDAH_STORE_URL = "https://jed.tulilab.net/";

  const currentHost = window.location.hostname.replace(/^www\./, "").toLowerCase();
  const currentPath = window.location.pathname;

  const isRiyadhStore = currentHost === "tulilab.net";
  const isJeddahStore = currentHost === "jed.tulilab.net";

  if (!isRiyadhStore && !isJeddahStore) return;

  const isHomePage =
    currentPath === "/" ||
    currentPath === "" ||
    currentPath === "/home";

  if (!isHomePage) return;

  const HIDE_FOREVER_KEY = "tulilab_branch_popup_do_not_show_again";
  const HIDE_SESSION_KEY = "tulilab_branch_popup_hide_this_session";

  if (localStorage.getItem(HIDE_FOREVER_KEY) === "1") return;
  if (sessionStorage.getItem(HIDE_SESSION_KEY) === "1") return;

  const currentBranchName = isRiyadhStore ? "الرياض" : "جدة";

  function injectStyles() {
    if (document.getElementById("tulilab-branch-popup-style")) return;

    const style = document.createElement("style");
    style.id = "tulilab-branch-popup-style";
    style.innerHTML = `
      .tulilab-branch-popup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(255, 252, 236, 0.72);
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
      }

      .tulilab-branch-popup {
        width: 100%;
        max-width: 460px;
        background: #fffcec;
        border-radius: 22px;
        padding: 28px 20px 20px;
        box-shadow: 0 25px 80px rgba(0,0,0,0.16);
        text-align: center;
        direction: rtl;
        position: relative;
        background-image:url(https://cdn.files.salla.network/homepage/345024266/8b8d4666-9b62-405b-8b85-8b0125a07c6d.webp);
        background-size:70%;
        border:3px dashed #D74F90;
      }

      .tulilab-branch-close {
        position: absolute;
        top: 14px;
        left: 14px;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 999px;
        background: #D74F90;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
      }

      .tulilab-branch-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #f7f7f7;
        color: #D74F90;
        font-size: 13px;
        font-weight: 700;
        border: 1px solid #e9e9e9;
        background-image:url(https://cdn.files.salla.network/homepage/345024266/8b8d4666-9b62-405b-8b85-8b0125a07c6d.webp);
        background-size:10%;
      }

      .tulilab-branch-title {
        margin: 0 0 8px;
        font-size: 26px;
        line-height: 1.4;
        color: #D74F90;
        font-weight: 700;
      }

      .tulilab-branch-text {
        margin: 0 0 18px;
        font-size: 15px;
        line-height: 1.9;
        color: #666;
      }

      .tulilab-branch-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .tulilab-branch-btn {
        min-height: 52px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        padding: 0 16px;
        transition: 0.2s ease;
        border: 1px solid #D74F90;
      }

      .tulilab-branch-btn.primary {
        background: #D74F90;
        color: #fff;
      }

      .tulilab-branch-btn.secondary {
        background: transperent;
        color: #D74F90;
      }

      .tulilab-branch-btn:hover {
        transform: translateY(-1px);
        opacity: 0.96;
      }

      .tulilab-branch-btn.current-branch {
        position: relative;
      }

      .tulilab-branch-btn.current-branch::after {
        content: "الفرع الحالي";
        margin-inline-start: 8px;
        font-size: 12px;
        opacity: 0.85;
      }

      .tulilab-branch-current-note {
        margin-top: 14px;
        font-size: 13px;
        color: #888;
      }

      .tulilab-branch-checkbox-wrap {
        margin-top: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        color: #444;
      }

      .tulilab-branch-checkbox-wrap input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      .tulilab-branch-checkbox-wrap label {
        cursor: pointer;
      }

      @media (max-width: 480px) {
        .tulilab-branch-popup {
          padding: 24px 16px 18px;
          border-radius: 18px;
        }

        .tulilab-branch-title {
          font-size: 23px;
        }

        .tulilab-branch-text {
          font-size: 14px;
        }
      }
    `;
    document.head.appendChild(style);
  }

  function rememberHiddenChoice(overlay) {
    const checkbox = overlay.querySelector("#tulilab-do-not-show-again");
    if (checkbox && checkbox.checked) {
      localStorage.setItem(HIDE_FOREVER_KEY, "1");
    }
  }

  function closePopup(overlay) {
    rememberHiddenChoice(overlay);
    sessionStorage.setItem(HIDE_SESSION_KEY, "1");
    overlay.remove();
  }

  function createPopup() {
    injectStyles();

    const overlay = document.createElement("div");
    overlay.className = "tulilab-branch-popup-overlay";

    const riyadhClass = isRiyadhStore
      ? "tulilab-branch-btn primary current-branch"
      : "tulilab-branch-btn primary";

    const jeddahClass = isJeddahStore
      ? "tulilab-branch-btn secondary current-branch"
      : "tulilab-branch-btn secondary";

    overlay.innerHTML = `
      <div class="tulilab-branch-popup">
        <button class="tulilab-branch-close" type="button" aria-label="إغلاق">×</button>

        <div class="tulilab-branch-badge">
          أنت الآن في فرع ${currentBranchName}
        </div>

        <h3 class="tulilab-branch-title">اختر الفرع المناسب لطلبك</h3>

        <p class="tulilab-branch-text">
          يمكنك المتابعة في الفرع الحالي أو الانتقال إلى الفرع الآخر حسب المدينة التي تريد الطلب منها.
        </p>

        <div class="tulilab-branch-buttons">
          <a class="${riyadhClass}" href="${RIYADH_STORE_URL}" data-branch="riyadh">
            متجر الرياض
          </a>
          <a class="${jeddahClass}" href="${JEDDAH_STORE_URL}" data-branch="jeddah">
            متجر جدة
          </a>
        </div>

        <div class="tulilab-branch-current-note">
          الفرع الحالي: ${currentBranchName}
        </div>

        <div class="tulilab-branch-checkbox-wrap">
          <input type="checkbox" id="tulilab-do-not-show-again" />
          <label for="tulilab-do-not-show-again">لا تظهر هذه النافذة مرة أخرى</label>
        </div>
      </div>
    `;

    document.body.appendChild(overlay);

    const closeBtn = overlay.querySelector(".tulilab-branch-close");
    closeBtn.addEventListener("click", function () {
      closePopup(overlay);
    });

    overlay.addEventListener("click", function (e) {
      if (e.target === overlay) {
        closePopup(overlay);
      }
    });

    const branchLinks = overlay.querySelectorAll("[data-branch]");
    branchLinks.forEach(function (link) {
      link.addEventListener("click", function (e) {
        const selectedBranch = link.getAttribute("data-branch");
        const isCurrentBranchSelected =
          (selectedBranch === "riyadh" && isRiyadhStore) ||
          (selectedBranch === "jeddah" && isJeddahStore);

        rememberHiddenChoice(overlay);
        sessionStorage.setItem(HIDE_SESSION_KEY, "1");

        if (isCurrentBranchSelected) {
          e.preventDefault();
          overlay.remove();
          return;
        }
      });
    });
  }

  setTimeout(createPopup, 900);
});