/* Add custom Js styles below */ 
(function () {
  // === الشرائح المطلوبة ===
  const SLIDES = [
    {
      title: "About Us",
      author: "PEM STAT",
      date: "2021-06-01",
      cover: "https://i.postimg.cc/bw3CMW0B/Pin1-page-0001.jpg",
      excerpt: "PEM STAT was designed in 2021 during our PEM fellowship to close training gaps.",
      content_html: `
        <p>PEM STAT is a course designed back in 2021 during our fellowship training in Pediatric Emergency Medicine (PEM). As we were approaching the end of the first year of the training, we were able to identify the gaps and missing needs for the fellows to have an optimal training experience.</p>
        <p>All the training programs in Saudi Arabia are under the umbrella of the Saudi Commission for Health Specialities (SCFHS). Dr. Al Shehri &amp; Dr. Bakhshwain, the course founders, wrote the course curriculum and proposed the idea to SCFHS that year. 3 years later, this course became an integral part of the academic calendar of the fellowship program based on a unique quality which is; second year fellows will always teach the newly joining fellows in the first week on the academic year.</p>
      `
    },
    {
      title: "Our Team",
      author: "PEM STAT",
      date: "2024-01-01",
      cover: "https://i.postimg.cc/bw3CMW0B/Pin1-page-0001.jpg",
      excerpt: "Meet the committee heads and contributors behind PEM STAT.",
      content_html: `
        <div style="display:grid;gap:14px">
          <section>
            <h4 style="margin:0 0 6px;font-size:18px;font-weight:800">Dr. Muath Albalawi</h4>
            <p style="margin:0 0 2px"><strong>Head of Organizing Committee</strong></p>
            <p style="margin:0 0 2px">Pediatrics &amp; Pediatric Emergency Consultant</p>
            <p style="margin:0">Ad Diriyah Hospital</p>
          </section>

          <section>
            <h4 style="margin:10px 0 6px;font-size:18px;font-weight:800">Dr. Bader Alabdulkarim</h4>
            <p style="margin:0 0 2px"><strong>Head of Scientific Committee</strong></p>
            <p style="margin:0 0 2px">Pediatrics &amp; Pediatric Emergency Consultant</p>
            <p style="margin:0">King Saud University Medical City</p>
          </section>

          <section>
            <h4 style="margin:10px 0 6px;font-size:18px;font-weight:800">Dr. Fahad Alharbi</h4>
            <p style="margin:0 0 2px"><strong>Head of Media &amp; Marketing Committee</strong></p>
            <p style="margin:0 0 2px">Pediatrics &amp; Pediatric Emergency Consultant</p>
            <p style="margin:0 0 2px">Deputy head of Pediatric Emergency Department - MCH Buraydah</p>
            <p style="margin:0">Fellow at the Faculty Development Program, Ronald Reagan Institute of Emergency Medicine at the George Washington University</p>
          </section>

          <hr style="border:none;border-top:1px solid #e5e7eb;margin:8px 0">
          <p style="margin:0;color:#475569"><em>Created By Dr Ahmed Aloraini</em></p>
        </div>
      `
    },
    {
      title: "Registration",
      author: "PEM STAT",
      date: "2025-01-15",
      cover: "https://i.postimg.cc/bw3CMW0B/Pin1-page-0001.jpg",
      excerpt: "Reserve your seat for the next PEM STAT cohort.",
      content_html: `
        <p>Seats are limited. Eligibility: PEM fellows and pediatric residents interested in emergency medicine.</p>
        <p><strong>How to register:</strong></p>
        <ol>
          <li>Fill the online form.</li>
          <li>Upload program letter.</li>
          <li>Await confirmation email.</li>
        </ol>
        <p><a href="/registration" style="color:#2563eb;font-weight:700;text-decoration:underline">Go to Registration →</a></p>
      `
    },
    {
      title: "Testimonials",
      author: "PEM STAT",
      date: "2024-10-01",
      cover: "https://i.postimg.cc/bw3CMW0B/Pin1-page-0001.jpg",
      excerpt: "What fellows say about their PEM STAT experience.",
      content_html: `
        <blockquote style="border-inline-start:4px solid #e5e7eb;padding-inline:12px;margin:0 0 12px">
          <p>“PEM STAT made week-one clinical shifts much smoother.” — Second-year fellow</p>
        </blockquote>
        <blockquote style="border-inline-start:4px solid #e5e7eb;padding-inline:12px;margin:0 0 12px">
          <p>“High-yield, practical, and perfectly timed at the start of the year.” — New fellow</p>
        </blockquote>
      `
    },
    {
      title: "Board members",
      author: "PEM STAT",
      date: "2024-05-01",
      cover: "https://i.postimg.cc/bw3CMW0B/Pin1-page-0001.jpg",
      excerpt: "Oversight and academic guidance for PEM STAT.",
      content_html: `
        <div style="display:grid;gap:14px">
          <section>
            <h4 style="margin:0 0 6px;font-size:18px;font-weight:800">Dr. Dhafer Al Shehri</h4>
            <p style="margin:0 0 2px"><strong>Chairman</strong></p>
            <p style="margin:0 0 2px">Emergency Medicine &amp; Pediatric Emergency Consultant</p>
            <p style="margin:0 0 2px">Deputy head of Pediatric Emergency Department</p>
            <p style="margin:0">King Saud Medical City</p>
          </section>

          <section>
            <h4 style="margin:10px 0 6px;font-size:18px;font-weight:800">Dr. Amal Bakhshwain</h4>
            <p style="margin:0 0 2px"><strong>Co-Chairman</strong></p>
            <p style="margin:0 0 2px">Pediatrics &amp; Pediatric Emergency Consultant at King Saud Medical City</p>
            <p style="margin:0 0 2px">Deputy program director of Pediatric Emergency Fellowship</p>
            <p style="margin:0 0 2px">Fellow at SickKids Hospital in Toronto, Canada</p>
            <p style="margin:0">Harvard Macy Institute Alumna</p>
          </section>

          <section>
            <h4 style="margin:10px 0 6px;font-size:18px;font-weight:800">Dr. Yara Al Goraini</h4>
            <p style="margin:0 0 2px"><strong>Board Member</strong></p>
            <p style="margin:0 0 2px">Pediatrics &amp; Pediatric Emergency Consultant at King Fahad Medical City</p>
            <p style="margin:0 0 2px">Deputy head of Pediatric Emergency Department</p>
            <p style="margin:0">Deputy program director of Pediatric Emergency Fellowship</p>
          </section>

          <section>
            <h4 style="margin:10px 0 6px;font-size:18px;font-weight:800">Dr. Nouf Al Jahdali</h4>
            <p style="margin:0 0 2px"><strong>Board Member</strong></p>
            <p style="margin:0 0 2px">Pediatrics &amp; Pediatric Emergency Consultant</p>
            <p style="margin:0 0 2px">King Abdullah Specialized Children Hospital</p>
            <p style="margin:0">Fellow at SickKids Hospital in Toronto, Canada</p>
          </section>

          <section>
            <h4 style="margin:10px 0 6px;font-size:18px;font-weight:800">Dr. Abdullah Akkam</h4>
            <p style="margin:0 0 2px"><strong>Honorary Board Member</strong></p>
            <p style="margin:0 0 2px">Pediatrics &amp; Pediatric Emergency Consultant</p>
            <p style="margin:0 0 2px">The Head of the scientific committee of the Pediatric Emergency Department at King Saud Medical City</p>
            <p style="margin:0">A member of the scientific committee of the Saudi PEM fellowship program at SCFHS</p>
          </section>

          <hr style="border:none;border-top:1px solid #e5e7eb;margin:8px 0">
          <p style="margin:0;color:#475569"><em>Created By Dr Ahmed Aloraini</em></p>
        </div>
      `
    },
    {
      title: "Flash cards",
      author: "PEM STAT",
      date: "2024-09-10",
      cover: "https://i.postimg.cc/bw3CMW0B/Pin1-page-0001.jpg",
      excerpt: "High-yield PEM flash cards for rapid recall.",
      content_html: `
        <p>Quick scenarios and checklists covering airway, shock, seizures, trauma, and tox.</p>
        <ul>
          <li>Airway steps &amp; drug doses</li>
          <li>Shock algorithm (cold vs. warm)</li>
          <li>Status epilepticus protocol</li>
        </ul>
        <p><a href="/flash-cards" style="color:#2563eb;font-weight:700;text-decoration:underline">Browse flash cards →</a></p>
      `
    }
  ];

  const fmt = new Intl.DateTimeFormat('ar-SA', { dateStyle: 'medium' });
  const iconUser = () =>
    '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-8 2.3-8 5v1h16v-1c0-2.7-3.6-5-8-5Z"/></svg>';
  const iconCalendar = () =>
    '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V2Zm15 8H2v10h20V10Z"/></svg>';

  function slideHTML(p, i) {
    return `
      <article class="s-card" data-index="${i}">
        <img class="s-card__thumb" src="${p.cover || ''}" alt="${p.title}">
        <div class="s-card__body">
          <div class="s-card__meta">
            <span style="display:inline-flex;align-items:center;gap:6px">${iconUser()} ${p.author || ''}</span>
            <span class="s-meta__sep"></span>
            <span style="display:inline-flex;align-items:center;gap:6px">${iconCalendar()} ${fmt.format(new Date(p.date))}</span>
          </div>
          <h3 class="s-card__title">${p.title}</h3>
          <p class="s-card__excerpt">${p.excerpt || ""}</p>
          <a class="s-card__cta" href="#" data-open="${i}">قراءة المزيد <span class="arrow">⟵</span></a>
        </div>
      </article>`;
  }

  function makeSection() {
    const wrap = document.createElement('section');
    wrap.className = 's-blog';
    wrap.innerHTML = `
      <div class="s-carousel">
        <div class="s-track" dir="rtl">
          ${SLIDES.map(slideHTML).join('')}
        </div>
        <div class="s-nav s-prev"><button class="s-btn" type="button" aria-label="Prev">‹</button></div>
        <div class="s-nav s-next"><button class="s-btn" type="button" aria-label="Next">›</button></div>
      </div>
    `;
    return wrap;
  }

  // نافذة واحدة للمحتوى
  function ensureModal() {
    let modal = document.querySelector('.s-about-modal');
    if (modal) return modal;

    modal = document.createElement('div');
    modal.className = 's-about-modal';
    modal.innerHTML = `
      <div class="s-about-panel" role="dialog" aria-modal="true" aria-labelledby="about-title">
        <button class="s-about-close" type="button" aria-label="Close">✕</button>
        <h3 id="about-title" class="s-about-title"></h3>
        <div class="s-about-content"></div>
      </div>
    `;
    document.body.appendChild(modal);

    const panel = modal.querySelector('.s-about-panel');
    const closeBtn = modal.querySelector('.s-about-close');

    function open() {
      modal.classList.add('is-open');
      document.documentElement.style.overflow = 'hidden';
      document.body.style.overflow = 'hidden';
    }
    function close() {
      modal.classList.remove('is-open');
      document.documentElement.style.overflow = '';
      document.body.style.overflow = '';
    }

    modal.addEventListener('click', e => { if (e.target === modal) close(); });
    panel.addEventListener('click', e => e.stopPropagation());
    closeBtn.addEventListener('click', close);
    document.addEventListener('keydown', e => { if (e.key === 'Escape' && modal.classList.contains('is-open')) close(); });

    modal._open = open; modal._close = close;
    modal._title = modal.querySelector('#about-title');
    modal._content = modal.querySelector('.s-about-content');
    return modal;
  }

  // ابحث عن أول بنر ثابت فقط
  function findFirstFixedBanner() {
    // مطابق للكلاس المذكور
    let sec = document.querySelector('section.s-block.s-block--fixed-banner.wide-placeholder');
    if (sec) return sec;

    // احتياطي: أقرب <section> لأول عنصر يحمل banner--fixed
    const el = document.querySelector('a.banner--fixed, .banner--fixed img');
    return el ? el.closest('section') : null;
  }

  // يحقن/ينقل الكاروسيل تحت أول بنر فقط
  function mount() {
    const target = findFirstFixedBanner();
    const modal = ensureModal();

    // إن وُجدت .s-blog مسبقًا ننقلها بدل تكرارها
    let section = document.querySelector('.s-blog');
    if (!section) section = makeSection();

    if (target) {
      target.insertAdjacentElement('afterend', section);
    } else {
      document.body.appendChild(section); // احتياطي
    }

    // === تهيئة الأسهم والسحب وفتح النافذة ===
    const track = section.querySelector('.s-track');
    const prevBtn = section.querySelector('.s-prev .s-btn');
    const nextBtn = section.querySelector('.s-next .s-btn');

    function updateButtons() {
      const maxScroll = track.scrollWidth - track.clientWidth;
      const x = Math.abs(track.scrollLeft);
      prevBtn.disabled = x < 5;
      nextBtn.disabled = x > maxScroll - 5;
    }
    function scrollByDir(dir) {
      const step = Math.round(track.clientWidth * 0.92);
      track.scrollBy({ left: dir * (document.dir === 'rtl' || track.dir === 'rtl' ? -step : step), behavior: 'smooth' });
      setTimeout(updateButtons, 350);
    }
    prevBtn.addEventListener('click', () => scrollByDir(-1));
    nextBtn.addEventListener('click', () => scrollByDir(1));
    track.addEventListener('scroll', updateButtons, { passive: true });
    updateButtons();

    // فتح نافذة “قراءة المزيد”
    section.addEventListener('click', (e) => {
      const a = e.target.closest('[data-open]');
      if (!a) return;
      e.preventDefault();
      const i = +a.getAttribute('data-open');
      const p = SLIDES[i];
      modal._title.textContent = p.title;
      modal._content.innerHTML = p.content_html || '';
      modal._open();
    });

    // سحب بالماوس
    let isDown = false, startX = 0, startLeft = 0;
    track.addEventListener('mousedown', (e) => { isDown = true; startX = e.clientX; startLeft = track.scrollLeft; track.classList.add('grabbing'); });
    window.addEventListener('mouseup', () => { isDown = false; track.classList.remove('grabbing'); });
    window.addEventListener('mousemove', (e) => {
      if (!isDown) return;
      const dx = e.clientX - startX;
      track.scrollLeft = startLeft - dx * (document.dir === 'rtl' || track.dir === 'rtl' ? -1 : 1);
    });
  }

  // يراقب ظهور أول بنر ثم يحقن تحته (مرة واحدة)
  function start() {
    const t = findFirstFixedBanner();
    if (t) { mount(); return; }
    const obs = new MutationObserver(() => {
      const found = findFirstFixedBanner();
      if (found) { obs.disconnect(); mount(); }
    });
    obs.observe(document.documentElement, { childList: true, subtree: true });
    setTimeout(() => obs.disconnect(), 10000);
  }

  // تشغيل
  (document.readyState === 'loading') ? document.addEventListener('DOMContentLoaded', start) : start();
})();