document.addEventListener("DOMContentLoaded", function () { 
  setTimeout(() => {
    var parent = document.querySelector("section.s-block.s-block--features.container > div");

    if (!parent) {
      console.log("Features parent not found");
      return;
    }

    var box = document.createElement("div");
    box.classList.add("s-block--features__item");

    box.innerHTML = `
      <div class="feature-icon">
        <i class="sicon-fire"></i>
      </div>
      <h2>خدمة عملاء مميزة</h2>
    `;

    parent.appendChild(box);
  }, 200);
});


document.addEventListener("DOMContentLoaded", function () { 
  setTimeout(() => {
    var box = document.querySelector(".s-block--testimonials.container");

    if (!box) {
      console.log("Testimonials section not found");
      return;
    }

    var parent = document.createElement("section");
    parent.className = "faq-section";

    parent.innerHTML = `
      <style>
        .faq-section .faq-box {
          direction: rtl;
          text-align: right;
          margin: 40px auto;
        }

        .faq-section .faq-box .s-block__title h2 {
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 20px;
          text-align: center;
          color: #3b2b25;
        }

        .faq-section .faq-item {
          border-bottom: 1px solid #ddd;
          padding: 22px 0;
        }

        .faq-section .faq-item input {
          display: none;
        }

        .faq-section .faq-item label {
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          color: #3b2b25;
          width: 100%;
        }

        .faq-section .faq-item label h2 {
          font-size: 20px;
          font-weight: 700;
          margin: 0;
          color: #3b2b25;
        }

        /* إلغاء أي سهم يظهر جنب السؤال */
        .faq-section .faq-item label h2::after,
        .faq-section .faq-item label h2::before {
          content: none !important;
          display: none !important;
        }

        /* إلغاء أي + أو - قديم */
        .faq-section .faq-item label::before {
          content: none !important;
          display: none !important;
        }

        /* السهم الوحيد في الشمال */
        .faq-section .faq-item label::after {
          content: "⌄" !important;
          display: inline-block;
          font-size: 24px;
          font-weight: bold;
          transition: transform 0.3s ease;
          color: #3b2b25;
          margin-right: auto;
          margin-left: 0;
        }

        /* عند فتح السؤال السهم يطلع لفوق */
        .faq-section .faq-item input:checked + label::after {
          transform: rotate(180deg);
        }

        .faq-section .answer {
          display: none;
          margin-top: 15px;
          line-height: 1.9;
          color: #555;
          font-size: 16px;
        }

        .faq-section .faq-item input:checked + label + .answer {
          display: block;
        }

        .faq-section .answer p {
          margin: 0;
        }
      </style>

      <div class="container s-block faq-box">
        <div class="questions">
          <div class="s-block__title">
            <h2>أسئلة شائعة</h2>
          </div>

          <div class="faq-item">
            <input type="checkbox" id="faq-q1">
            <label for="faq-q1">
              <h2>هل الدورة مباشرة؟</h2>
            </label>
            <div class="answer">
              <p>
                الدورة مسجلة بالكامل وليست مباشرة، ومقسّمة إلى محاور منظمة لتسهيل المتابعة.
                يمكن للمتدربة الرجوع للمحتوى وإعادته خلال مدة سنة كاملة من تاريخ التسجيل.
              </p>
            </div>
          </div>

          <div class="faq-item">
            <input type="checkbox" id="faq-q2">
            <label for="faq-q2">
              <h2>ما الفرق بين دورتي العرايس؟</h2>
            </label>
            <div class="answer">
              <p>
                لا يوجد فرق جوهري من حيث جودة المحتوى؛ كلا الدورتين غنيّتان بالمعلومات والتقنيات.
                الاختيار يعتمد بشكل أساسي على الذوق الشخصي والأسلوب المفضل، مع توفر قناة تليجرام خاصة لكل دورة بمعلومات ومنتجات محدثة بين فترة وفترة.
              </p>
            </div>
          </div>

          <div class="faq-item">
            <input type="checkbox" id="faq-q3">
            <label for="faq-q3">
              <h2>هل الدورات مناسبة للمبتدئات؟</h2>
            </label>
            <div class="answer">
              <p>
                نعم، الدورات مناسبة للمبتدئات.
                وبحكم أنها أونلاين، يمكن للمتدربة التعلم بالوتيرة التي تناسبها، مع إمكانية إعادة الدروس حتى إتقان المهارات والتقنيات.
              </p>
            </div>
          </div>

          <div class="faq-item">
            <input type="checkbox" id="faq-q4">
            <label for="faq-q4">
              <h2>ايش تنصحون أبدأ فيه؟</h2>
            </label>
            <div class="answer">
              <p>
                لا يشترط اتباع ترتيب معيّن بين الدورات، لكن يُفضّل البدء بالدورة الأولى | فنون المكياج كخطوة أولى لتأسيس المهارات بشكل صحيح.
              </p>
            </div>
          </div>
        </div>
      </div>
    `;

    box.after(parent);
  }, 1000);
});