/* Add custom JS code below */

document.addEventListener('DOMContentLoaded', () => {

  // منع ظهور العرض أكثر من مرة
  const storageKey = 'discount_offer_shown';

  if (localStorage.getItem(storageKey) === 'true') {
    return;
  }

  // الصيغة الفعلية المطابقة لـ DOM سلة: MM-DD-YYYY,hh:mm:ss am/pm
  const targetDate = "11-19-2026,11:59:59 pm";

  const discountOffer = `
    <div id="discount-offer" class="df-popup-wrapper">
      <div class="df-popup-overlay" id="df-overlay"></div>

      <div class="df-card">
        <button type="button" class="df-close-btn" id="df-close">&times;</button>

        <div class="df-header">
          <span class="df-badge">عرض لفترة محدودة</span>
          <h2 class="df-title">خصم 50% علي العبايات المميزة</h2>
        </div>

        <div class="df-timer-container">
          <salla-count-down
            boxed="true"
            digits="en"
            size="lg"
            labeled="true"
            date="${targetDate}"
            style="color:#ffffff;">
          </salla-count-down>
        </div>

        <a href="https://evestylesa.com/ar/%D8%B9%D8%A8%D8%A7%D9%8A%D8%A7%D8%AA-%D8%A8%D9%84%D9%8A%D8%B2%D8%B1/c1550011473" class="df-shop-btn">
          <button>تسوق الان</button>
        </a>
      </div>
    </div>

    <style>
      .df-popup-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
      }

      .df-popup-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
      }

      .s-count-down-dark .s-count-down-item {
        padding: 8px 10px;
        background: transparent;
        border: 1px solid #fff;
        color: #fff;
      }

      .s-count-down-item-label {
        color: rgb(255 255 255);
      }

      .df-card {
        position: relative;
        background: linear-gradient(135deg, #db4b66 0%, #b52540 100%);
        color: #ffffff;
        border: 2px solid #db4b66;
        border-radius: 16px;
        padding: 28px 24px;
        max-width: 480px;
        width: 100%;
        text-align: center;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        z-index: 10;
        direction: rtl;
        font-family: inherit;
        animation: dfPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      @keyframes dfPopIn {
        from { opacity: 0; transform: scale(0.85); }
        to { opacity: 1; transform: scale(1); }
      }

      .df-close-btn{
          position: absolute;
          top: 12px;
          left: 16px;
          background: #ffffff26;
          font-size: 24px;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          justify-content: center;
      }

      .df-close-btn:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .df-badge {
        display: inline-block;
        background: #ffffff;
        color: #db4b66;
        font-weight: bold;
        font-size: 13px;
        padding: 4px 12px;
        border-radius: 20px;
        margin-bottom: 12px;
      }

      .df-title {
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 10px 0;
        color: #ffffff;
      }

      .df-shop-btn {
        display: inline-block;
        background-color: #fff;
        padding: 8px 32px;
        border-radius: 10px;
        margin-top: 10px;
        color: #b52540;
        font-weight: bold !important;
      }

      .df-timer-container {
        display: flex;
        justify-content: center;
        margin-top: 15px;
      }
    </style>
  `;

  const targetElement = document.querySelector('body');

  if (targetElement) {

    targetElement.insertAdjacentHTML('beforeend', discountOffer);

    // تسجيل ظهور العرض في Local Storage
    localStorage.setItem(storageKey, 'true');

    const banner = document.getElementById('discount-offer');
    const closeBtn = document.getElementById('df-close');
    const overlay = document.getElementById('df-overlay');

    const closePopup = () => {
      if (banner) banner.style.display = 'none';
    };

    closeBtn?.addEventListener('click', closePopup);
    overlay?.addEventListener('click', closePopup);
  }

});