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

    /* =========================================
       إعدادات أحجام البانر المخصص (داخل shadowRoot)
       عدّل الأرقام هنا براحتك - الفونت بيتوارث من المنصة
    ========================================= */
    const BANNER = {
        titleSize: '64px',
        titleSizeTablet: '36px',
        titleSizeMobile: '32px',
        descSize: '1.15rem',
        descSizeMobile: '14px',
        radius: '40px',
        radiusMobile: '24px',
        bgPosition: 'center top', // نقطة تركيز الصورة: فوق (عشان راس الراجل تبان)
        height: '600px',
        heightTablet: '500px'
    };

    /* =========================================
       1. تعديل عناصر السلايدر (إن وجد)
    ========================================= */
    const heading = document.querySelector('.advanced-slider__caption__inner__content__heading');
    const contentArea = document.querySelector('.advanced-slider__caption__inner__content');

    if (heading) {
        heading.innerHTML = `
            <div class="line-1">طـــوّر مـــهاراتك</div>
            <div class="line-2">وسّــع فــرصـــك</div>
        `;
    }

    if (contentArea && !contentArea.querySelector('.slider-buttons-container')) {
        const buttonsDiv = document.createElement('div');
        buttonsDiv.className = 'slider-buttons-container';
        buttonsDiv.innerHTML = `
            <a href="/الرابط-الأول" class="btn-custom btn-green">استكشف البرامج التدريبية</a>
            <a href="/الرابط-الثاني" class="btn-custom btn-outline">تعرّف على المركز</a>
        `;
        contentArea.appendChild(buttonsDiv);
    }

    /* =========================================
       2. شريط الإحصائيات + أنيميشن العداد
       (التنسيق كله في ملف الـ CSS)
    ========================================= */
    const heroSection = document.querySelector(
        'section.advanced-slider, .s-block--bundle-custom-banner, salla-custom-banner-tzuk1f'
    );

    if (heroSection && !document.querySelector('.thmanyah-stats-slider')) {
        const statsBar = document.createElement('div');
        statsBar.className = 'thmanyah-stats-slider';
        statsBar.innerHTML = `
            <div class="stats-wrapper">
                <div class="stats-title">مجتمعنا ينمو كل يوم</div>
                <div class="stats-items-group">
                    <div class="stats-node">
                        <span class="node-val" data-target="18000">+0</span>
                        <span class="node-lbl">متدرب</span>
                    </div>
                    <div class="stats-node">
                        <span class="node-val" data-target="400">+0</span>
                        <span class="node-lbl">مدرب</span>
                    </div>
                    <div class="stats-node node-special">
                        <span class="node-val">تدريب</span>
                        <span class="node-lbl">حضوري وأونلاين</span>
                    </div>
                </div>
            </div>
        `;

        heroSection.insertAdjacentElement('afterend', statsBar);

        function animateCounter(el) {
            const target = Number(el.getAttribute('data-target'));
            const duration = 2000;
            const startTime = performance.now();

            function update(now) {
                const progress = Math.min((now - startTime) / duration, 1);
                const eased = 1 - Math.pow(1 - progress, 3);
                const value = progress < 1 ? Math.floor(eased * target) : target;

                el.textContent = '+' + value.toLocaleString('en-US');

                if (progress < 1) requestAnimationFrame(update);
            }

            requestAnimationFrame(update);
        }

        const statsObserver = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (!entry.isIntersecting) return;

                statsBar.classList.add('visible');
                statsBar.querySelectorAll('[data-target]').forEach(animateCounter);
                statsObserver.unobserve(entry.target);
            });
        }, { threshold: 0.25 });

        statsObserver.observe(statsBar);
    }

    /* =========================================
       3. تنسيق البانر المخصص (shadowRoot)
       الفونت: inherit من المنصة | الأحجام: من BANNER فوق
    ========================================= */
    function applyCustomBannerStyles() {
        const customBanner = document.querySelector('salla-custom-banner-tzuk1f');
        if (!customBanner || !customBanner.shadowRoot) return false;

        const root = customBanner.shadowRoot;
        if (root.querySelector('#hero-matching-override')) return true;

        const style = document.createElement('style');
        style.id = 'hero-matching-override';
        style.textContent = `
            :host,
            .banner-container,
            .banner-container * {
                font-family: inherit !important;
            }

            :host, .banner-container {
                height: ${BANNER.height} !important;
                border-radius: ${BANNER.radius} !important;
                background-position: ${BANNER.bgPosition} !important;
                background-size: cover !important;
                box-sizing: border-box !important;
                display: flex !important;
                align-items: center !important;
                padding: 60px 40px !important;
                direction: rtl !important;
            }

            /* نقطة التركيز لكل الطبقات اللي ممكن الصورة تتحط عليها */
            .banner-content,
            .banner-overlay {
                background-position: ${BANNER.bgPosition} !important;
                background-size: cover !important;
            }

            .banner-content {
                width: 100% !important;
                height: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
            }

            /* عرض الحاوية = عرض الهيدلاين، والنص الفرعي بياخد نفس العرض */
            .banner-inner {
                width: fit-content !important;
                max-width: 550px !important;
                text-align: right !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
            }

            .banner-title, h2.banner-title {
                font-size: ${BANNER.titleSize} !important;
                font-weight: 900 !important;
                line-height: 1.2 !important;
                letter-spacing: -1px !important;
                margin-bottom: 20px !important;
                color: #333333 !important;
                text-align: right !important;
                width: auto !important;
            }

            .banner-description, p.banner-description {
                font-size: ${BANNER.descSize} !important;
                line-height: 1.6 !important;
                margin-bottom: 30px !important;
                /* width:0 + min-width:100% = النص ما يوسّعش الحاوية، ويلتزم بعرض الهيدلاين */
                width: 0 !important;
                min-width: 100% !important;
                max-width: none !important;
                text-align: right !important;
                color: #333333 !important;
                word-spacing: normal !important;
                letter-spacing: normal !important;
                white-space: normal !important;
            }

            .banner-cta {
                margin-inline-start: 0 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 12px 28px !important;
                border-radius: 10px !important;
                font-size: 1rem !important;
                font-weight: 600 !important;
                transition: all 0.3s ease !important;
            }

            .banner-cta:hover {
                transform: translateY(-2px) !important;
                opacity: 0.9 !important;
            }

            @media (max-width: 1024px) {
                :host, .banner-container { height: ${BANNER.heightTablet} !important; }
                .banner-title, h2.banner-title {
                    font-size: ${BANNER.titleSizeTablet} !important;
                    line-height: 1.2 !important;
                }
                .banner-inner { max-width: 380px !important; }
            }

            @media (max-width: 768px) {
                :host, .banner-container {
                    height: auto !important;
                    min-height: 480px !important;
                    padding: 30px 20px !important;
                    border-radius: ${BANNER.radiusMobile} !important;
                }
                .banner-inner { max-width: 100% !important; }
                .banner-title, h2.banner-title {
                    font-size: ${BANNER.titleSizeMobile} !important;
                    line-height: 1.25 !important;
                }
                .banner-description, p.banner-description {
                    font-size: ${BANNER.descSizeMobile} !important;
                    line-height: 1.45 !important;
                    max-width: 100% !important;
                }
                .banner-cta { width: 100% !important; box-sizing: border-box !important; }
            }
        `;
        root.appendChild(style);
        return true;
    }

    // الكومبوننت ممكن يتحمّل متأخر، فنحاول كذا مرة لحد ما يتطبق
    if (document.querySelector('salla-custom-banner-tzuk1f')) {
        if (!applyCustomBannerStyles()) {
            let tries = 0;
            const timer = setInterval(function () {
                tries++;
                if (applyCustomBannerStyles() || tries >= 30) clearInterval(timer);
            }, 500);
        }
    }
js
(function() {
    function fixBannerMobile() {
        // نتحقق إذا كان المستخدم على جوال (شاشة أصغر من 768 بكسل)
        const isMobile = window.innerWidth < 768;
        
        const banners = document.querySelectorAll('salla-custom-banner-rz4rt5');
        
        banners.forEach(banner => {
            if (banner.shadowRoot) {
                const container = banner.shadowRoot.querySelector('.banner-container');
                if (container) {
                    if (isMobile) {
                        // تعديل القيم مباشرة على الـ style الداخلي لتخطي أي قيود
                        container.style.setProperty('--banner-overlay-opacity', '0.6', 'important');
                        container.style.setProperty('--banner-text-color', '#ffffff', 'important');
                        
                        // تعديل ألوان النصوص مباشرة
                        const texts = banner.shadowRoot.querySelectorAll('.banner-title, .banner-description');
                        texts.forEach(t => t.style.setProperty('color', '#ffffff', 'important'));
                    } else {
                        // إرجاع القيم للأصل عند العودة للكمبيوتر
                        container.style.setProperty('--banner-overlay-opacity', '0', 'important');
                        container.style.setProperty('--banner-text-color', '#333333', 'important');
                        
                        const texts = banner.shadowRoot.querySelectorAll('.banner-title, .banner-description');
                        texts.forEach(t => t.style.setProperty('color', '#333333', 'important'));
                    }
                }
            }
        });
    }

    // التنفيذ عند تحميل الصفحة
    fixBannerMobile();
    
    // التنفيذ عند تغيير حجم الشاشة (مثلاً عند تدوير الموبايل)
    window.addEventListener('resize', fixBannerMobile);
    
    // محاولة التنفيذ عدة مرات للتأكد من أن المكونات قد تم بناؤها بالكامل
    let attempts = 0;
    const interval = setInterval(() => {
        fixBannerMobile();
        attempts++;
        if (attempts > 5) clearInterval(interval);
    }, 1000);
})();});
// Custom JavaScript
document.querySelectorAll('.advanced-slider__caption a, .advanced-slider__caption button').forEach(button => {
    button.addEventListener('click', function(e) {
        // منع الرابط الكبير (الأب) من العمل عند الضغط على الزر
        e.stopPropagation(); 
        
        // إذا كان الزر له رابط معين تريد توجيهه إليه يدوياً
        // window.location.href = "YOUR_LINK_HERE";
    });
});


(function() {
    function updateStoreLinks() {
        const links = document.querySelectorAll('a.btn-custom');
        
        links.forEach(link => {
            const text = link.textContent.trim();
            
            // 1. زر استكشف البرامج التدريبية
            if (text.includes('استكشف البرامج التدريبية')) {
                link.href = 'https://ealameuon-tc.com/training-programs/c70985783';
            }
            
            // 2. زر تعرف على المركز
            if (text.includes('تعرّف على المركز')) {
                // استبدل 'ضع_اللينك_هنا' بالرابط الذي تريده لصفحة المركز
                link.href = 'https://ealameuon-tc.com/about-us/page-1179448239'; 
            }
        });
    }

    // تنفيذ الكود
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', updateStoreLinks);
    } else {
        updateStoreLinks();
    }

    // مراقبة التغييرات في حال وجود سلايدر أو محتوى ديناميكي
    const observer = new MutationObserver(updateStoreLinks);
    observer.observe(document.body, { childList: true, subtree: true });
})();