"""
UzorZen Advanced Misollar
Zamonaviy va yuqori sifatli web sahifalar yaratish misollari
"""

from uzorzen import Page

# Advanced Modern Landing Page Example
print("=== UzorZen Advanced Landing Page ===")

# Create a modern landing page with all advanced features
modern_page = Page("UzorZen - Professional Web Generator", theme="modern", language="uz")

# Add enhanced meta tags
modern_page.add_meta_tag("description", "UzorZen - Python bilan zamonaviy professional web sahifalar yarating. Bootstrap 5, animations, responsive design.")
modern_page.add_meta_tag("keywords", "UzorZen, Python, web generator, professional design, modern templates")
modern_page.add_analytics("G-XXXXXXXXXX")

# Modern transparent navbar
modern_page.navbar(
    "UzorZen Pro", 
    links=["Bosh sahifa", "Xususiyatlar", "Template'lar", "Narxlar", "Bog'lanish"],
    user_menu={"name": "Yoqubov", "items": ["Profil", "Sozlamalar", "Chiqish"]},
    transparent=True
)

# Enhanced hero with particles
modern_page.hero(
    "Professional Web Sahifalarni Tez Yaratish",
    "Python kod bilan zamonaviy, responsive va professional web sahifalar yarating. Glassmorphism, gradients, animations va premium komponentlar.",
    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": "Live Demo", "style": "btn-outline-modern", "href": "#demo"}
    ],
    particles=True
)

# Statistics section
modern_page.counter_section([
    {"value": 1000, "label": "Tayyor Sahifalar", "icon": "bi-file-earmark-code"},
    {"value": 75, "label": "Premium Template'lar", "icon": "bi-collection"},
    {"value": 5000, "label": "Aktiv Foydalanuvchilar", "icon": "bi-people"},
    {"value": 99, "label": "Muvaffaqiyat Darajasi", "icon": "bi-graph-up-arrow"}
])

# Advanced features with modern cards
features = [
    {
        "title": "Glassmorphism Design",
        "description": "Zamonaviy glassmorphism effekti bilan professional sahifalar. Shaffoflik va blur effektlari bilan jozibali dizayn.",
        "image": "https://via.placeholder.com/400x300/667eea/white?text=Glassmorphism",
        "button": {"text": "Namuna Ko'rish", "style": "btn-primary-modern", "href": "#glassmorphism"},
        "icon": "bi-palette"
    },
    {
        "title": "Advanced Animations",
        "description": "AOS, CSS animations va JavaScript bilan premium animatsiyalar. Smooth scroll, fade-up, zoom va boshqa professional animatsiyalar.",
        "image": "https://via.placeholder.com/400x300/10b981/white?text=Animations",
        "button": {"text": "Demo", "style": "btn-success-modern", "href": "#animations"},
        "icon": "bi-lightning"
    },
    {
        "title": "Responsive Excellence",
        "description": "Mobile-first approach bilan mukammal responsive dizayn. Barcha qurilmalarda professional ko'rinish.",
        "image": "https://via.placeholder.com/400x300/3b82f6/white?text=Responsive",
        "button": {"text": "Test Qilish", "style": "btn-info-modern", "href": "#responsive"},
        "icon": "bi-phone"
    }
]

for feature in features:
    modern_page.add_card(
        feature["title"],
        feature["description"],
        feature["image"],
        feature["button"],
        "modern",
        "fade-up"
    )

# Testimonials section
modern_page.testimonial_section([
    {
        "quote": "UzorZen mening web dizayn tajribasini tubdan o'zgartirdi. Endi professional natijalarni daqiqalarda yarata olaman!",
        "author": "Alisher Karimov",
        "role": "Full Stack Developer",
        "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 va sifatini oshirdi.",
        "author": "Madina Tohirova", 
        "role": "Startup Founder",
        "avatar": "https://via.placeholder.com/80x80/7c3aed/white?text=M"
    },
    {
        "quote": "Frontend bilimlarim cheklangan edi. Endi Python kodi bilan professional sahifalar yaratishim mumkin!",
        "author": "Azizbek Rahmonov",
        "role": "Python Developer",
        "avatar": "https://via.placeholder.com/80x80/dc2626/white?text=A"
    }
])

# Enhanced call-to-action
modern_page.hero(
    "Endi Professional Web Sahifalar Yaratishni Boshlang!",
    "Cheksiz imkoniyatlar, premium komponentlar va professional natijalar siz kutmoqda.",
    buttons=[
        {"text": "Bepul Boshlash", "style": "btn-success-modern", "href": "#start"},
        {"text": "Premium Ko'rish", "style": "btn-primary-modern", "href": "#premium"},
        {"text": "Hujjatlar", "style": "btn-outline-modern", "href": "#docs"}
    ]
)

# Enhanced footer with comprehensive information
modern_page.footer(
    "UzorZen - Python bilan zamonaviy web sahifalar yaratishda professional va tezkor yechim. Modern dizayn, premium komponentlar va mukammal natijalar.",
    ["Bosh sahifa", "API Hujjatlari", "Template'lar", "Video Darsliklar", "Blog", "Yordam", "Bog'lanish"],
    {
        "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",
        "Discord": "https://discord.gg/uzorzen"
    },
    {
        "address": "Toshkent, O'zbekiston",
        "phone": "+998 90 123 45 67",
        "email": "info@uzorzen.com",
        "working_hours": "Dushanba-Juma 9:00-18:00",
        "timezone": "UTC+5 (Toshkent)"
    }
)

# Custom CSS for advanced effects
modern_page.add_css("""
    /* Glassmorphism Effects */
    .glassmorphism {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    /* Enhanced Animations */
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
    
    /* Gradient Text Effects */
    .text-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #764ba2, #667eea);
    }
    
    /* Particle Background */
    .particle-bg {
        position: relative;
        overflow: hidden;
    }
    
    .particle-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(120, 200, 255, 0.3) 0%, transparent 50%);
        animation: particleMove 20s ease-in-out infinite;
    }
    
    @keyframes particleMove {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33% { transform: translate(30px, -30px) rotate(120deg); }
        66% { transform: translate(-20px, 20px) rotate(240deg); }
    }
""")

# Custom JavaScript for enhanced functionality
modern_page.add_js("""
    // Advanced UzorZen Enhancements
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize AOS with custom settings
        AOS.init({
            duration: 1200,
            easing: 'ease-in-out-cubic',
            once: true,
            offset: 100,
            delay: 100
        });
        
        // Custom mouse parallax effect
        const mouseParallax = document.querySelector('.hero-section');
        if (mouseParallax) {
            mouseParallax.addEventListener('mousemove', (e) => {
                const x = e.clientX / window.innerWidth;
                const y = e.clientY / window.innerHeight;
                
                mouseParallax.style.transform = 
                    `translateX(${x * 20}px) translateY(${y * 20}px)`;
            });
        }
        
        // Typing effect for hero title
        const typingElements = document.querySelectorAll('.typing-effect');
        typingElements.forEach(element => {
            const text = element.textContent;
            element.textContent = '';
            
            let i = 0;
            const typeWriter = () => {
                if (i < text.length) {
                    element.textContent += text.charAt(i);
                    i++;
                    setTimeout(typeWriter, 50);
                }
            };
            
            setTimeout(typeWriter, 500);
        });
        
        // Smooth scroll enhancement
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Theme toggle functionality
        const themeToggle = document.getElementById('theme-toggle');
        if (themeToggle) {
            themeToggle.addEventListener('click', () => {
                document.body.classList.toggle('dark-theme');
            });
        }
        
        // Performance monitoring
        console.log('UzorZen Advanced Page Loaded Successfully!');
    });
    
    // Particles.js configuration
    if (typeof particlesJS !== 'undefined') {
        particlesJS('particles-js', {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: '#667eea' },
                shape: {
                    type: 'circle',
                    stroke: { width: 0, color: '#000000' }
                },
                opacity: {
                    value: 0.5,
                    random: false,
                    animation: { enable: false }
                },
                size: {
                    value: 3,
                    random: true,
                    animation: { enable: false }
                },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: '#667eea',
                    opacity: 0.4,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 6,
                    direction: 'none',
                    random: false,
                    straight: false,
                    out_mode: 'out',
                    bounce: false,
                    attract: { enable: false }
                }
            },
            interactivity: {
                detect_on: 'canvas',
                events: {
                    onhover: { enable: true, mode: 'repulse' },
                    onclick: { enable: true, mode: 'push' },
                    resize: true
                },
                modes: {
                    grab: { distance: 400, line_linked: { opacity: 1 } },
                    bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
                    repulse: { distance: 200, duration: 0.4 },
                    push: { particles_nb: 4 },
                    remove: { particles_nb: 2 }
                }
            },
            retina_detect: true
        });
    }
""")

# Save the modern page
result1 = modern_page.save("advanced_modern_landing.html")
print(f"✅ {result1}")

# Export configuration
config_result = modern_page.export_config("advanced_config.json")
print(f"📄 {config_result}")

print("\n" + "="*50)
print("=== Premium Portfolio Example ===")

# Create an advanced portfolio
portfolio_page = Page("Yoqubov Portfolio - Premium Developer", theme="modern", language="uz")

# Portfolio navbar
portfolio_page.navbar(
    "Yoqubov Portfolio",
    links=["Haqimda", "Loyihalar", "Tajriba", "Ko'nikmalar", "Bog'lanish"],
    user_menu={"name": "Portfolio", "items": ["CV Yuklash", "Print Resume", "Download PDF"]},
    transparent=True
)

# Professional hero
portfolio_page.hero(
    "Yoqubov Javohir - Premium Developer",
    "Full Stack Developer | Python Expert | UI/UX Designer | RaKUZEN - UzorZen loyihasi muallifi. 5+ yillik tajriba, 50+ loyiha, 1000+ muvaffaqiyatli mijoz.",
    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
)

# Premium features showcase
portfolio_features = [
    {
        "title": "UzorZen Project",
        "description": "Python asosida professional web sahifalar generatori - mening eng katta yutuqlarimdan biri.",
        "image": "https://via.placeholder.com/500x300/667eea/white?text=UzorZen+Project",
        "tech": ["Python", "Jinja2", "Bootstrap 5", "JavaScript", "CSS3"],
        "demo": "https://uzorzen.com",
        "github": "https://github.com/rakuzen"
    },
    {
        "title": "E-Commerce Platform", 
        "description": "Modern online do'kon platformasi - React va Node.js bilan yaratilgan.",
        "image": "https://via.placeholder.com/500x300/10b981/white?text=E-Commerce+Platform",
        "tech": ["React", "Node.js", "MongoDB", "Stripe API", "PWA"],
        "demo": "#",
        "github": "#"
    },
    {
        "title": "AI-Powered Chatbot",
        "description": "TensorFlow va Python bilan yaratilgan aqlli chatbot - mijoz xizmati uchun.",
        "image": "https://via.placeholder.com/500x300/3b82f6/white?text=AI+Chatbot",
        "tech": ["Python", "TensorFlow", "Flask", "NLP", "Docker"],
        "demo": "#", 
        "github": "#"
    }
]

for feature in portfolio_features:
    portfolio_page.add_card(
        feature["title"],
        feature["description"],
        feature["image"],
        {"text": "Demo Ko'rish", "style": "btn-primary-modern", "href": feature["demo"]},
        "modern",
        "fade-up"
    )

# Skills with progress bars
skills_section_html = """
<section class="py-5">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <h2 class="fw-bold text-gradient">Texnik Ko'nikmalar</h2>
        </div>
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="modern-card p-5">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <h6 class="mb-2">Python & Django</h6>
                            <div class="progress mb-3" style="height: 10px;">
                                <div class="progress-bar bg-primary" style="width: 95%"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mb-2">JavaScript & React</h6>
                            <div class="progress mb-3" style="height: 10px;">
                                <div class="progress-bar bg-success" style="width: 90%"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mb-2">Node.js & Express</h6>
                            <div class="progress mb-3" style="height: 10px;">
                                <div class="progress-bar bg-info" style="width: 85%"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mb-2">UI/UX Design</h6>
                            <div class="progress mb-3" style="height: 10px;">
                                <div class="progress-bar bg-warning" style="width: 88%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
"""

portfolio_page.content.append(skills_section_html)

# Premium testimonials
portfolio_page.testimonial_section([
    {
        "quote": "Yoqubov bilan ishlash juda ajoyib edi. Professional yondashuv va yuqori sifat natijalar. Uni tavsiya qilaman!",
        "author": "CEO - Tech Startup",
        "role": "Startup CEO",
        "avatar": "https://via.placeholder.com/80x80/4f46e5/white?text=CEO"
    },
    {
        "quote": "UzorZen loyihasi mening businessimni avtomatlashtirishga yordam berdi. juda yaxshi ish qildi!",
        "author": "Business Owner",
        "role": "E-Commerce Owner", 
        "avatar": "https://via.placeholder.com/80x80/7c3aed/white?text=Owner"
    }
])

# Enhanced contact modal
portfolio_page.modal(
    "contactModal",
    "Bog'lanish - Yoqubov",
    """
    <div class="text-center">
        <div class="glassmorphism p-4 rounded-circle d-inline-block mb-3">
            <i class="bi bi-envelope display-4 text-gradient"></i>
        </div>
        <h5 class="mb-3">Professional hamkorlik uchun bog'laning</h5>
        <div class="row g-3 mt-4">
            <div class="col-md-6">
                <strong>📧 Email:</strong><br>
                javohir@uzorzen.com
            </div>
            <div class="col-md-6">
                <strong>📱 Telegram:</strong><br>
                @UzMaxBoy
            </div>
            <div class="col-md-6">
                <strong>📞 Telefon:</strong><br>
                +998 90 123 45 67
            </div>
            <div class="col-md-6">
                <strong>💼 LinkedIn:</strong><br>
                /in/javohir-yoqubov
            </div>
        </div>
    </div>
    """
)

# Professional footer
portfolio_page.footer(
    "Python va zamonaviy web texnologiyalar bilan professional dasturlash va dizayn xizmatlari. Custom loyihalar va konsultatsiyalar uchun bog'laning.",
    ["Loyihalar", "Xizmatlar", "Blog", "Portfolio", "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",
        "Discord": "https://discord.gg/javohir-dev"
    },
    {
        "address": "Toshkent, O'zbekiston",
        "phone": "+998 90 123 45 67", 
        "email": "javohir@uzorzen.com",
        "website": "https://javohir.dev",
        "working_hours": "Dushanba-Juma 9:00-18:00",
        "timezone": "UTC+5 (Toshkent)"
    }
)

# Save portfolio
result2 = portfolio_page.save("advanced_premium_portfolio.html")
print(f"✅ {result2}")

print(f"\n🎉 Advanced misollar muvaffaqiyatli yaratildi!")
print("📂 Fayllar:")
print("- advanced_modern_landing.html (Zamonaviy landing page)")
print("- advanced_premium_portfolio.html (Premium portfolio)")
print("- advanced_config.json (Konfiguratsiya)")
print("\n🌟 Bu sahifalarda quyidagi zamonaviy xususiyatlar mavjud:")
print("- Glassmorphism va gradient dizaynlar")
print("- AOS animatsiyalari va smooth scroll")
print("- Particles.js zarrachalar effekti")
print("- Responsive va mobile-first dizayn")
print("- Premium komponentlar va animations")
print("- SEO optimizatsiya va analytics")
print("- Modern CSS va JavaScript")
print("- TypeScript kabi professional dasturlash")