"""
UzorZen Advanced Tayyor Template'lar
Zamonaviy, yuqori sifatli va professional web sahifalar uchun
"""

from .core import Page


def create_modern_landing_page():
    """
    Zamonaviy Landing Page yaratish
    """
    page = Page("UzorZen - Zamonaviy Web Generator", theme="modern", language="uz")
    
    # Enhanced Meta Tags
    page.add_meta_tag("description", "UzorZen - Python bilan zamonaviy web sahifalar yarating. Bootstrap 5, responsive dizayn, animations va professional natijalar.")
    page.add_meta_tag("keywords", "UzorZen, Python, web generator, Bootstrap, responsive design, modern web")
    page.add_analytics("G-XXXXXXXXXX")  # Analytics tracking
    
    # Modern Navbar
    page.navbar(
        "UzorZen", 
        links=["Bosh sahifa", "Xususiyatlar", "Template'lar", "Narxlar", "Bog'lanish"],
        user_menu={"name": "Yoqubov", "items": ["Profil", "Sozlamalar", "Chiqish"]},
        transparent=True
    )
    
    # Enhanced Hero Section with Particles
    page.hero(
        "Zamonaviy Web Sahifalarni Tez Yaratish",
        "Python kod bilan professional web sahifalar yarating. Zamonaviy animatsiyalar, responsive dizayn va yuqori sifat natijalar.",
        background_image="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80",
        buttons=[
            {"text": "Hozir Boshlash", "style": "btn-primary-modern", "href": "#get-started"},
            {"text": "Demo Ko'rish", "style": "btn-outline-modern", "href": "#demo"}
        ],
        particles=True
    )
    
    # Statistics Section
    page.counter_section([
        {"value": 500, "label": "Tayyor Sahifalar", "icon": "bi-file-earmark-code"},
        {"value": 50, "label": "Template'lar", "icon": "bi-collection"},
        {"value": 1000, "label": "Soddalashtirilgan Dasturchilar", "icon": "bi-people"},
        {"value": 99, "label": "Muvaffaqiyat Foizi", "icon": "bi-graph-up-arrow"}
    ])
    
    # Enhanced Features Section
    features = [
        {
            "title": "Zamonaviy Dizayn",
            "description": "Bootstrap 5 asosida professional, responsive va zamonaviy dizayn. Glassmorphism, gradient va animatsiyalar bilan.",
            "image": "https://via.placeholder.com/400x250/667eea/white?text=Modern+Design",
            "button": {"text": "Namuna", "style": "btn-primary-modern", "href": "#design"},
            "icon": "bi-palette"
        },
        {
            "title": "Python Sintaksisi",
            "description": "Oddiy Python kodi bilan professional web sahifalar yarating. No kod bilish kerak emas - faqat Python!",
            "image": "https://via.placeholder.com/400x250/10b981/white?text=Python+Syntax",
            "button": {"text": "O'rganish", "style": "btn-success-modern", "href": "#python"},
            "icon": "bi-code-slash"
        },
        {
            "title": "Tayyor Komponentlar",
            "description": "20+ zamonaviy web komponent: navbar, hero, cards, gallery, modal, testimonials va boshqalar.",
            "image": "https://via.placeholder.com/400x250/3b82f6/white?text=Components",
            "button": {"text": "Ro'yxat", "style": "btn-info-modern", "href": "#components"},
            "icon": "bi-grid-3x3-gap"
        }
    ]
    
    for feature in features:
        page.add_card(
            feature["title"],
            feature["description"],
            feature["image"],
            feature["button"],
            "modern",
            "fade-up"
        )
    
    # Testimonials Section
    page.testimonial_section([
        {
            "quote": "UzorZen mening dasturlash hayotimni o'zgartirdi. Endi professional sahifalarni daqiqalarda yarata olaman!",
            "author": "Alisher Karimov",
            "role": "Python Dasturchisi",
            "avatar": "https://via.placeholder.com/80x80/4f46e5/white?text=A"
        },
        {
            "quote": "Startup uchun tez-tez landing page yaratishim kerak edi. UzorZen bu jarayonni 10 baravar tezlashtirdi.",
            "author": "Madina Tohirova",
            "role": "Startup Asoschisi",
            "avatar": "https://via.placeholder.com/80x80/7c3aed/white?text=M"
        }
    ])
    
    # Enhanced CTA Section
    page.hero(
        "Endi Web Sahifa Yaratishni Boshlang!",
        "Bir nechta Python satri bilan professional natija oling. Hoziroq boshlang va tezroq natija ko'ring.",
        buttons=[
            {"text": "Bepul Boshlash", "style": "btn-success-modern", "href": "#get-started"},
            {"text": "Hujjatlar", "style": "btn-outline-modern", "href": "#docs"},
            {"text": "Video Darslik", "style": "btn-outline-modern", "href": "#video"}
        ]
    )
    
    # Enhanced Footer with comprehensive info
    page.footer(
        "UzorZen - Python bilan zamonaviy web sahifalar yaratish orqali tezkor va professional natijalar oling.",
        ["Bosh sahifa", "API Hujjatlari", "Template'lar", "Blog", "Yordam"],
        {
            "Telegram": "https://t.me/UzMaxBoy",
            "Instagram": "https://instagram.com/penzenuz",
            "GitHub": "https://github.com/rakuzen",
            "YouTube": "https://youtube.com/@uzmaxboy",
            "LinkedIn": "https://linkedin.com/in/rakuzen"
        },
        {
            "address": "Toshkent, O'zbekiston",
            "phone": "+998 90 123 45 67",
            "email": "info@uzorzen.com",
            "working_hours": "Dushanba-Juma 9:00-18:00"
        }
    )
    
    # Custom CSS for enhanced animations
    page.add_css("""
        .hero-section {
            background-attachment: fixed;
        }
        
        .modern-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .glassmorphism {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    """)
    
    # Custom JavaScript for enhanced functionality
    page.add_js("""
        // Enhanced particle effects
        document.addEventListener('DOMContentLoaded', function() {
            // Smooth scroll enhancement
            AOS.init({
                duration: 1000,
                easing: 'ease-out-cubic',
                once: true,
                offset: 50
            });
            
            // Custom animations
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate__animated', 'animate__fadeInUp');
                    }
                });
            });
            
            document.querySelectorAll('.modern-card').forEach(card => {
                observer.observe(card);
            });
        });
    """)
    
    return page


def create_advanced_portfolio():
    """
    Advanced Portfolio sahifa yaratish
    """
    page = Page("Yoqubov Portfolio - Full Stack Dasturchi", theme="modern", language="uz")
    
    # Portfolio Navbar
    page.navbar(
        "Yoqubov Portfolio",
        links=["Men Haqimda", "Loyihalar", "Tajriba", "Ko'nikmalar", "Bog'lanish"],
        user_menu={"name": "Portfolio", "items": ["CV Yuklash", "Print Resume"]},
        sticky=True
    )
    
    # Professional Hero with typing effect
    page.hero(
        "Yoqubov Javohir",
        "Full Stack Dasturchi | Python Specialist | UI/UX Dizayner | RaKUZEN - UzorZen loyihasi muallifi. Zamonaviy veb-ilovalar va mobil dasturlar yaratishda 5+ yillik tajriba.",
        background_image="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1974&q=80",
        buttons=[
            {"text": "Loyihalar Ko'rish", "style": "btn-primary-modern", "href": "#projects"},
            {"text": "Bog'lanish", "style": "btn-outline-modern", "href": "#contact"}
        ],
        gradient=False
    )
    
    # About Section with modern cards
    about_content = """
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6" data-aos="fade-right">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" 
                     class="img-fluid rounded-circle shadow-lg" style="max-width: 300px;" alt="Yoqubov">
            </div>
            <div class="col-lg-6" data-aos="fade-left">
                <h3 class="text-gradient mb-4">Dasturchi va Dizayner</h3>
                <p class="lead mb-4">Men Yoqubov Javohirman, Python va web texnologiyalari bo'yicha tajribali dasturchi. Zamonaviy va foydalanuvchilar uchun qulay interfeyslar yaratishda ixtisoslashganman.</p>
                <div class="row g-3">
                    <div class="col-6">
                        <h5 class="text-primary">5+</h5>
                        <p class="mb-0">Yillik Tajriba</p>
                    </div>
                    <div class="col-6">
                        <h5 class="text-success">50+</h5>
                        <p class="mb-0">Tugallangan Loyihalar</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    """
    
    page.content.append(f"""
    <section class="py-5">
        {about_content}
    </section>
    """)
    
    # Skills Section
    skills = [
        {"title": "Python", "level": 95, "color": "#3776ab"},
        {"title": "JavaScript", "level": 90, "color": "#f7df1e"},
        {"title": "React", "level": 85, "color": "#61dafb"},
        {"title": "Node.js", "level": 88, "color": "#339933"},
        {"title": "MongoDB", "level": 82, "color": "#47a248"},
        {"title": "UI/UX Design", "level": 92, "color": "#ff6b6b"}
    ]
    
    skills_html = """
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <h2 class="fw-bold">Ko'nikmalar</h2>
            </div>
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="row g-4">
    """
    
    for skill in skills:
        skills_html += f"""
                        <div class="col-md-6" data-aos="fade-up" data-aos-delay="{skills.index(skill)*100}">
                            <div class="modern-card p-4">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="mb-0">{skill['title']}</h6>
                                    <span class="fw-bold" style="color: {skill['color']}">{skill['level']}%</span>
                                </div>
                                <div class="progress" style="height: 8px;">
                                    <div class="progress-bar" role="progressbar" 
                                         style="width: {skill['level']}%; background: {skill['color']};"></div>
                                </div>
                            </div>
                        </div>
        """
    
    skills_html += """
                    </div>
                </div>
            </div>
        </div>
    </section>
    """
    
    page.content.append(skills_html)
    
    # Projects Gallery
    projects = [
        {
            "title": "UzorZen - Web Generator",
            "description": "Python asosida zamonaviy web sahifalar generatori",
            "image": "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2015&q=80",
            "tech": ["Python", "Jinja2", "Bootstrap 5", "CSS3"],
            "demo": "#",
            "github": "#"
        },
        {
            "title": "E-Commerce Platform",
            "description": "Zamonaviy online do'kon platformasi",
            "image": "https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1974&q=80",
            "tech": ["React", "Node.js", "MongoDB", "Stripe"],
            "demo": "#",
            "github": "#"
        },
        {
            "title": "Task Management App",
            "description": "Komanda uchun vazifa boshqarish ilovasi",
            "image": "https://images.unsplash.com/photo-1543286386-2e659306cd6c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80",
            "tech": ["Vue.js", "Laravel", "MySQL", "PWA"],
            "demo": "#",
            "github": "#"
        },
        {
            "title": "AI Chatbot",
            "description": "Mijoz xizmati uchun aqlli chatbot",
            "image": "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80",
            "tech": ["Python", "TensorFlow", "Flask", "Docker"],
            "demo": "#",
            "github": "#"
        }
    ]
    
    # Add project cards
    for project in projects:
        project_html = f"""
        <div class="col-lg-6 mb-4" data-aos="fade-up">
            <div class="modern-card h-100">
                <img src="{project['image']}" class="card-img-top" alt="{project['title']}" style="height: 200px; object-fit: cover;">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title">{project['title']}</h5>
                    <p class="card-text flex-grow-1">{project['description']}</p>
                    <div class="mb-3">
                        {' '.join([f'<span class="badge bg-secondary me-1">{tech}</span>' for tech in project['tech']])}
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{project['demo']}" class="btn btn-primary-modern flex-fill">Demo</a>
                        <a href="{project['github']}" class="btn btn-outline-modern flex-fill">
                            <i class="bi bi-github"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        """
        page.content.append(f"""
        <section class="py-5">
            <div class="container">
                <div class="row g-4">
                    {project_html}
                </div>
            </div>
        </section>
        """)
    
    # Contact Form Modal
    page.modal(
        "contactModal",
        "Bog'lanish",
        """
        <div class="text-center">
            <i class="bi bi-envelope display-4 text-primary mb-3"></i>
            <h5>Men bilan bog'laning!</h5>
            <div class="row g-3 mt-4">
                <div class="col-12">
                    <strong>Email:</strong> javohir@uzorzen.com
                </div>
                <div class="col-12">
                    <strong>Telegram:</strong> @UzMaxBoy
                </div>
                <div class="col-12">
                    <strong>Telefon:</strong> +998 90 123 45 67
                </div>
                <div class="col-12">
                    <strong>LinkedIn:</strong> linkedin.com/in/javohir-yoqubov
                </div>
            </div>
        </div>
        """
    )
    
    # Enhanced Footer
    page.footer(
        "Python va zamonaviy web texnologiyalari bilan professional dasturlash va dizayn xizmatlari.",
        ["Loyihalar", "Xizmatlar", "Blog", "Bog'lanish"],
        {
            "Telegram": "https://t.me/UzMaxBoy",
            "Instagram": "https://instagram.com/penzenuz",
            "GitHub": "https://github.com/rakuzen",
            "LinkedIn": "https://linkedin.com/in/javohir-yoqubov",
            "YouTube": "https://youtube.com/@uzmaxboy"
        },
        {
            "address": "Toshkent, O'zbekiston",
            "phone": "+998 90 123 45 67",
            "email": "javohir@uzorzen.com",
            "working_hours": "Dushanba-Juma 9:00-18:00"
        }
    )
    
    return page


def create_modern_dashboard():
    """
    Modern Dashboard sahifa yaratish
    """
    page = Page("Admin Dashboard - Zamonaviy Boshqaruv", theme="dark", language="uz")
    
    # Dashboard Navbar
    page.navbar(
        "Dashboard",
        links=["Umumiy", "Foydalanuvchilar", "Tahlillar", "Sozlamalar"],
        user_menu={"name": "Admin", "items": ["Profil", "Xabarlar", "Sozlamalar", "Chiqish"]}
    )
    
    # Dashboard Hero with statistics
    page.hero(
        "Dashboard Overview",
        "Real-time ma'lumotlar va tahlillar. Barcha muhim KPI va metrikalar bitta joyda.",
        background_image="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80",
        buttons=[
            {"text": "Barcha Tahlillar", "style": "btn-primary-modern", "href": "#analytics"},
            {"text": "Hisobotlar", "style": "btn-outline-modern", "href": "#reports"}
        ]
    )
    
    # KPI Cards
    page.counter_section([
        {"value": 1250, "label": "Jami Foydalanuvchilar", "icon": "bi-people"},
        {"value": 89, "label": "Oylik Aktivlik %", "icon": "bi-graph-up-arrow"},
        {"value": 45600, "label": "Jami Daromad", "icon": "bi-currency-dollar"},
        {"value": 234, "label": "Support Tickets", "icon": "bi-headset"}
    ])
    
    # Charts Section (placeholder for charts)
    charts_html = """
    <section class="py-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-8" data-aos="fade-up">
                    <div class="modern-card p-4">
                        <h5 class="mb-4">Daromad Tahlili</h5>
                        <div class="text-center text-muted">
                            <i class="bi bi-bar-chart display-4"></i>
                            <p>Chart integration would go here</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="modern-card p-4">
                        <h5 class="mb-4">Oxirgi Faoliyatlar</h5>
                        <div class="list-group list-group-flush">
                            <div class="list-group-item d-flex align-items-center">
                                <div class="badge bg-success rounded-circle me-3">+1</div>
                                <div>
                                    <h6 class="mb-0">Yangi foydalanuvchi</h6>
                                    <small class="text-muted">5 daqiqa oldin</small>
                                </div>
                            </div>
                            <div class="list-group-item d-flex align-items-center">
                                <div class="badge bg-primary rounded-circle me-3">$</div>
                                <div>
                                    <h6 class="mb-0">Yangi buyurtma</h6>
                                    <small class="text-muted">15 daqiqa oldin</small>
                                </div>
                            </div>
                            <div class="list-group-item d-flex align-items-center">
                                <div class="badge bg-warning rounded-circle me-3">!</div>
                                <div>
                                    <h6 class="mb-0">System alert</h6>
                                    <small class="text-muted">1 soat oldin</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    """
    
    page.content.append(charts_html)
    
    # Recent Activity Table
    page.modal(
        "activityModal",
        "Barcha Faoliyatlar",
        "Oxirgi 24 soat ichidagi barcha faoliyatlar ro'yxati"
    )
    
    page.footer("Admin Dashboard - Zamonaviy boshqaruv tizimi")
    
    return page


def create_advanced_login_page():
    """
    Zamonaviy Login sahifa yaratish
    """
    page = Page("Tizimga Kirish - UzorZen", theme="modern", language="uz")
    
    # Minimal Navbar
    page.navbar(
        "UzorZen",
        links=["Bosh sahifa", "Ro'yxatdan o'tish", "Yordam"],
        transparent=True
    )
    
    # Login Hero
    page.hero(
        "Xush Kelibsiz!",
        "Hisobingizga kiring yoki yangi hisob yarating",
        gradient=True
    )
    
    # Modern Login Form
    login_form = """
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6 col-xl-5">
            <div class="modern-card p-5" data-aos="zoom-in">
                <div class="text-center mb-5">
                    <div class="glassmorphism p-4 rounded-circle d-inline-block mb-3">
                        <i class="bi bi-person-circle display-4 text-gradient"></i>
                    </div>
                    <h3 class="fw-bold text-gradient">Tizimga Kirish</h3>
                    <p class="text-muted">Hisob ma'lumotlaringizni kiriting</p>
                </div>
                
                <form>
                    <div class="mb-4">
                        <label class="form-label fw-bold">Email manzili</label>
                        <div class="input-group">
                            <span class="input-group-text bg-transparent border-end-0">
                                <i class="bi bi-envelope"></i>
                            </span>
                            <input type="email" class="form-control border-start-0 ps-0" 
                                   placeholder="email@example.com" style="border-left: none;">
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label fw-bold">Parol</label>
                        <div class="input-group">
                            <span class="input-group-text bg-transparent border-end-0">
                                <i class="bi bi-lock"></i>
                            </span>
                            <input type="password" class="form-control border-start-0 ps-0" 
                                   placeholder="Parolingizni kiriting" style="border-left: none;">
                            <button class="btn btn-outline-secondary border-start-0" type="button">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-4 form-check">
                        <input type="checkbox" class="form-check-input" id="remember">
                        <label class="form-check-label" for="remember">
                            Meni eslab qol
                        </label>
                    </div>
                    
                    <button type="submit" class="btn btn-primary-modern w-100 btn-lg mb-4">
                        <i class="bi bi-box-arrow-in-right me-2"></i>Kirish
                    </button>
                </form>
                
                <div class="text-center mb-4">
                    <a href="#" class="text-gradient text-decoration-none">Parolni unutdingizmi?</a>
                </div>
                
                <hr class="my-4">
                
                <div class="text-center">
                    <p class="text-muted mb-3">Yoki quyidagilar orqali kiring</p>
                    <div class="d-flex justify-content-center gap-3 mb-4">
                        <button class="social-icon">
                            <i class="bi bi-google"></i>
                        </button>
                        <button class="social-icon">
                            <i class="bi bi-github"></i>
                        </button>
                        <button class="social-icon">
                            <i class="bi bi-linkedin"></i>
                        </button>
                    </div>
                    
                    <p class="text-muted">
                        Hisobingiz yo'qmi? 
                        <a href="#register" class="text-gradient text-decoration-none fw-bold">
                            Ro'yxatdan o'ting
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    """
    
    # Add login content
    page.content.append(f"""
    <section class="py-5">
        <div class="container">
            {login_form}
        </div>
    </section>
    """)
    
    page.footer("© 2025 UzorZen. Barcha huquqlar himoyalangan.")
    
    return page


def create_premium_product_page():
    """
    Premium Mahsulot sahifa yaratish
    """
    page = Page("UzorZen Pro - Premium Python Web Generator", theme="modern", language="uz")
    
    # Product Navbar
    page.navbar(
        "UzorZen Pro",
        links=["Xususiyatlar", "Narxlar", "Demo", "Bog'lanish"],
        user_menu={"name": "Xaridor", "items": ["Savat", "Buyurtmalar", "Sozlamalar"]}
    )
    
    # Product Hero with pricing emphasis
    page.hero(
        "UzorZen Pro",
        "Professional Python Web Generator - Cheksiz sahifalar, premium komponentlar va priority qo'llab-quvvatlash",
        background_image="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80",
        buttons=[
            {"text": "Hozir Sotib Olish - $29", "style": "btn-success-modern", "href": "#buy"},
            {"text": "14 Kunlik Bepul Test", "style": "btn-outline-modern", "href": "#trial"}
        ],
        particles=True
    )
    
    # Feature Comparison
    features_comparison = """
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <h2 class="fw-bold">UzorZen Pro vs UzorZen Free</h2>
            </div>
            <div class="row">
                <div class="col-lg-6" data-aos="fade-right">
                    <div class="modern-card p-4">
                        <h5 class="text-gradient mb-4">UzorZen Free</h5>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="bi bi-check-circle text-success"></i> 5 ta sahifa yaratish</li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success"></i> Asosiy komponentlar</li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success"></i> Bootstrap 5</li>
                            <li class="mb-2"><i class="bi bi-x-circle text-danger"></i> Premium komponentlar</li>
                            <li class="mb-2"><i class="bi bi-x-circle text-danger"></i> Priority support</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-left">
                    <div class="modern-card p-4 border-2 border-primary">
                        <div class="badge bg-primary mb-3">RECOMMENDED</div>
                        <h5 class="text-gradient mb-4">UzorZen Pro</h5>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="bi bi-check-circle text-success"></i> Cheksiz sahifalar</li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success"></i> 50+ premium komponent</li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success"></i> Advanced animations</li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success"></i> Priority qo'llab-quvvatlash</li>
                            <li class="mb-2"><i class="bi bi-check-circle text-success"></i> Monthly updates</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    """
    
    page.content.append(features_comparison)
    
    # Pricing Tiers
    pricing_plans = [
        {
            "name": "Free",
            "price": "0",
            "period": "forever",
            "features": ["5 sahifa", "Asosiy komponentlar", "Community support"],
            "button": {"text": "Boshlang", "style": "btn-outline-modern"}
        },
        {
            "name": "Pro",
            "price": "29",
            "period": "month",
            "features": ["Cheksiz sahifalar", "50+ premium komponent", "Priority support"],
            "button": {"text": "Hozir Sotib Olish", "style": "btn-primary-modern"},
            "popular": True
        },
        {
            "name": "Enterprise",
            "price": "99",
            "period": "month",
            "features": ["Custom development", "White-label", "Dedicated support"],
            "button": {"text": "Bog'lanish", "style": "btn-success-modern"}
        }
    ]
    
    pricing_html = """
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <h2 class="fw-bold">Narxlar Rejasi</h2>
                <p class="text-muted">Barcha ehtiyojlaringizga mos reja tanlang</p>
            </div>
            <div class="row justify-content-center">
    """
    
    for plan in pricing_plans:
        popular_badge = '<div class="badge bg-primary position-absolute top-0 start-50 translate-middle px-3 py-2">POPULAR</div>' if plan.get('popular') else ''
        
        pricing_html += f"""
                <div class="col-lg-4 col-md-6 mb-4" data-aos="zoom-in" data-aos-delay="{pricing_plans.index(plan)*200}">
                    <div class="modern-card p-4 h-100 position-relative">
                        {popular_badge}
                        <div class="text-center">
                            <h4 class="text-gradient">{plan['name']}</h4>
                            <div class="display-4 fw-bold my-3">
                                $<span class="counter" data-target="{plan['price']}">{plan['price']}</span>
                                <small class="text-muted">/{plan['period']}</small>
                            </div>
                            <ul class="list-unstyled mb-4">
                                {' '.join([f'<li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>{feature}</li>' for feature in plan['features']])}
                            </ul>
                            <a href="#buy" class="btn {plan['button']['style']} w-100">
                                {plan['button']['text']}
                            </a>
                        </div>
                    </div>
                </div>
        """
    
    pricing_html += """
            </div>
        </div>
    </section>
    """
    
    page.content.append(pricing_html)
    
    page.footer()
    
    return page


# Legacy functions for backward compatibility
def create_landing_page():
    """Legacy landing page function"""
    return create_modern_landing_page()

def create_portfolio_page():
    """Legacy portfolio page function"""
    return create_advanced_portfolio()

def create_dashboard_page():
    """Legacy dashboard page function"""
    return create_modern_dashboard()

def create_login_page():
    """Legacy login page function"""
    return create_advanced_login_page()

def create_product_page():
    """Legacy product page function"""
    return create_premium_product_page()