document.addEventListener("DOMContentLoaded", function () {
  const productPage = document.querySelector(".product-single");
  if (!productPage) return;

  if (document.querySelector(".gw-global-product-offer")) return;

  const featuredProduct = {
    id: "158321390",
    title: "لاصق وجهين",
    price: "40.25 ر.س",
    image: "https://cdn.salla.sa/rGZdy/id8BjBDvVtVc1HeLf9cXkwwgdE5DbbEiyJ2JqfJx.jpg",
    url: "https://hawas-design.com/ar/ZqPEnBW",
    subtitle: "احصل على هذا المنتج مع طلبك الحالي"
  };

  const currentUrl = window.location.href.replace(/\/$/, "");
  const targetUrl = featuredProduct.url.replace(/\/$/, "");
  if (currentUrl === targetUrl) return;

  const sliderBox = document.querySelector(".product-single__slider");
  if (!sliderBox) return;

  const block = document.createElement("div");
  block.className = "gw-global-product-offer";
  block.innerHTML = `
    <div class="gw-global-product-offer__head">
      <h3>لاصق وجهين</h3>
      <p>${featuredProduct.subtitle}</p>
    </div>

    <custom-salla-product-card
      class="product-card has-image hover_style_2 product-card--simplified product-card--vertical product-card--fit-height gw-offer-card"
      id="product-${featuredProduct.id}"
    >
      <div class="product-card__image">
        <a href="${featuredProduct.url}">
          <img
            class="h-full w-full main-image transition-opacity duration-1000 opacity-100 object-cover"
            src="${featuredProduct.image}"
            alt="${featuredProduct.title}"
            loading="lazy"
          >
        </a>
        <div class="product-card__actions"></div>
      </div>

      <div class="product-card__content">
        <h3 class="product-title">
          <a href="${featuredProduct.url}">${featuredProduct.title}</a>
        </h3>

        <div class="product-price">
          <span>${featuredProduct.price}</span>
        </div>

        <a href="${featuredProduct.url}" class="gw-offer-btn">
          عرض المنتج
        </a>
      </div>
    </custom-salla-product-card>
  `;

  sliderBox.appendChild(block);
});