const div= document.createElement('div');
div.classList.add('watsapp');
div.style='position: fixed;z-index: 11111111111;width: 55px; bottom: -20px;height: 100px;right: 30px;'
div.innerHTML=`
    <a href="https://wa.me/+9660559860965">
      <img width="100%" src="   https://cdn-icons-png.flaticon.com/512/3670/3670051.png ">
</a>
`;

document.body.appendChild(div);

document.addEventListener("DOMContentLoaded", function () {
  if (document.body.classList.contains("index")) {

    // لو الصفحة اتعملها reload، ما نظهرش
    if (sessionStorage.getItem("popupShown")) return;

    // نخزن إنه ظهر في السيشن دي
    sessionStorage.setItem("popupShown", "true");

    const overlay = document.createElement("div");
    overlay.id = "popup-overlay";

    const popup = document.createElement("div");
    popup.id = "popup-container";

    const closeBtn = document.createElement("span");
    closeBtn.id = "popup-close";
    closeBtn.innerHTML = "&times;";

    const link = document.createElement("a");
    link.href = "https://sultanoptical.com/";
    link.target = "_self";

    const image = document.createElement("img");
    image.src = "https://i.ibb.co/NDF7XqN/Frame-314.png";

    link.appendChild(image);
    popup.appendChild(closeBtn);
    popup.appendChild(link);
    overlay.appendChild(popup);
    document.body.appendChild(overlay);

    // Animation
    setTimeout(() => {
      popup.classList.add("show");
    }, 50);

    // Close
    closeBtn.addEventListener("click", () => overlay.remove());
    overlay.addEventListener("click", (e) => {
      if (e.target === overlay) overlay.remove();
    });

    // CSS
    const style = document.createElement("style");
    style.innerHTML = `
      #popup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9998;
      }

      #popup-container {
        position: relative;
        max-width: 500px;
        transform: scale(0.3);
        opacity: 0;
        transition: all 0.4s ease;
      }

      #popup-container.show {
        transform: scale(1);
        opacity: 1;
      }

      #popup-close {
        position: absolute;
        top: 10px;
        left: 20px;
        font-weight:bold;
        font-size: 26px;
        cursor: pointer;
        color: #e10000;
        z-index: 2;
      }

      #popup-close:hover {
        color: red;
      }

      #popup-container img {
        max-width: 100%;
        border-radius: 10px;
        display: block;
      }
      @media (max-width:992px) {
        #popup-container {
          max-width: 400px;
        }
      }
      @media (max-width:600px) {
        #popup-container {
          max-width: 300px;
        }
         #popup-close {
          top: 5px;
          left: 15px;
        }
      }
    `;
    document.head.appendChild(style);
  }
});