/*
==============================================================
  محول الصور - يحول الـ divs الكسولة إلى وسوم img حقيقية
  يعمل على جميع sections في الصفحة
==============================================================
*/
document.addEventListener('DOMContentLoaded', () => {
    const sections = document.querySelectorAll('section.s-block.s-block--banners.container');
    
    sections.forEach(section => {
        const bannerDivs = section.querySelectorAll('.lazy__bg');
        
        bannerDivs.forEach(div => {
            const imageUrl = div.getAttribute('data-bg');
            if (!imageUrl) return;
            
            const parent = div.parentNode;
            parent.style.display = 'block';
            
            const img = document.createElement('img');
            img.src = imageUrl;
            img.alt = '';
            img.className = 'w-full h-full object-contain';
            img.loading = 'lazy';
            img.style.width = '100%';
            img.style.height = '100%';
            img.style.display = 'block';
            
            div.parentNode.replaceChild(img, div);
        });
    });
});
/*
==============================================================
  نهاية كود محول الصور
==============================================================
*/
/* Add custom Js code below */

(function() {
  var nav = document.querySelector('body.index #mainnav');
  if (!nav) return;

  var banner = document.createElement('div');
  banner.id = 'hero-banner-wrapper';
  banner.style.cssText = [
    'width: 100%',
    'max-width: 100vw',
    'overflow: hidden',
    'line-height: 0',
    'display: block',
    'margin: 0',
    'padding: 0'
  ].join(';');

  var img = document.createElement('img');
  img.src ='https://i.ibb.co/BHYYB0vz/mindspark.png';
  img.alt = 'Hero Banner';
  img.style.cssText = [
    'width: 100%',
    'height: auto',
    'display: block',
    'max-width: 100%',
    'object-fit: cover'
  ].join(';');

  banner.appendChild(img);
  nav.insertAdjacentElement('afterend', banner);
})();


/* Add custom Js code below */
const CONFIG = {
  targetSelector: 'section.s-block.s-block--fixed-banner.wide-placeholder',
  buttonLink: 'https://mindsparks.net/digital-courses/c858389096',
  imageUrl: 'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=641&h=470&fit=crop',
  videoUrl: 'https://mindsparks.net/digital-courses/c858389096',
};

const sectionHTML = `
<style>
@media (max-width: 768px) {
  #digital-courses-section {
    flex-direction: column !important;
    padding: 40px 20px !important;
    gap: 32px !important;
  }
  #dcs-text-side {
    max-width: 100% !important;
    width: 100% !important;
    order: 1 !important;
  }
  #dcs-media-side {
    order: 2 !important;
    width: 100% !important;
    flex-shrink: unset !important;
  }
  #dcs-media-side > div {
    width: 100% !important;
    height: 240px !important;
  }
  #dcs-heading {
    font-size: 36px !important;
    line-height: 48px !important;
  }
}
</style>

<section id="digital-courses-section" style="
  direction: rtl;
  font-family: 'DIN Next LT Arabic', 'Tajawal', Arial, sans-serif;
  padding: 60px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  min-height: 232px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
">

  <div style="
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(83,21,73,0.35) 0%, transparent 60%),
                radial-gradient(ellipse at 20% 50%, rgba(23,7,86,0.3) 0%, transparent 60%);
    pointer-events: none;
  "></div>

  <div id="dcs-text-side" style="
    flex: 1;
    max-width: 748px;
    text-align: right;
    position: relative;
    z-index: 1;
  ">
    <p style="color:#c850a0;font-size:50px;font-weight:700;margin:0 0 12px 0;letter-spacing:0.5px;">دورات رقمية</p>

    <h2 id="dcs-heading" style="
      color:#ffffff;
      font-size:50px;
      font-weight:700;
      line-height:59px;
      margin:0 0 16px 0;
    ">
      دورات رقمية في مجالات متعددة،<br>
      بأسلوب مبسط يربط بين الفكرة والتطبيق
    </h2>

    <p style="color:#ffffff;font-size:25px;font-weight:400;margin:0 0 32px 0;">
      من مهارات عملية... إلى معارف تواكب تغيّر السوق
    </p>

    <a href="${CONFIG.buttonLink}" style="
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(270deg,rgba(21, 9, 73, 1) 0%, rgba(60, 16, 61, 1) 100%);

      color: #ffffff;
      text-decoration: none;
      font-family: 'DIN Next LT Arabic', Tajawal, Arial, sans-serif;
      font-size: 20px;
      font-weight: 400;
      line-height: 44px;
      letter-spacing: 0;
      text-align: center;
      width: 188px;
      height: 58px;
      border-radius: 20px;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s ease, transform 0.2s ease;
      white-space: nowrap;
      box-sizing: border-box;
    "
    onmouseover="this.style.opacity='0.85';this.style.transform='scale(1.03)'"
    onmouseout="this.style.opacity='1';this.style.transform='scale(1)'"
    >تصفح الدورات</a>
  </div>

  <div id="dcs-media-side" style="
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  ">
    <div style="
      width: 641px;
      height: 470px;
      border-radius: 25px;
      border: 1px solid rgba(200,80,160,0.4);
      overflow: hidden;
      position: relative;
      box-shadow: 0 0 40px rgba(83,21,73,0.5), 0 0 80px rgba(23,7,86,0.3);
    ">
      <img
        src="${CONFIG.imageUrl}"
        alt="دورات رقمية"
        style="width:100%;height:100%;object-fit:cover;display:block;"
      />
      <div style="
        position:absolute;inset:0;
        display:flex;align-items:center;justify-content:center;
        background:rgba(0,0,0,0.25);cursor:pointer;transition:background 0.2s;
      "
      onmouseover="this.style.background='rgba(0,0,0,0.1)'"
      onmouseout="this.style.background='rgba(0,0,0,0.25)'"
      onclick="window.open('${CONFIG.videoUrl}','_blank')"
      >
        <div style="
          width:72px;height:72px;border-radius:50%;
          background:rgba(200,80,160,0.85);
          display:flex;align-items:center;justify-content:center;
          box-shadow:0 0 30px rgba(200,80,160,0.6);
          transition:transform 0.2s;
        "
        onmouseover="this.style.transform='scale(1.1)'"
        onmouseout="this.style.transform='scale(1)'"
        >
          <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
            <polygon points="6,3 20,12 6,21"/>
          </svg>
        </div>
      </div>
    </div>
  </div>

</section>
`;

(function injectSection() {
  const existing = document.getElementById('digital-courses-section');
  if (existing) existing.remove();

  const selectors = CONFIG.targetSelector.split(',').map(s => s.trim());
  let target = null;
  let usedSelector = '';

  for (const sel of selectors) {
    const el = document.querySelector(sel);
    if (el) { target = el; usedSelector = sel; break; }
  }

  if (!target) {
    return;
  }

  target.insertAdjacentHTML('beforebegin', sectionHTML);
})();