document.addEventListener("DOMContentLoaded", () => {
  const selector = ".abayat-image-with-text > img";
  const desktopImage =
    "https://cdn.files.salla.network/homepage/279645505/642173e8-1d2a-4775-8173-3c5b7ee4b143_1440x767.webp";

  const mobileImage = "MOBILE_IMAGE_URL_HERE";

  function updateHeroBanner() {
    const heroImage = document.querySelector(selector);

    if (!heroImage) return;

    heroImage.src = window.innerWidth <= 767 ? mobileImage : desktopImage;
  }

  updateHeroBanner();
  window.addEventListener("resize", updateHeroBanner);
});

(function () {

    function addVideoNames() {

        document.querySelectorAll("video").forEach(function (video) {

            // Don't process the same video twice
            if (video.dataset.productNameAdded === "true") return;

            let url = "";

            // Try video src
            if (video.getAttribute("src")) {
                url = video.getAttribute("src");
            }

            // Try source element
            if (!url) {
                const source = video.querySelector("source");
                if (source) {
                    url = source.getAttribute("src") || "";
                }
            }

            // Try currentSrc
            if (!url && video.currentSrc) {
                url = video.currentSrc;
            }

            if (!url) return;

            // Get filename
            let filename = url.split("/").pop().split("?")[0];

            // Remove extension
            filename = filename.replace(/\.(mp4|webm|mov|m4v)$/i, "");

            // Decode filename
            try {
                filename = decodeURIComponent(filename);
            } catch (e) {}

            // Convert filename to readable name
            const productName = filename
                .replace(/[-_]+/g, " ")
                .trim()
                .replace(/\b\w/g, function (char) {
                    return char.toUpperCase();
                });

            if (!productName) return;

            // Create product name
            const nameElement = document.createElement("div");

            nameElement.className = "video-product-name";
            nameElement.textContent = productName;

            // Insert immediately after video
            video.insertAdjacentElement("afterend", nameElement);

            video.dataset.productNameAdded = "true";
        });
    }

    // Initial scan
    addVideoNames();

    // Salla can load videos dynamically
    const observer = new MutationObserver(function () {
        addVideoNames();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

})();

document.addEventListener("DOMContentLoaded", () => {
                                                                                    const payments = document.querySelector("salla-payments");
                                                                                
                                                                                    if (!payments || document.querySelector(".techso-powered")) return;
                                                                                
                                                                                    payments.insertAdjacentHTML(
                                                                                        "beforebegin",
                                                                                        `
                                                                                        <div class="techso-powered">
                                                                                            <a href="https://wa.me/966574919296?text=Hi%20Techso" target="_blank" rel="noopener">
                                                                                                Powered by <strong>Techso</strong>
                                                                                            </a>
                                                                                        </div>
                                                                                        `
                                                                                    );
                                                                                });