/* Add custom Js styles below */ 
function createPopup({ pageKey, image, title, subtitle, buttonText, buttonLink }) {
  if (window.sessionStorage.getItem(pageKey) === "shown") return;

  const styles = document.createElement("style");
  styles.innerHTML = `
    #popup {
      padding: 15px;
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      backdrop-filter: blur(10px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 222;
    }
    .popup-container {
      width: 450px;
      max-width: 100%;
      padding: 0;
      background-size: cover;
      background-position: center;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
    }
    .popup-img {
      display: flex;
      background-color:#fff ;
      justify-content: center;
    }

        

     .popup-img img {
      width: 50%;
      border-radius:50%;
      display: block;
    }
    
    .popup-content {
      background: #fff;
      padding: 20px;
      text-align: center;
    }
    .popup-title {
      font-size: 22px;
      font-weight: bold;
      color: #444;
      margin-bottom: 10px;
    }
    .popup-sub {
      font-size: 16px;
      color: #777;
      margin-bottom: 15px;
    }
    
    .highlight {
      color: #ff0000;
      font-weight: bold;
      font-size: 26px;
    }

    .popup-btn {
      display: inline-block;
      padding: 12px 20px;
      background: #ffcc00;
      color: #000;
      font-size: 17px;
      font-weight: bold;
      border-radius: 8px;
      text-decoration: none;
      cursor: pointer;
    }
    .close-pop {
      position: absolute;
      top: 8px;
      right: 12px;
      font-size: 22px;
      cursor: pointer;
      color: #000;
      font-weight: bold;
    }
  `;

  const popup = document.createElement("div");
  popup.id = "popup";
  popup.innerHTML = `
    <div class="popup-container">
    
      <div class="close-pop">×</div>

      <div class="popup-img">
        <img src="${image}" />
      </div>

      <div class="popup-content">
        <div class="popup-title">${title}</div>
        <div class="popup-sub">${subtitle}</div>

        <a href="${buttonLink}" class="popup-btn">
          ${buttonText}
        </a>
      </div>

    </div>
  `;

  document.head.append(styles);
  document.body.append(popup);

  document.addEventListener("click", (e) => {
    if (e.target.classList.contains("close-pop")) {
      popup.remove();
    }
  });

  sessionStorage.setItem(pageKey, "shown");
}

// -------------------------------------------
//  Popup 1 
// -------------------------------------------

document.addEventListener("DOMContentLoaded", () => {
  if (document.body.classList.contains("index")) {
    createPopup({
      pageKey: "popup_home",
      image: "https://i.postimg.cc/PfMgLYcM/Sy0h8PF2yy6f_VDFds_Ytrdu1Jbv_TEUrtr_M4gs5Kla.webp",
      title: `
        عند إضافة إلى السلة صندوق الحبوب الدوار<br>
        يحصل العميل على خصم 
        <span class="highlight">30%</span><br>
        لسلة قمامة معلقة
      `,
      subtitle: "",
      buttonText: "تسوق الآن",
      buttonLink: "https://yellow-store.com/%D9%85%D9%88%D8%B2%D8%B9-%D8%A7%D9%84%D8%AD%D8%A8%D9%88%D8%A8/p368957017?from=search-bar"
    });
  }
});


// -------------------------------------------
//  Popup 2 
// -------------------------------------------

document.addEventListener("DOMContentLoaded", () => {
  if (window.location.href.includes("p368957017")) {
    createPopup({
      pageKey: "popup_product",
      image: "https://i.postimg.cc/FFxMf3qd/nf1d0j_NTg9g3m_XGd_Blerxq_DOKl_O6zx_Qw76bfjxcg.webp",

      title: `
        احصل على خصم 
        <span class="highlight">30%</span><br>
        على سلة القمامة عند إضافة صندوق الحبوب الدوّار<br>
        إلى سلة مشترياتك
      `,

      subtitle: "",

      buttonText: "تسوق الآن",
      buttonLink: "https://yellow-store.com/%D8%B3%D9%84%D8%A9-%D9%82%D9%85%D8%A7%D9%85%D8%A9-%D9%84%D9%84%D9%85%D8%B7%D8%A8%D8%AE/p1837988318?from=search-bar"
    });
  }
});