(function () {
    'use strict';

    const SECTION_HTML = `
<section id="custom-special-product">
    <div class="csp-card">
        <a href="https://abla-beauty.com/-/p232861789" class="csp-image" aria-label="بكج عرق السوس - ثلاثية النضارة">
            <img src="https://rafeq.net/imgs/sp__image.webp" alt="بكج عرق السوس - ثلاثية النضارة" width="808" height="385" loading="lazy">
        </a>
        <div class="csp-body">
            <h2 class="csp-title">بكج عرق السوس - ثلاثية النضارة</h2>
            <p class="csp-desc">استعيدي إشراقة جسمك مع قوة عرق السوس المفتحة. روتين يومي متكامل لترطيب يدوم</p>
            <div class="csp-price">
                <span class="csp-price-current">149 <i class="sicon-sar"></i></span>
                <span class="csp-price-instead">بدلًا من</span>
                <span class="csp-price-before">224 <i class="sicon-sar"></i></span>
            </div>
            <div class="csp-tabs">
                <div class="csp-tab"><span>تفتيح</span></div>
                <div class="csp-tab"><span>تقشير</span></div>
                <div class="csp-tab"><span>ترطيب</span></div>
            </div>
            <div class="csp-add">
                <salla-add-product-button width="wide" product-id="232861789" product-status="sale" product-type="product"></salla-add-product-button>
            </div>
        </div>
    </div>
</section>`;

    function inject() {
        if (document.getElementById('custom-special-product')) return true;

        const fixedBanner = document.querySelector('.s-block--fixed-banner');
        if (!fixedBanner) return false;

        fixedBanner.insertAdjacentHTML('afterend', SECTION_HTML);
        return true;
    }

    function init() {
        if (inject()) return;

        const observer = new MutationObserver(() => {
            if (inject()) observer.disconnect();
        });

        observer.observe(document.body, { childList: true, subtree: true });
        setTimeout(() => observer.disconnect(), 10000);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();

(function () {
    'use strict';

    const SECTION_HTML = `
<section id="custom-divider-section">
    <div class="csd-wrap">
        <h2 class="csd-title">اكتشفي الفرق</h2>
        <p class="csd-subtitle">شفافية كاملة وتجارب واقعية شاركتها عميلاتنا بعد استخدام منتجات عبلة بيوتي.</p>
    </div>
</section>`;

    function inject() {
        if (document.getElementById('custom-divider-section')) return true;

        const prevSection = document.getElementById('custom-special-product');
        if (!prevSection) return false;

        prevSection.insertAdjacentHTML('afterend', SECTION_HTML);
        return true;
    }

    function init() {
        if (inject()) return;

        const observer = new MutationObserver(() => {
            if (inject()) observer.disconnect();
        });

        observer.observe(document.body, { childList: true, subtree: true });
        setTimeout(() => observer.disconnect(), 10000);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
(function () {
    'use strict';

    const VIDEOS = [
        {
            video: 'https://rafeq.net/video/abla-beauty.mp4',
            poster: 'https://rafeq.net/imgs/abla-beauty.webp'
        },
        {
            video: 'https://rafeq.net/video/abla-beauty-1.mp4',
            poster: 'https://rafeq.net/imgs/abla-beauty-1.webp'
        }
    ];

    const slidesHTML = VIDEOS.map((v, i) => `
        <div class="cvs-slide" data-video="${v.video}">
            <img class="cvs-poster" src="${v.poster}" alt="فيديو تجربة عميلة ${i + 1}" loading="lazy" decoding="async">
            <button class="cvs-play-btn" aria-label="تشغيل الفيديو" type="button">
                <svg viewBox="0 0 24 24" width="44" height="44" fill="currentColor" aria-hidden="true">
                    <path d="M8 5v14l11-7z"/>
                </svg>
            </button>
        </div>
    `).join('');

    const SECTION_HTML = `
<section id="custom-videos-slider">
    <div class="cvs-container">
        <salla-slider id="cvs-salla" type="carousel" show-controls="true" slides-per-view="1" loop="true" pagination="true">
            <div slot="items">
                ${slidesHTML}
            </div>
        </salla-slider>
    </div>
</section>`;

    function playVideo(slide) {
        let video = slide.querySelector('video');
        if (!video) {
            video = document.createElement('video');
            video.src = slide.dataset.video;
            video.playsInline = true;
            video.preload = 'auto';
            video.className = 'cvs-video';

            video.addEventListener('pause', () => slide.classList.remove('is-playing'));
            video.addEventListener('play', () => slide.classList.add('is-playing'));
            video.addEventListener('click', e => {
                e.stopPropagation();
                if (video.paused) {
                    video.play();
                } else {
                    video.pause();
                }
            });

            slide.appendChild(video);
            slide.classList.add('has-video');
        }
        video.play();
    }

    function pauseOthers(current, scope) {
        scope.querySelectorAll('.cvs-slide.is-playing').forEach(s => {
            if (s !== current) {
                const v = s.querySelector('video');
                if (v) v.pause();
            }
        });
    }

    function initSlider(scope) {
        const slides = scope.querySelectorAll('.cvs-slide');
        slides.forEach(slide => {
            const btn = slide.querySelector('.cvs-play-btn');
            btn.addEventListener('click', e => {
                e.preventDefault();
                e.stopPropagation();
                pauseOthers(slide, scope);
                playVideo(slide);
            });
        });

        const slider = scope.querySelector('salla-slider');
        if (slider) {
            slider.addEventListener('slideChange', () => {
                scope.querySelectorAll('.cvs-slide video').forEach(v => v.pause());
            });
        }
    }

    function inject() {
        if (document.getElementById('custom-videos-slider')) return true;

        const target = document.querySelector('.s-block--bundle-faq');
        if (!target) return false;

        target.insertAdjacentHTML('afterend', SECTION_HTML);

        const section = document.getElementById('custom-videos-slider');
        if (section) initSlider(section);

        return true;
    }

    function init() {
        if (inject()) return;

        const observer = new MutationObserver(() => {
            if (inject()) observer.disconnect();
        });

        observer.observe(document.body, { childList: true, subtree: true });
        setTimeout(() => observer.disconnect(), 10000);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();