document.addEventListener('DOMContentLoaded', () => {
  // الصيغة الفعلية المطابقة لـ DOM سلة: MM-DD-YYYY,hh:mm:ss am/pm
  const targetDate = "09-23-2026,11:59:59 pm";

  const nationalDayHtml = `
    <div id="national-day-banner" class="nd-popup-wrapper">
      <div class="nd-popup-overlay" id="nd-overlay"></div>
      
      <div class="nd-card">
        <button type="button" class="nd-close-btn" id="nd-close">&times;</button>
        
        <div class="nd-header">
          <span class="nd-badge">💚 اليوم الوطني</span>
          <h2 class="nd-title">اليوم الوطني قرب 🇸🇦</h2>
          <p class="nd-subtitle">
            استعدوا لعروضنا المميزة على إطلالات وهدايا الأطفال 💚<br>
            <strong>لا تفوّتون الفرصة!</strong>
          </p>
        </div>

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

    <style>
      .nd-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;
      }
      
      .nd-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);
      }
      .nd-card {
        position: relative;
        background: linear-gradient(135deg, #006C35 0%, #004D25 100%);
        color: #ffffff;
        border: 2px solid #00A859;
        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: ndPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

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

      .nd-close-btn {
        position: absolute;
        top: 12px;
        left: 16px;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.2s;
      }

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

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

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

      .nd-subtitle {
        font-size: 14px;
        line-height: 1.6;
        margin: 0 0 20px 0;
        color: #e2f4ea;
      }

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

  const targetElement = document.querySelector('body.index section:first-of-type');

  if (targetElement) {
    targetElement.insertAdjacentHTML('afterend', nationalDayHtml);

    const banner = document.getElementById('national-day-banner');
    const closeBtn = document.getElementById('nd-close');
    const overlay = document.getElementById('nd-overlay');

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

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