document.addEventListener('DOMContentLoaded', function () {
  const newContentHTML = `
    <div class="container mb-10">
      <h3
        class="text-xl lg:text-3xl font-normal text-center lowercase flex justify-center items-center gap-2 mb-5"
        style="color: #b3976d"
      >
        <!-- SVG ... -->
        اصدار اليوم الوطني
        <!-- SVG ... -->
      </h3>
      <div class="flex md:flex-row flex-col justify-between items-center gap-5">
        <!-- كارد المنتج -->
        <custom-salla-product-card
          class="product-card has-image hover_style_4 product-card--simplified product-card--vertical product-card--fit-height border-solid border-2 bg-[#EAEAEC] w-full md:w-1/3"
          id="product-972337710"
        >
          <div class="product-card__image">
            <a href="https://capri.sa/%D9%81%D9%8A%D9%86%D8%AA%D9%88%D8%B1%D8%A7/p972337710">
              <img
                class="h-full w-full main-image transition-opacity hover:opacity-90 lazy object-cover loaded"
                src="https://cdn.salla.sa/dPlozy/21280546-585e-4d04-b611-54f889f547cf-666.58653846154x1000-XlU2GwWDoCDR3vn6aZtRHXd3id5ek09cuv5MVIWw.png"
                alt="فينتورا"
                loading="lazy"
              />
            </a>
            <div
              class="product-card__promotion"
              style="background-color: #ef4444"
            >
             اي 3 عطور بـ 195
            </div>
            <div class="product-card__actions">
              <div class="wishlist" data-title="إضافة لقائمة الأمنيات">
                <salla-button
                  shape="icon"
                  fill="outline"
                  color="primary"
                  aria-label="Add or remove to wishlist "
                  class="btn--wishlist heart-next-add-button animated not-added un-favorited s-button-wrap hydrated"
                  onclick="salla.wishlist.toggle(972337710)"
                  data-id="972337710"
                  size="medium"
                  width="normal"
                  type="button"
                >
                  <button
                    shape="icon"
                    aria-label="Add or remove to wishlist "
                    class="btn--wishlist heart-next-add-button animated not-added un-favorited s-button-element s-button-icon s-button-outline s-button-primary-outline s-button-loader-center"
                    data-id="972337710"
                    type="button"
                  >
                    <span class="s-button-text">
                      <i class="sicon-heart"></i>
                    </span>
                  </button>
                </salla-button>
              </div>
              <div class="quickview-btn" data-title="عرض سريع">
                <salla-button
                  fill="outline"
                  data-product-id="972337710"
                  aria-label="Quick view"
                  class="s-button-wrap hydrated"
                  shape="btn"
                  color="primary"
                  size="medium"
                  width="normal"
                  type="button"
                >
                  <button
                    data-product-id="972337710"
                    aria-label="Quick view"
                    type="button"
                    class="undefined s-button-element s-button-btn s-button-outline s-button-primary-outline s-button-loader-after"
                  >
                    <span class="s-button-text"><i class="sicon-eye"></i></span>
                  </button>
                </salla-button>
              </div>
            </div>
          </div>
          <div class="product-card__content">
            <div class="product-card__content-wrapper">
              <div class="product-card__title">
                <a href="https://capri.sa/%D9%81%D9%8A%D9%86%D8%AA%D9%88%D8%B1%D8%A7/p972337710">فينتورا</a>
              </div>
              <p class="product-card__subtitle text-sm text-store-text-secondary leading-6 mb-2.5">
                لكما
              </p>
              <div class="flex product-card__price whitespace-nowrap price-wrapper gap-4 items-center justify-center">
                <div class="price_is_on_sale flex items-center gap-2">
                  <!-- السعر بعد الخصم -->
                  <h4 class="total-price font-bold inline-block" style="color:#ef4444;">
                    95 <i class="sicon-sar"></i>
                  </h4>
                  <!-- السعر قبل الخصم -->
                  <span class="line-through text-gray-500">
                    289 <i class="sicon-sar"></i>
                  </span>
                </div>
              </div>
              <div class="out-of-stock hidden text-red-500 !opacity-50 font-bold">
                نفدت الكمية
              </div>
              <div class="product-card__buttons">
                <div class="wishlist" data-title="إضافة لقائمة الأمنيات">
                  <salla-button
                    shape="icon"
                    fill="outline"
                    color="primary"
                    aria-label="Add or remove to wishlist"
                    class="btn--wishlist heart-next-add-button animated not-added un-favorited s-button-wrap hydrated"
                    onclick="salla.wishlist.toggle(972337710)"
                    data-id="972337710"
                    size="medium"
                    width="normal"
                    type="button"
                  >
                    <button
                      shape="icon"
                      aria-label="Add or remove to wishlist"
                      class="btn--wishlist heart-next-add-button animated not-added un-favorited s-button-element s-button-icon s-button-outline s-button-primary-outline s-button-loader-center"
                      data-id="972337710"
                      type="button"
                    >
                      <span class="s-button-text">
                        <i class="sicon-heart"></i>
                      </span>
                    </button>
                  </salla-button>
                </div>
                <div class="quickview-btn" data-title="عرض سريع">
                  <salla-button
                    fill="outline"
                    data-product-id="972337710"
                    aria-label="Quick view"
                    class="s-button-wrap hydrated"
                    shape="btn"
                    color="primary"
                    size="medium"
                    width="normal"
                    type="button"
                  >
                    <button
                      data-product-id="972337710"
                      aria-label="Quick view"
                      type="button"
                      class="undefined s-button-element s-button-btn s-button-outline s-button-primary-outline s-button-loader-after"
                    >
                      <span class="s-button-text"><i class="sicon-eye"></i></span>
                    </button>
                  </salla-button>
                </div>
                <div class="addToCart" data-title="إضافة للسلة">
                  <salla-add-product-button
                    class="addToCart__btn hydrated"
                    aria-label="Add to cart button"
                    product-id="972337710"
                    product-status="sale"
                    fill="outline"
                    product-type="product"
                  >
                    <div class="w-full block md:hidden">
                      <salla-button
                        aria-label="Add to cart button"
                        product-id="972337710"
                        product-status="sale"
                        product-type="product"
                        loader-position="center"
                        class="s-button-wrap hydrated"
                        shape="btn"
                        color="primary"
                        fill="none"
                        size="medium"
                        width="normal"
                        type="button"
                      >
                        <button
                          aria-label="Add to cart button"
                          product-id="972337710"
                          product-status="sale"
                          product-type="product"
                          loader-position="center"
                          type="button"
                          class="undefined s-button-element s-button-btn s-buttonoutline s-button-primary-outline s-button-loader-center"
                        >
                          <span class="s-button-text">
                            <i class="text-[16px] sicon-shopping"></i>
                          </span>
                        </button>
                      </salla-button>
                    </div>
                  </salla-add-product-button>
                </div>
              </div>
              <div class="product-card__mini-cart mt-2 md:hidden block">
                <salla-add-product-button class="product-card__mini-cart__btn hydrated" product-id="972337710" fill="outline" size="sm" width="wide" product-status="sale" product-type="product">
                  <div class="w-full">
                    <salla-button product-id="972337710" product-status="sale" product-type="product" loader-position="center" class="s-button-wrap hydrated" shape="btn" color="primary" fill="none" size="sm" width="wide" type="button">
                      <button product-id="972337710" product-status="sale" product-type="product" loader-position="center" type="button" class="undefined s-button-element s-button-btn s-button-o/utline s-button-sm s-button-wide s-button-primary-outline s-button-loader-center">
                        <span class="s-button-text">
                          <i class="text-[16px] sicon-shopping"></i> إضافة للسلة
                        </span>
                      </button>
                    </salla-button>
                  </div>
                </salla-add-product-button>
              </div>
              <div class="product-card__normal-cart mt-2 hidden md:block">
                <salla-add-product-button fill="outline" width="wide" class="product-card__normal-cart__btn hydrated" product-id="972337710" size="sm" product-status="sale" product-type="product">
                  <div class="w-full">
                    <salla-button product-id="972337710" product-status="sale" product-type="product" loader-position="center" class="s-button-wrap hydrated" shape="btn" color="primary" fill="none" size="sm" width="wide" type="button">
                      <button product-id="972337710" product-status="sale" product-type="product" loader-position="center" type="button" class="undefined s-button-element s-button-btn s-button-/outline s-button-sm s-button-wide s-button-primary-outline s-button-loader-center">
                        <span class="s-button-text">
                          <i class="text-[16px] sicon-shopping"></i> إضافة للسلة
                        </span>
                      </button>
                    </salla-button>
                  </div>
                </salla-add-product-button>
              </div>
            </div>
          </div>
        </custom-salla-product-card>
        <!-- صورة جانبية -->
        <div class="h-full rounded-xl overflow-hidden ">
          <img
            src="https://d.top4top.io/p_3530alxbs1.jpeg"
            alt="صورة جانبية لعطر فينتورا"
            width="100%"
            style="max-width: 750px; display: block; margin: 0 auto"
          />
        </div>
      </div>
    </div>
  `;

  // عدل id هنا لو أردت وضعه في مكان آخر
  const aboutSection = document.getElementById('about-1');

  if (aboutSection) {
    aboutSection.insertAdjacentHTML('afterbegin', newContentHTML);

    // إضافة الأنيميشن (إذا فيه عناصر تبي تحركها)
    const animeItems = aboutSection.querySelectorAll('.anime-item');
    animeItems.forEach(function (item) {
      item.style.opacity = '1';
      item.style.transform = 'translateY(0)';
    });
  }
  
  // إضافة مستمع للزر - ليس شرطًا ضروريًا إلا إذا كنت تريد تتبع الضغطة
  const addButton = document.querySelector('salla-add-product-button');
  if (addButton) {
    addButton.addEventListener('click', function() {
      console.log('Add to cart button clicked');
    });
  }
});