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

    // 1. إضافة النبذة التعريفية وأزرار السياسات أسفل الهيدر (مطابق لهيدر ثيم ملاك)
    const header = document.querySelector('.store-header') || document.querySelector('header.site-header') || document.querySelector('.main-nav-container');
    if (header && !document.querySelector('.malak-bio-section')) {
        const bioSection = document.createElement('div');
        bioSection.className = 'malak-bio-section';
        bioSection.innerHTML = `
            <div class="malak-bio-text">
                أهلاً بكم في متجرنا، براند سعودي مسجل وموثق، نقدم لكم أجود المنتجات الطبيعية بمعايير عالية ونتائج مضمونة.
            </div>
            <div class="malak-bio-pills">
                <a href="/p/return-policy" class="malak-pill-btn">سياسة الإستبدال والإسترجاع</a>
                <a href="#testimonials" class="malak-pill-btn">آراء العملاء</a>
            </div>
            <div style="margin-top: 6px;">
                <a href="#products" class="malak-pill-btn" style="background:#e8dae4; padding: 4px 22px;">الأقسام ▾</a>
            </div>
        `;
        header.insertAdjacentElement('afterend', bioSection);
    }

    // 2. تحويل قسم المنتج الواحد في رائد إلى تصميم "كورس علاجي 36 علبه" الخاص بثيم ملاك
    const allBlocks = document.querySelectorAll('.s-block');
    allBlocks.forEach(block => {
        const productCards = block.querySelectorAll('.s-product-card-entry');
        // إذا كان القسم يحتوي على منتج واحد فقط
        if (productCards.length === 1 && !block.classList.contains('malak-single-spotlight-section')) {
            block.classList.add('malak-single-spotlight-section');
            const card = productCards[0];

            // إنشاء العنوان الزخرفي الفاتح أعلى البطاقة
            const watermark = document.createElement('div');
            watermark.className = 'malak-spotlight-watermark';
            watermark.textContent = 'عرض التوفير الخاص';
            block.insertBefore(watermark, block.firstChild);

            // تغليف البطاقة بحاوية متمركزة
            const wrapper = document.createElement('div');
            wrapper.className = 'malak-single-spotlight-wrapper';
            card.parentNode.insertBefore(wrapper, card);
            wrapper.appendChild(card);

            // قراءة السعر ورابط المنتج لإنشاء الشريط السفلي الخارجي (زر اشتر الآن يمين + السعر يسار)
            const priceEl = card.querySelector('.s-product-card-sale-price, .s-product-card-price');
            const linkEl = card.querySelector('.s-product-card-content-title a');
            const priceText = priceEl ? priceEl.textContent.trim() : '';
            const productUrl = linkEl ? linkEl.getAttribute('href') : '#';

            // إخفاء السعر والزر الداخليين لمنع التكرار
            const internalSub = card.querySelector('.s-product-card-content-sub');
            const internalFooter = card.querySelector('.s-product-card-content-footer');
            if (internalSub) internalSub.style.display = 'none';
            if (internalFooter) internalFooter.style.display = 'none';

            // إنشاء الشريط الخارجي أسفل البطاقة البيضاء
            const externalBar = document.createElement('div');
            externalBar.className = 'malak-external-action-bar';
            externalBar.innerHTML = `
                <a href="${productUrl}" class="malak-buy-btn">
                    <span>اشتر الآن</span>
                    <i class="sicon-shopping-bag"></i>
                </a>
                <div class="malak-spot-price">${priceText}</div>
            `;
            wrapper.insertAdjacentElement('afterend', externalBar);
        }
    });

    // 3. دمج البنرات العريضة المتتالية بدون أي فراغات بيضاء بينها
    const bannerBlocks = document.querySelectorAll('.s-block--fixed-banner, .s-block--hero-slider, .s-block--full-banner');
    bannerBlocks.forEach(banner => {
        const next = banner.nextElementSibling;
        if (next && (next.classList.contains('s-block--fixed-banner') || next.classList.contains('s-block--full-banner'))) {
            banner.style.marginBottom = '0px';
            next.style.marginTop = '0px';
        }
    });

    // 4. إضافة شريط النشرة البريدية أعلى الفوتر (ميزة ثيم ملاك)
    const footer = document.querySelector('.store-footer') || document.querySelector('footer.site-footer');
    if (footer && !document.querySelector('.malak-newsletter-bar')) {
        const newsletter = document.createElement('div');
        newsletter.className = 'malak-newsletter-bar';
        newsletter.innerHTML = `
            <div class="malak-newsletter-container">
                <div style="text-align: right;">
                    <h4 style="margin: 0 0 4px; font-weight: 800; font-size: 1rem;">الاشتراك في القائمة البريدية</h4>
                    <p style="margin: 0; font-size: 0.78rem; color: #82757c;">انضم الآن واحصل على خصم 10% على طلبك القادم</p>
                </div>
                <form class="malak-newsletter-form" onsubmit="event.preventDefault(); alert('تم الاشتراك بنجاح!');">
                    <input type="email" placeholder="ادخل بريدك الإلكتروني" required />
                    <button type="submit">اشترك</button>
                </form>
            </div>
        `;
        footer.insertAdjacentElement('beforebegin', newsletter);
    }
});