/* Add custom Js styles below */ 
// ===================== اضافة فيديو للصفحة =====================
const SECTION_POSITION = 3; //
const VIDEO_SRC = "https://files.catbox.moe/s544aj.mp4"; // 
const VIDEO_LINK = "#"; // رابط عند الضغط
// ====================================================

(function() {
  if (!document.body.classList.contains("index")) return;

  const style = document.createElement("style");
  style.textContent = `
    .custom-video-banner {
      font-size: 16px;
      margin: 30px 0;
    }
    .custom-video-banner .container {
      font-size: 16px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .custom-video-banner .banner {
      display: block;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: none;
    }
    .custom-video-banner video {
      width: auto;
      height: auto;
      display: block;
      border-radius: 12px;
      object-fit: cover;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      .custom-video-banner {
        font-size: 14px;
        margin: 20px 0;
      }
      .custom-video-banner .container {
        padding: 0 10px;
      }
      .custom-video-banner video {
        width: 100%;
        height: auto;
      }
    }
  `;
  document.head.appendChild(style);

  const section = document.createElement("section");
  section.className = "custom-video-banner s-block s-block--fixed-banner wide-placeholder appear";
  section.innerHTML = `
    <div class="container">
      <a href="${VIDEO_LINK}" class="banner banner--fixed" aria-label="Video Banner">
        <video autoplay muted loop playsinline playsInline webkit-playsinline>
          <source src="${VIDEO_SRC}" type="video/mp4">
          متصفحك لا يدعم تشغيل الفيديو
        </video>
      </a>
    </div>
  `;

  const sections = document.querySelectorAll("section");
  if (sections.length >= SECTION_POSITION) {
    sections[SECTION_POSITION - 1].insertAdjacentElement("afterend", section);
  } else {
    // fallback -> لو مفيش سكشن كفاية نحطه آخر الصفحة
    document.body.appendChild(section);
  }

  // 🔥 تأكيد تشغيل الفيديو تلقائياً في الموبايل
  const video = section.querySelector("video");
  if (video) {
    video.muted = true;
    video.setAttribute("playsinline", "");
    video.setAttribute("webkit-playsinline", "");
    video.play().catch(err => {
      console.log("Autoplay blocked:", err);
    });
  }
})();
/* Add custom Js styles below */ 
document.addEventListener("DOMContentLoaded", function () {
  // ✅ إضافة ستايل
  const style = document.createElement("style");
  style.textContent = `
    /* زرار الفتح */
    #faq-toggle-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #A6661F;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 0 15px rgba(68,24,12,0.8);
      z-index: 9999;
      transition: transform 0.2s;
    }
    #faq-toggle-btn:hover {
      transform: scale(1.1);
    }

    /* نافذة الأسئلة */
    #faq-container {
      position: fixed;
      bottom: 90px;
      right: 20px;
      width: 320px;
      max-height: 70vh;
      background: #111;
      color: #fff;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(68,24,12,0.8);
      display: none;
      flex-direction: column;
      z-index: 10000;
      overflow: hidden;
    }

    #faq-header {
      background: #A6661F;
      padding: 12px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      position: relative;
    }

    #faq-close {
      position: absolute;
      right: 10px;
      top: 5px;
      background: transparent;
      border: none;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      cursor: pointer;
    }

    .faq-item {
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .faq-question {
      padding: 12px;
      cursor: pointer;
      position: relative;
    }
    .faq-question::after {
      content: "›";
      position: absolute;
      right: 15px;
      transition: transform 0.3s;
    }
    .faq-question.active::after {
      transform: rotate(90deg);
    }
    .faq-answer {
      display: none;
      padding: 0 12px 12px;
      font-size: 14px;
      color: #ccc;
    }
    .faq-answer.show {
      display: block;
    }
  `;
  document.head.appendChild(style);

  // ✅ HTML للزرار + نافذة FAQ
  const faqBtn = document.createElement("button");
  faqBtn.id = "faq-toggle-btn";
  faqBtn.textContent = "FAQ";

  const faqBox = document.createElement("div");
  faqBox.id = "faq-container";
  faqBox.innerHTML = `
    <div id="faq-header">
      الأسئلة الشائعة
      <button id="faq-close">×</button>
    </div>
    <div class="faq-item">
      <div class="faq-question">سؤال 1: كيف أستخدم المتجر؟</div>
      <div class="faq-answer">تقدر تختار المنتج وتضيفه للعربة ثم تكمل خطوات الدفع.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">سؤال 2: هل الشحن متاح لكل المحافظات؟</div>
      <div class="faq-answer">نعم، نوصل لجميع المحافظات خلال 2-5 أيام عمل.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">سؤال 3: ما طرق الدفع المتاحة؟</div>
      <div class="faq-answer">نوفر الدفع عند الاستلام، أو أونلاين عبر البطاقات.</div>
    </div>
  `;

  document.body.appendChild(faqBtn);
  document.body.appendChild(faqBox);

  // ✅ تحكم في الفتح والإغلاق
  faqBtn.addEventListener("click", () => {
    faqBox.style.display = "flex";
  });
  faqBox.querySelector("#faq-close").addEventListener("click", () => {
    faqBox.style.display = "none";
  });

  // ✅ أسئلة وأجوبة toggle
  faqBox.querySelectorAll(".faq-question").forEach(q => {
    q.addEventListener("click", () => {
      q.classList.toggle("active");
      const ans = q.nextElementSibling;
      ans.classList.toggle("show");
    });
  });
});