/* Add custom JS code below */ 
// ====== Salla - Shop by Category Section ======
// Edit the data array below to change titles, links, and images

const hero = document.querySelector('.swiper-slide a');

hero.insertAdjacentHTML('beforeend', `
<div class="hero-content">
  <h2>صلِّ أينما كنت... في ثوانٍ</h2>
  <p>مصلى متنقل عملي، وسهل الاستخدام يوفر لك مكانًا<br>مهما اضطرتك في أي وقت وأي مكان</p>
  <a href="https://almssla-almtnql.com/offers" class="hero-btn">تسوق الآن</a>
</div>
`);


document.querySelector('.s-block__title').style.justifyContent = 'center';
document.querySelector('.s-block__title').classList.add('cat-title');

const shopByCategoryData = [
  {
    title: "الاكسسوارات",
    link: "https://salla.sa/almssl-almtnql-/%D8%A7%D9%84%D8%A7%D9%83%D8%B3%D8%B3%D9%88%D8%A7%D8%B1%D8%A7%D8%AA/c1991620748",
    image: "https://i.ibb.co/MyJjZcPM/copy.png"
  },
  {
    title: "المصليات المتنقلة العادية",
    link: "https://salla.sa/almssl-almtnql-/%D8%A7%D9%84%D9%85%D8%B5%D9%84%D9%89-%D8%A7%D9%84%D9%85%D8%AA%D9%86%D9%82%D9%84-%D8%A7%D9%84%D8%B9%D8%A7%D8%AF%D9%8A/c1530093830",
    image: "https://i.ibb.co/MyJjZcPM/copy.png"
  },
  {
    title: "المصليات المتنقلة المطورة",
    link: "https://salla.sa/almssl-almtnql-/%D8%A7%D9%84%D9%85%D8%B5%D9%84%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%AA%D9%86%D9%82%D9%84%D9%87-%D8%A7%D9%84%D9%85%D8%B7%D9%88%D8%B1%D9%87/c2032491393",
    image: "https://i.ibb.co/sdJ3j4xd/image.png"
  }
];

const shopByCategoryHTML = `
<section class="sbc-section">
  <h2 class="sbc-title">تسوق حسب المصلية المناسبة</h2>
  <div class="sbc-grid">
    ${shopByCategoryData.map(item => `
      <div class="sbc-card" style="background-image:url('${item.image}')">
        <div class="sbc-overlay"></div>
        <div class="sbc-content">
          <h3 class="sbc-card-title">${item.title}</h3>
          <a href="${item.link}" class="sbc-btn">تسوق الآن</a>
        </div>
      </div>
    `).join("")}
  </div>
</section>
`;

// ====== CHANGE THIS SELECTOR to target the section you want to insert after ======
const targetSection = document.querySelector("section.s-block.s-block--fixed-banner.wide-placeholder");

if (targetSection) {
  targetSection.insertAdjacentHTML("afterend", shopByCategoryHTML);
}





// ====== Salla - FAQ Section ======
// Edit the data array below to change questions, answers, and the image
const faqData = {
  image: "https://i.ibb.co/MyJjZcPM/copy.png",
  items: [
    { question: "هل المنتجات معتمدة وتفي بالمعايير القياسية؟", answer: "نعم، جميع منتجاتنا تخضع لفحص دقيق وتتوافق مع المعايير القياسية المعتمدة." },
    { question: "هل المنتجات معتمدة وتفي بالمعايير القياسية؟", answer: "نعم، جميع منتجاتنا تخضع لفحص دقيق وتتوافق مع المعايير القياسية المعتمدة." },
    { question: "هل المنتجات معتمدة وتفي بالمعايير القياسية؟", answer: "نعم، جميع منتجاتنا تخضع لفحص دقيق وتتوافق مع المعايير القياسية المعتمدة." },
    { question: "هل المنتجات معتمدة وتفي بالمعايير القياسية؟", answer: "نعم، جميع منتجاتنا تخضع لفحص دقيق وتتوافق مع المعايير القياسية المعتمدة." }
  ]
};

const faqHTML = `
<section class="faq-section">
  <h2 class="faq-title">الأسئلة الشائعة</h2>
  <div class="faq-wrapper">
   <div class="faq-image" style="background-image:url('${faqData.image}')"></div>
    <div class="faq-list">
      ${faqData.items.map((item, index) => `
        <div class="faq-item">
          <button class="faq-question" data-faq-index="${index}">
            <span class="faq-icon"><i class="ti ti-chevron-down"></i></span>
            <span class="faq-question-text">${item.question}</span>
          </button>
          <div class="faq-answer">
            <p class="faq-answer-text">${item.answer}</p>
          </div>
        </div>
      `).join("")}
    </div>
   
  </div>
</section>
`;

// ====== CHANGE THIS SELECTOR to target the section you want to insert after ======
const faqTargetSection = document.querySelectorAll("section.s-block.s-block--banners.container");

if (faqTargetSection) {
  faqTargetSection[1].insertAdjacentHTML("afterend", faqHTML);

  // Toggle functionality
  document.querySelectorAll(".faq-question").forEach((btn) => {
    btn.addEventListener("click", () => {
      const item = btn.closest(".faq-item");
      const isOpen = item.classList.contains("faq-open");

      document.querySelectorAll(".faq-item").forEach((el) => el.classList.remove("faq-open"));

      if (!isOpen) {
        item.classList.add("faq-open");
      }
    });
  });
}

/*add id to the grid section */
const grid = document.querySelectorAll('.grid-flow-row');
grid[1].classList.add('second-grid-image');
console.log(grid);


document.addEventListener('DOMContentLoaded', function () {
  const el = document.querySelector('.copyright-text p');
  if (el) {
    el.style.fontSize = '16px';
    el.style.color = '#ffffff';
    el.innerHTML = ' تطوير مؤسسة <a href="https://buadagency.com/" target="_blank" rel="noopener" style="color:#FCB03F; text-decoration:none;"> بُعد الرقمية </a>';
  }
});