document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(
    ".cat-square-banner .container"
  );

  if (!container) return;

  // إنشاء العناصر
  const box = document.createElement("div");
  box.className = "countdown-box";

  const title = document.createElement("div");
  title.className = "countdown-title";
  title.textContent = "⏳ عروض الشتاء تنتهي خلال";

  const timer = document.createElement("div");
  timer.className = "countdown-timer";

  const units = [
    { id: "days", label: "يوم" },
    { id: "hours", label: "ساعة" },
    { id: "minutes", label: "دقيقة" },
    { id: "seconds", label: "ثانية" }
  ];

  units.forEach(unit => {
    const timeBox = document.createElement("div");
    timeBox.className = "time-box";

    const value = document.createElement("span");
    value.id = unit.id;
    value.textContent = "00";

    const label = document.createElement("small");
    label.textContent = unit.label;

    timeBox.appendChild(value);
    timeBox.appendChild(label);
    timer.appendChild(timeBox);
  });

  box.appendChild(title);
  box.appendChild(timer);

  // إدراج المستطيل في بداية القسم
  container.prepend(box);

  // تاريخ نهاية العرض (عدّله حسب حاجتك)
  const endDate = new Date("2025-12-31T23:59:59").getTime();

  setInterval(() => {
    const now = new Date().getTime();
    const diff = endDate - now;

    if (diff <= 0) {
      timer.textContent = "انتهى العرض";
      return;
    }

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((diff / (1000 * 60)) % 60);
    const seconds = Math.floor((diff / 1000) % 60);

    document.getElementById("days").textContent = days;
    document.getElementById("hours").textContent = hours;
    document.getElementById("minutes").textContent = minutes;
    document.getElementById("seconds").textContent = seconds;
  }, 1000);
});


document.addEventListener("DOMContentLoaded", function () {
  const sliderContainer = document.querySelector(".s-block--photos-slider .container");
  if (!sliderContainer) return;

  const banner = document.createElement("div");
  banner.className = "winter-offer-banner";

  banner.innerHTML = `
    <div class="banner-text">عروض الشتاء بدأت بخصم حصري</div>
    <div class="banner-code">
      <span class="offer-code">FASH</span>
      <button class="copy-btn" title="انسخ الكود">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="#1e3a8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
        </svg>
      </button>
      <span class="copy-notice" style="display:none; font-size:12px; color:#1e3a8a; margin-left:5px;">تم النسخ</span>
    </div>
    <a href="https://fyfaa.com/%D8%B9%D8%B1%D9%88%D8%B6-%D8%A7%D9%84%D8%B4%D8%AA%D8%A7%D8%A1/c1342960492" class="shop-now">تسوق الآن</a>
  `;

  sliderContainer.appendChild(banner);

  const copyBtn = banner.querySelector(".copy-btn");
  const offerCode = banner.querySelector(".offer-code").textContent;
  const notice = banner.querySelector(".copy-notice");

  copyBtn.addEventListener("click", () => {
    navigator.clipboard.writeText(offerCode).then(() => {
      // عرض الرسالة القصيرة
      notice.style.display = "inline";
      setTimeout(() => {
        notice.style.display = "none";
      }, 1500); // تختفي بعد 1.5 ثانية
    });
  });
});