document.addEventListener("DOMContentLoaded", function () {

  // ✅ شرط الصفحة الرئيسية
  const isHomePage =
    window.location.pathname === "/" ||
    window.location.pathname === "/index.html" ||
    document.body.classList.contains("home");

  if (!isHomePage) return;

  if (document.querySelector(".custom-hero")) return;

  const hero = `
  <style>
 .custom-hero {
    display: flex;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 648px;
  padding-bottom: 50px;
    padding-top: 50px;
}

  .custom-hero-content {
    width: 100%;
    padding: 60px;
  }

  .custom-content-box {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  /* 🎯 الهيدلاين */
  .custom-content-box h1 {
    font-family: "Cairo", sans-serif;
    font-weight: 900;
    font-size: 48px;
    line-height: 100%;
    text-align: right;
    line-height: 1.5;
  }

  .custom-content-box h2 {
    font-family: "Cairo", sans-serif;
    font-weight: 700;
    font-size: 28px;
        color:#463C28;

  }

  .custom-content-box p {
    font-family: "Cairo", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color:#8B784F;
    line-height:1.5;
  }

  /* 🎯 الزرار */
  .custom-btn {
    width: 279px;
    height: 48px;
    background: #8B784F;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
  }

  .custom-btn:hover {
    background: #8B784F;
  }

  /* 🖼️ الصورة */
  .custom-hero-image {
    width: 50%;
    height: 100%;
  }

  .custom-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🔥 دي المهمة */
  }
.custom-hero-content {
    width: 82% !important;
    padding: 60px;
}
.custom-hero-image {
    width: 100%;
    height: 100%;
}


.custom-hero-image img {
    width: 106%;
    height: 100%;
    object-fit: contain;
}
  /* 📱 موبايل */
  @media (max-width: 768px) {
    .custom-hero {
      flex-direction: column;
      text-align: center;
    }

    .custom-hero-content,
    .custom-hero-image {
      width: 96%;
      padding: 20px;
    }
  .custom-content-box p {
    font-family: "Cairo", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color:#8B784F;
    line-height:1.7;
  }
    .custom-btn {
      margin: auto;
    }

    .custom-content-box h1 {
      font-size: 28px;
    }
  }

.custom-hero-image {
    width: 82% !important;
    height: 100%;
    margin-right: -13px; 
}
  
  </style>

<section id="custom-hero-section" class="custom-hero">
    <!-- النص -->
    <div class="custom-hero-content">
      <div class="custom-content-box">

        <h1>قهوة مختصة بطابع عالمي</h1>
<p> اكتشف نكهات مميزة من أفضل مزارع القهوة حول العالم، محمصة بعناية لتجربة قهوة استثنائية كل يوم.</p>
        <a href="/products" class="custom-btn">تسوق الآن</a>

      </div>
    </div>

    <!-- الصورة -->
    <div class="custom-hero-image">
      <img src="https://i.ibb.co/fYNzYYMh/Group-14.png" alt="">
    </div>

  </section>
  `;

  const header = document.querySelector("header");

  if (header) {
    header.insertAdjacentHTML("afterend", hero);
  } else {
    document.body.insertAdjacentHTML("afterbegin", hero);
  }

});






document.addEventListener("DOMContentLoaded", function () {

const pcCategories = [
    { img: 'https://i.ibb.co/Vcfb9DZG/Frame-1984077845.png', link: 'https://example.com/category1' },
    { img: 'https://i.ibb.co/9H55jxM1/Frame-1984077846.png', link: 'https://example.com/category2' },
    { img: 'https://i.ibb.co/S4jnKrjt/Frame-1984077847.png', link: 'https://example.com/category3' },
    { img: 'https://i.ibb.co/27RzzK75/Frame-1984077848.png', link: 'https://example.com/category4' },
      { img: 'https://i.ibb.co/9H55jxM1/Frame-1984077846.png', link: 'https://example.com/category2' }

];

 const mobileCategories = [
       { img: 'https://i.ibb.co/QwLKxTy/Frame-1984077848.png', link: 'https://example.com/category4' },
    { img: 'https://i.ibb.co/yBSdDnpX/Frame-1984077847.png', link: 'https://example.com/category3' },
    { img: 'https://i.ibb.co/TMtxJvzW/Frame-1984077846.png', link: 'https://example.com/category2' },

    { img: 'https://i.ibb.co/BHWjS4T8/Frame-1984077845.png', link: 'https://example.com/category1' }
];
  // نجيب أول عنصر عنده الكلاس المطلوب
  const targetElement = document.querySelector('.s-block.s-block--fixed-banner.wide-placeholder.my-custom-section');
  if (!targetElement) return;

  const section = document.createElement('section');
  section.classList.add('categories-section');

  const heading = document.createElement('h2');
  heading.textContent = "لماذا تختار قهوتنا؟";
  heading.classList.add('section-heading');
  section.appendChild(heading);

  const categoriesContainer = document.createElement('div');
  categoriesContainer.classList.add('categories-container');
  section.appendChild(categoriesContainer);

  // نحط الـ section قبل العنصر الهدف
  targetElement.insertAdjacentElement('beforebegin', section);

  // دالة لتحديث الصور حسب حجم الشاشة
  function updateCategories() {
    const categories = window.innerWidth <= 768 ? mobileCategories : pcCategories;
    categoriesContainer.innerHTML = ''; // مسح القديم
    categories.forEach(category => {
      const categoryDiv = document.createElement('div');
      categoryDiv.classList.add('category-item');

      const link = document.createElement('a');
      link.href = category.link;
      link.target = '_blank';

      const img = document.createElement('img');
      img.src = category.img;
      img.alt = "صورة فئة";

      link.appendChild(img);
      categoryDiv.appendChild(link);
      categoriesContainer.appendChild(categoryDiv);
    });
  }

  updateCategories(); // عرض أولي
  window.addEventListener('resize', updateCategories); // تحديث عند تغيير حجم الشاشة

});



 const bannerSection = document.querySelector('section.s-block--fixed-banner');
  if(bannerSection) {
    bannerSection.classList.add('my-custom-section'); // إضافة الكلاس الجديد
  }