(function () {
  window.addEventListener("load", function () {
    if (document.body.classList.contains("cart")) {
      const popupHTML = `
        <div id="discountPopup" style="
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,0.6);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;
          font-family: 'Tajawal', sans-serif;
          direction: rtl;">
          
          <div style="
            background: #fff;
            padding: 25px 20px;
            border-radius: 16px;
            text-align: center;
            width: 90%;
            max-width: 360px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
            position: relative;
            animation: fadeIn 0.4s ease;">
            
            <span id="closePopup" style="
              position: absolute;
              top: 10px;
              right: 15px;
              cursor: pointer;
              font-size: 22px;
              color: #555;">&times;</span>
            
            <h2 style="color:#222; font-size:20px; margin-bottom:5px;">
              خصم 10% على أول طلب 🎉
            </h2>
            <p style="color:#555; font-size:14px; margin:10px 0;">
              استخدم الكود التالي عند الدفع:
            </p>

            <div id="discountCode" style="
              background:#fdfdfd;
              border:2px dashed #000;
              padding:10px 15px;
              font-size:22px;
              font-weight:bold;
              letter-spacing:1px;
              margin:10px auto;
              display:inline-block;">
              AMA10
            </div>

            <div style="margin-top:15px;">
              <button id="copyBtn" style="
                background:#664187;
                color:#fff;
                border:none;
                padding:10px 25px;
                border-radius:6px;
                cursor:pointer;
                font-size:15px;">
                انسخ الكود
              </button>
            </div>
          </div>

          <style>
            @keyframes fadeIn {
              from {opacity: 0; transform: scale(0.95);}
              to {opacity: 1; transform: scale(1);}
            }
          </style>
        </div>
      `;
      document.body.insertAdjacentHTML("beforeend", popupHTML);

      const popup = document.getElementById("discountPopup");
      const closeBtn = document.getElementById("closePopup");
      const copyBtn = document.getElementById("copyBtn");
      const discountCode = document.getElementById("discountCode");

      closeBtn.onclick = function () {
        popup.remove();
      };

      copyBtn.onclick = function () {
        navigator.clipboard.writeText(discountCode.textContent.trim());
        copyBtn.textContent = "تم النسخ ✅";
        setTimeout(() => {
          copyBtn.textContent = "انسخ الكود";
        }, 1500);
      };
    }
  });
})();