// Netflix-style Homepage for Salla
document.addEventListener('DOMContentLoaded', function() {
    
    // 1. إنشاء الهيدر بأزرار الدعم والمنتجات
    function createNetflixHeader() {
        // إزالة الهيدر الحالي إذا موجود
        const oldHeader = document.querySelector('header, .header, .s-header');
        if (oldHeader) {
            oldHeader.style.display = 'none';
        }
        
        // إنشاء الهيدر الجديد
        const header = document.createElement('header');
        header.className = 'netflix-header';
        header.innerHTML = `
            <div style="display: flex; align-items: center; gap: 30px;">
                <a href="/" class="netflix-logo">NETFLIX-STYLE</a>
            </div>
            <div class="header-buttons">
                <a href="/support" class="support-btn">الدعم الفني</a>
                <a href="/products" class="products-btn">المنتجات</a>
            </div>
        `;
        header.style.cssText = `
            background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s ease;
        `;
        
        document.body.prepend(header);
        
        // تأثير التمرير
        window.addEventListener('scroll', function() {
            if (window.scrollY > 100) {
                header.style.backgroundColor = '#141414';
            } else {
                header.style.backgroundColor = 'transparent';
            }
        });
    }
    
    // 2. إنشاء البانر الرئيسي
    function createHeroBanner() {
        // إخفاء كل المحتوى الحالي
        document.querySelectorAll('main, .main-content, section, .container').forEach(el => {
            el.style.display = 'none';
        });
        
        const hero = document.createElement('div');
        hero.className = 'netflix-hero';
        hero.innerHTML = `
            <div class="hero-content">
                <h1>أفلام ومسلسلات لا حصر لها والمزيد</h1>
                <p style="font-size: 1.5rem; margin-bottom: 10px;">بسعر يبدأ من 35 رس. اشترك الآن واستمتع</p>
                <p style="font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9;">
                    هل أنت جاهز للمشاهدة؟ أدخل بريدك الإلكتروني لإنشاء عضويتك أو إعادة تشغيلها.
                </p>
                <div class="email-form">
                    <input type="email" placeholder="عنوان البريد الإلكتروني">
                    <button type="button" id="start-watching">البدء</button>
                </div>
            </div>
        `;
        
        // تطبيق تأثير التدرج على الصورة
        hero.style.cssText = `
            position: relative;
            height: 100vh;
            width: 100%;
            background: linear-gradient(to top, #141414 0%, transparent 50%), 
                        linear-gradient(to right, #141414 0%, transparent 30%),
                        url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1925&q=80');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        `;
        
        // إضافة طبقة داكنة فوق الصورة
        const overlay = document.createElement('div');
        overlay.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
            z-index: 1;
        `;
        hero.appendChild(overlay);
        
        document.body.appendChild(hero);
        
        // جعل البانر هو المحتوى الرئيسي
        document.body.insertBefore(hero, document.body.firstChild.nextSibling);
        
        // حدث زر البدء
        document.getElementById('start-watching').addEventListener('click', function() {
            const email = document.querySelector('.email-form input').value;
            if (email && email.includes('@')) {
                alert('شكراً لتسجيلك! ستتلقى رابط التنشيط على بريدك الإلكتروني.');
                // يمكنك إضافة تحويل إلى صفحة الدفع هنا
                window.location.href = '/checkout';
            } else {
                alert('الرجاء إدخال بريد إلكتروني صحيح');
            }
        });
        
        // حدث عند الضغط على Enter في حقل الإيميل
        document.querySelector('.email-form input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('start-watching').click();
            }
        });
    }
    
    // 3. إخفاء جميع المنتجات نهائياً
    function hideAllProducts() {
        const selectors = [
            '.product', '.products', '.product-list', '.product-grid',
            '.product-item', '.product-card', '[class*="product"]',
            '[class*="Product"]', '#products', 'main', 'section'
        ];
        
        selectors.forEach(selector => {
            document.querySelectorAll(selector).forEach(element => {
                if (element.innerHTML.includes('منتج') || 
                    element.innerHTML.includes('product') ||
                    element.innerHTML.includes('Product') ||
                    element.classList.toString().includes('product')) {
                    element.style.display = 'none';
                    element.style.visibility = 'hidden';
                    element.style.opacity = '0';
                    element.style.height = '0';
                    element.style.overflow = 'hidden';
                }
            });
        });
        
        // إخفاء الفوتر أيضاً
        document.querySelectorAll('footer, .footer, .s-footer').forEach(footer => {
            footer.style.display = 'none';
        });
    }
    
    // 4. ضمان بقاء الصفحة نظيفة
    function cleanPage() {
        // إزالة أي عناصر قد تظهر
        setInterval(() => {
            hideAllProducts();
            
            // إخفاء أي عناصر جديدة قد تظهر
            document.querySelectorAll('*').forEach(el => {
                const text = el.textContent || '';
                const classes = el.className || '';
                
                if (text.includes('ريال') || 
                    text.includes('سعر') || 
                    text.includes('SAR') ||
                    classes.includes('price') ||
                    classes.includes('add-to-cart') ||
                    el.tagName === 'BUTTON' && text.includes('شراء')) {
                    el.style.display = 'none';
                }
            });
        }, 1000);
    }
    
    // 5. تهيئة كل شيء
    function initializeNetflixPage() {
        // إخفاء كل شيء أولاً
        document.body.style.overflow = 'hidden';
        
        // إنشاء الهيدر
        createNetflixHeader();
        
        // إنشاء البانر الرئيسي
        createHeroBanner();
        
        // إخفاء المنتجات
        hideAllProducts();
        
        // تنظيف الصفحة باستمرار
        cleanPage();
        
        // إعادة تفعيل التمرير بعد تحميل كل شيء
        setTimeout(() => {
            document.body.style.overflow = 'auto';
        }, 2000);
    }
    
    // بدء التحميل
    setTimeout(initializeNetflixPage, 500);
    
    // إعادة التهيئة عند تغيير المحتوى
    const observer = new MutationObserver(initializeNetflixPage);
    observer.observe(document.body, { childList: true, subtree: true });
});