document.addEventListener("DOMContentLoaded", function () {
  // --- SECTION 1: barmeen-installment ---
  const section1 = document.createElement("section");
  section1.className = "barmeen-installment";
  section1.innerHTML = `
    <div class="barmeen-image">
      <img src="https://ucarecdn.com/a5e132ed-82c2-4a46-b170-43439c3d5a8e/Black_and_White_Phone_Mockup_Webinar_Promotion_Instagram_Story__1_removebgpreview.png" alt="بارمين">
    </div>
    <div class="barmeen-content">
      <h2>تقسيط مريح مع بارمين</h2>
      <ul>
        <li>بدون دفعة أولى أو تعقيد</li>
        <li>خاص للمواطنين السعوديين</li>
        <li>الموظف لازم يكون مسجل بالتأمينات</li>
        <li>عمرك لازم يكون 20 سنة فما فوق</li>
      </ul>
      <a href="https://wa.me/+966549583534" class="barmeen-btn">قدّم طلبك الآن</a>
    </div>
  `;
  const photosSlider = document.querySelector(".s-block--photos-slider");
  if (photosSlider) {
    photosSlider.insertAdjacentElement("afterend", section1);
  }

  // --- SECTION 2: mahzam-section ---
  setTimeout(() => {
    if (document.querySelector('.mahzam-section')) return;

    const targetSection = document.querySelector('.barmeen-installment');
    if (!targetSection) return;

    const mahzamSection = document.createElement('section');
    mahzamSection.className = 'mahzam-section';
    mahzamSection.innerHTML = `
      <div class="mahzam-content">
        <h2>ليش تختار بارمين؟</h2>
        <p>مو مجرد تقسيط، إحنا نسهّلها عليك صح</p>
        <div class="mahzam-stats">
          <div><strong class="count-up" data-target="5000">+<span>0</span></strong> عميل خدمناه على أكمل وجه في بارمين</div>
          <div><strong class="count-up" data-target="4">+<span>0</span></strong> سنوات من الخبرة والاتقان في المجال والتقسيط</div>
          <div><strong class="count-up" data-target="99"> + % <span>0</span></strong> نسبة قبول طلبات التقسيط مما يزيد فرصتك في التقسيط</div>
        </div>
        <button class="mahzam-btn" onclick="window.location.href='https://wa.me/+966549583534'">قدم طلبك</button>
      </div>
      <div class="mahzam-image">
        <video autoplay muted loop playsinline style="max-width: 100%; border-radius: 20px;">
          <source src="https://ucarecdn.com/a7bf3bc5-33cf-427c-8e17-08a42ee9dd7c/BlueandPinkModernBusinessServicePromotionAdsVideo1.mp4" type="video/mp4">
          متصفحك لا يدعم تشغيل الفيديو.
        </video>
      </div>
    `;
    targetSection.insertAdjacentElement('afterend', mahzamSection);

    function animateCounters() {
      const counters = document.querySelectorAll('.count-up');
      counters.forEach(counter => {
        const target = +counter.getAttribute('data-target');
        const span = counter.querySelector('span');
        let count = 0;
        const increment = target / 100;
        const updateCount = () => {
          count += increment;
          if (count < target) {
            span.textContent = Math.ceil(count).toLocaleString();
            requestAnimationFrame(updateCount);
          } else {
            span.textContent = target.toLocaleString();
          }
        };
        updateCount();
      });
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          document.querySelector('.mahzam-section').classList.add('visible');
          animateCounters();
          observer.disconnect();
        }
      });
    }, { threshold: 0.3 });
    observer.observe(document.querySelector('.mahzam-section'));
  }, 300);

  // --- SECTION 3: الشريط المتحرك ---
  setTimeout(() => {
    const barmeenSection = document.querySelector('.mahzam-section');
    if (!barmeenSection) return;

    const ticker = document.createElement('div');
    ticker.className = 'pmarquee-wrapper';

    const track = document.createElement('div');
    track.className = 'pmarquee-track';

    const message = 'قسّط أي جهاز بخاطرك ابتداءًا من 200 ريال';
    for (let i = 0; i < 30; i++) {
      const span = document.createElement('span');
      span.className = 'pmarquee-text';
      span.textContent = message;
      track.appendChild(span);
    }

    ticker.appendChild(track);
    barmeenSection.insertAdjacentElement('afterend', ticker);
  }, 600);

  // --- SECTION 4: خدمات Wow ---
  setTimeout(() => {
    const section = document.createElement("section");
    section.className = "wow-features";
    section.innerHTML = `
      <div class="wow-box">
        <div class="wow-icon">🚀</div>
        <h3>توصيل سريع </h3>
        <p>سرعة في التوصيل بدون تأخير لأي مدينة داخل المملكة.</p>
        <a href="https://wa.me/+966549583534" class="wow-btn">اطلب الآن</a>
      </div>
      <div class="wow-box">
        <div class="wow-icon">🛡️</div>
        <h3>ضمان حقيقي سنتين</h3>
        <p>منتجات أصلية 100% بضمان شامل ضد العيوب.</p>
        <a href="https://wa.me/+966549583534" class="wow-btn">اطلب الآن</a>
      </div>
      <div class="wow-box">
        <div class="wow-icon">📞</div>
        <h3>دعم 24 ساعة</h3>
        <p>فريق دعم جاهز يرد عليك فورًا عبر كل القنوات.</p>
        <a href="https://wa.me/+966549583534" class="wow-btn">اطلب الآن</a>
      </div>
    `;
    const target = document.querySelector(".pmarquee-wrapper");
    if (target) target.insertAdjacentElement("afterend", section);
  }, 900);

  // --- SECTION 5: barmeen-categories ---
  setTimeout(() => {
    const section = document.createElement("section");
    section.className = "barmeen-categories";
    section.innerHTML = `
      <div class="container-barmeen">
        <h2 class="barmeen-sec-title">بارمين مو بس تقسيط، <span>إحنا نسهّلها عليك صح</span></h2>
        <p class="barmeen-sec-subtitle">
          بارمين صار يوفّر جميع الاكسسوارات والأجهزة بكل طرق الدفع وبأسعار خيالية
        </p>

        <div class="barmeen-cards">
          <a class="barmeen-card fade-up delay-0" href="https://barmenn11.store/%D8%A7%D9%84%D8%AC%D9%88%D8%A7%D9%84%D8%A7%D8%AA/c695787619">
            <div class="card-icon">
              <img src="https://cdn-icons-png.flaticon.com/512/901/901186.png" alt="أيقونة الجوالات">
            </div>
            <div class="card-image" style="background-image: url('https://ucarecdn.com/261f7a7d-061c-4050-80a8-b93217fa0f62/Jk5HDLqlpskbLNaJ87lj3qW5ktliLJXrwiIOnlTHremovebgpreview.png');"></div>
            <h3>الجوالات</h3>
          </a>

          <a class="barmeen-card fade-up delay-1" href="https://barmenn11.store/%D8%A7%D9%84%D8%AA%D8%A7%D8%A8%D9%84%D8%AA/c2068123500">
            <div class="card-icon">
              <img src="https://cdn-icons-png.flaticon.com/512/2857/2857695.png" alt="أيقونة التابلت">
            </div>
            <div class="card-image" style="background-image: url('https://ucarecdn.com/cb83b177-ab42-491c-ae1f-355f9503e61a/NmggLKDhkMXdkz5qh7UAU6Mo7NbRMsb92s9Jjx4vremovebgpreview.png'); background-size: cover; background-position: center;"></div>
            <h3>التابلت</h3>
          </a>

          <a class="barmeen-card fade-up delay-2" href="https://barmenn11.store/%D8%A7%D9%84%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D9%88%D8%A7%D9%84%D8%A8%D9%8A-%D8%B3%D9%8A-%D9%82%D9%8A%D9%85%D9%86%D9%82/c655314286">
            <div class="card-icon">
              <img src="https://cdn-icons-png.flaticon.com/512/1048/1048949.png" alt="أيقونة قيمنق">
            </div>
            <div class="card-image" style="background-image: url('https://ucarecdn.com/e9b1394e-0436-4c7b-be40-1851769b3b54/kD5uooII1byJL65GqxD6lgc95vJPvVMKBKOfPOnqremovebgpreview.png'); background-size: cover; background-position: center;"></div>
            <h3>البلايستيشن والبي سي قيمنق</h3>
          </a>
        </div>
      </div>
    `;

    const target = document.querySelector(".wow-features");
    if (target) {
      target.insertAdjacentElement("afterend", section);

      const cards = section.querySelectorAll('.barmeen-card');

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            cards.forEach(card => card.classList.add('active'));
            observer.disconnect();
          }
        });
      }, {
        threshold: 0.3
      });

      observer.observe(section);
    }
  }, 1200);
});