"""
UzorZen Oddiy Misol
Asosiy UzorZen funksiyalarini ko'rsatish
"""

# UzorZen kutubxonasini import qilish
from uzorzen import Page

# Yangi sahifa yaratish
page = Page("Mening Birinchi Sahifam", theme="default")

# Navbar qo'shish
page.navbar(
    "Mening Brandim",
    links=["Bosh sahifa", "Portfolio", "Xizmatlar", "Bog'lanish"],
    user_menu={"name": "Foydalanuvchi", "items": ["Profil", "Sozlamalar", "Chiqish"]}
)

# Hero sektsiya qo'shish
page.hero(
    "Xush Kelibsiz Mening Sahifamga!",
    "Bu mening birinchi professional web sahifam. UzorZen yordamida yaratildi.",
    background_image="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80",
    buttons=[
        {"text": "Boshlash", "style": "btn-primary btn-lg", "href": "#get-started"},
        {"text": "Ko'proq O'rganish", "style": "btn-outline-light btn-lg", "href": "#learn-more"}
    ]
)

# Xizmatlar kartochkalari
page.add_card(
    "Web Dasturlash",
    "Professional web sahifalar va veb-ilovalar yaratish",
    "https://via.placeholder.com/300x200/4CAF50/white?text=Web+Dasturlash",
    {"text": "Batafsil", "style": "btn-success"},
    "service"
)

page.add_card(
    "Mobil Ilovalar", 
    "iOS va Android uchun mobil ilovalar ishlab chiqish",
    "https://via.placeholder.com/300x200/2196F3/white?text=Mobil+Ilovalar",
    {"text": "Batafsil", "style": "btn-info"},
    "service"
)

page.add_card(
    "UI/UX Dizayn",
    "Foydalanuvchi tajribasi va interfeys dizayni",
    "https://via.placeholder.com/300x200/FF9800/white?text=UI+UX+Dizayn",
    {"text": "Batafsil", "style": "btn-warning"},
    "service"
)

# Portfolio galereyasi
page.gallery([
    "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2015&q=80",
    "https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1974&q=80",
    "https://images.unsplash.com/photo-1543286386-2e659306cd6c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80",
    "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
])

# Modal oyna
page.modal(
    "contactModal",
    "Bog'lanish",
    """
    <p>Men bilan bog'lanish uchun quyidagi ma'lumotlardan foydalaning:</p>
    <ul>
        <li><strong>Email:</strong> info@example.com</li>
        <li><strong>Telefon:</strong> +998 90 123 45 67</li>
        <li><strong>Telegram:</strong> @UzMaxBoy</li>
    </ul>
    """
)

# Footer qo'shish
page.footer(
    "© 2025 Mening Brandim. Barcha huquqlar himoyalangan.",
    ["Bosh sahifa", "Xizmatlar", "Portfolio", "Bog'lanish"],
    {
        "Telegram": "https://t.me/UzMaxBoy",
        "Instagram": "https://instagram.com/penzenuz",
        "GitHub": "https://github.com/rakuzen"
    }
)

# Qo'shimcha CSS
page.add_css("""
.custom-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 0;
}

.testimonial {
    font-style: italic;
    background: rgba(255,255,255,0.1);
    padding: 2rem;
    border-radius: 10px;
}
""")

# Qo'shimcha JavaScript
page.add_js("""
// Sahifa yuklanganda ishlaydigan kod
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scrolling
    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'
                });
            }
        });
    });
    
    console.log('UzorZen sahifa muvaffaqiyatli yuklandi!');
});
""")

# Sahifani saqlash
result = page.save("my_first_website.html")
print(result)
print("Sahifa 'my_first_website.html' nomi bilan saqlandi!")

# Preview uchun ham saqlash
preview_result = page.preview()
print(f"Preview: {preview_result}")