(function () {
  "use strict";

  var STORAGE_KEY = "atheeth_national_day_popup_shown";
  var CTA_URL = "https://atheeth22.com/ar/%D8%B9%D8%B1%D9%88%D8%B6-%D8%A7%D9%84%D9%8A%D9%88%D9%85-%D8%A7%D9%84%D9%88%D8%B7%D9%86%D9%8A/c1824628250"; // 🔗 Change to the offer/collection page
  var IMAGE_URL = "https://i.ibb.co/yjgCN0j/image.png";

  console.log("[Atheeth Popup] script loaded");

  function buildPopup() {
    if (document.querySelector(".atheeth-overlay")) {
      console.log("[Atheeth Popup] already on page, skipping build");
      return;
    }

    var style = document.createElement("style");
    style.textContent = `
      .atheeth-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,.6) !important;
        z-index: 2147483647 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0;
        transition: opacity .3s ease;
        padding: 16px;
        box-sizing: border-box;
        font-family: 'Cairo', Tahoma, sans-serif;
      }
      .atheeth-overlay.show { opacity: 1; }

      .atheeth-popup {
        position: relative;
        width: 100%;
        max-width: 420px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0,0,0,.4);
        transform: scale(.9);
        transition: transform .3s ease;
        background: #f4dcd2;
      }
      .atheeth-overlay.show .atheeth-popup { transform: scale(1); }

      .atheeth-popup img {
        display: block;
        width: 100%;
        height: auto;
        cursor: pointer;
      }

      .atheeth-close {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255,255,255,.9);
        border: none;
        font-size: 18px;
        line-height: 32px;
        cursor: pointer;
        color: #3f5a40;
        z-index: 2;
      }

      .atheeth-cta {
        display: block;
        text-align: center;
        background: #3f5a40;
        color: #fff !important;
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
        padding: 14px;
      }
      .atheeth-cta:hover { background: #34492f; }
    `;
    document.head.appendChild(style);

    var overlay = document.createElement("div");
    overlay.className = "atheeth-overlay";
    overlay.innerHTML = `
      <div class="atheeth-popup">
        <button class="atheeth-close" aria-label="إغلاق">×</button>
        <a href="${CTA_URL}" aria-label="تسوقي الآن">
          <img src="${IMAGE_URL}" alt="عروض اليوم الوطني من أثيث" />
        </a>
        <a href="${CTA_URL}" class="atheeth-cta">تسوقي الآن ⌃</a>
      </div>
    `;
    document.body.appendChild(overlay);

    requestAnimationFrame(function () {
      overlay.classList.add("show");
    });

    function closePopup() {
      overlay.classList.remove("show");
      setTimeout(function () { overlay.remove(); }, 300);
      localStorage.setItem(STORAGE_KEY, "1");
    }

    overlay.querySelector(".atheeth-close").addEventListener("click", closePopup);
    overlay.addEventListener("click", function (e) {
      if (e.target === overlay) closePopup();
    });
    overlay.querySelectorAll("a").forEach(function (a) {
      a.addEventListener("click", function () {
        localStorage.setItem(STORAGE_KEY, "1");
      });
    });

    console.log("[Atheeth Popup] popup rendered");
  }

  function init() {
    if (localStorage.getItem(STORAGE_KEY)) {
      console.log("[Atheeth Popup] already shown before (localStorage flag set) — skipping");
      return;
    }
    buildPopup();
  }

  // Manual test trigger — open your store, press F12, go to Console, type:
  //   atheethShowPopup()
  // This forces the popup to show even if localStorage says it was already seen.
  window.atheethShowPopup = function () {
    localStorage.removeItem(STORAGE_KEY);
    buildPopup();
  };

  if (document.readyState === "complete" || document.readyState === "interactive") {
    setTimeout(init, 800);
  } else {
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(init, 800);
    });
  }
})();