"""
UzorZen Advanced Base HTML Template
Zamonaviy va yuqori sifatli web sahifalar uchun asosiy template
"""

BASE_HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    
    <!-- Meta Tags for SEO -->
    <meta name="description" content="UzorZen - Zamonaviy web sahifalar generatori">
    <meta name="author" content="Yoqubov Javohir (RaKUZEN)">
    <meta name="keywords" content="UzorZen, web generator, Python, HTML, CSS, Bootstrap">
    <meta name="robots" content="index, follow">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="{{ title }}">
    <meta property="og:description" content="Zamonaviy web sahifalar generatori">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://uzorzen.com">
    <meta property="og:image" content="https://uzorzen.com/og-image.jpg">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ title }}">
    <meta name="twitter:description" content="Zamonaviy web sahifalar generatori">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    {{ bootstrap_css|default("") }}
    
    <!-- AOS Animation Library -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    
    <!-- Custom CSS -->
    <style>
        :root {
            /* CSS Custom Properties for theming */
            --primary-color: #667eea;
            --secondary-color: #764ba2;
            --accent-color: #f093fb;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --info-color: #3b82f6;
            --light-color: #f8fafc;
            --dark-color: #1e293b;
            
            /* Typography */
            --font-primary: 'Inter', sans-serif;
            --font-heading: 'Poppins', sans-serif;
            --font-size-xs: 0.75rem;
            --font-size-sm: 0.875rem;
            --font-size-base: 1rem;
            --font-size-lg: 1.125rem;
            --font-size-xl: 1.25rem;
            --font-size-2xl: 1.5rem;
            --font-size-3xl: 1.875rem;
            --font-size-4xl: 2.25rem;
            --font-size-5xl: 3rem;
            
            /* Spacing */
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;
            --spacing-3xl: 4rem;
            
            /* Shadows */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            
            /* Border radius */
            --radius-sm: 0.125rem;
            --radius-md: 0.375rem;
            --radius-lg: 0.5rem;
            --radius-xl: 0.75rem;
            --radius-2xl: 1rem;
            --radius-full: 9999px;
            
            /* Transitions */
            --transition-fast: 150ms ease-in-out;
            --transition-normal: 300ms ease-in-out;
            --transition-slow: 500ms ease-in-out;
        }
        
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: var(--font-primary);
            line-height: 1.6;
            color: var(--dark-color);
            background-color: var(--light-color);
            font-size: var(--font-size-base);
            overflow-x: hidden;
        }
        
        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: var(--spacing-md);
        }
        
        h1 { font-size: var(--font-size-5xl); }
        h2 { font-size: var(--font-size-4xl); }
        h3 { font-size: var(--font-size-3xl); }
        h4 { font-size: var(--font-size-2xl); }
        h5 { font-size: var(--font-size-xl); }
        h6 { font-size: var(--font-size-lg); }
        
        .display-1 { font-size: calc(var(--font-size-5xl) * 1.5); }
        .display-2 { font-size: calc(var(--font-size-4xl) * 1.25); }
        .display-3 { font-size: var(--font-size-4xl); }
        .display-4 { font-size: var(--font-size-3xl); }
        
        /* UzorZen Advanced Components */
        
        /* Enhanced Hero Section */
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
            opacity: 0.1;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        /* Advanced Card Design */
        .modern-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--radius-2xl);
            padding: var(--spacing-xl);
            box-shadow: var(--shadow-xl);
            transition: all var(--transition-normal);
            position: relative;
            overflow: hidden;
        }
        
        .modern-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left var(--transition-slow);
        }
        
        .modern-card:hover::before {
            left: 100%;
        }
        
        .modern-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: var(--shadow-2xl);
        }
        
        /* Enhanced Navbar */
        .modern-navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.18);
            transition: all var(--transition-normal);
        }
        
        .navbar-brand {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: var(--font-size-xl);
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Glassmorphism Effects */
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: var(--radius-xl);
        }
        
        /* Advanced Gallery */
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all var(--transition-normal);
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all var(--transition-slow);
        }
        
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
            opacity: 0;
            transition: all var(--transition-normal);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        /* Enhanced Buttons */
        .btn-modern {
            position: relative;
            overflow: hidden;
            border: none;
            border-radius: var(--radius-lg);
            padding: var(--spacing-md) var(--spacing-xl);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all var(--transition-normal);
            z-index: 1;
        }
        
        .btn-modern::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left var(--transition-normal);
            z-index: -1;
        }
        
        .btn-modern:hover::before {
            left: 100%;
        }
        
        .btn-primary-modern {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
        }
        
        .btn-outline-modern {
            background: transparent;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline-modern:hover {
            background: var(--primary-color);
            color: white;
        }
        
        /* Advanced Footer */
        .modern-footer {
            background: linear-gradient(135deg, var(--dark-color) 0%, #334155 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .modern-footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm10 0c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10z'/%3E%3C/g%3E%3C/svg%3E") repeat;
        }
        
        /* Social Media Icons */
        .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: var(--radius-full);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            text-decoration: none;
            transition: all var(--transition-normal);
            margin: 0 var(--spacing-sm);
        }
        
        .social-icon:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-2px);
        }
        
        /* Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        @keyframes bounce {
            0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
            40%, 43% { transform: translateY(-15px); }
            70% { transform: translateY(-7px); }
            90% { transform: translateY(-3px); }
        }
        
        /* Utility Classes */
        .text-gradient {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .shadow-modern {
            box-shadow: var(--shadow-xl);
        }
        
        .border-modern {
            border-radius: var(--radius-xl);
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            :root {
                --font-size-5xl: 2.5rem;
                --font-size-4xl: 2rem;
                --font-size-3xl: 1.75rem;
            }
        }
        
        @media (max-width: 768px) {
            .display-1 { font-size: var(--font-size-4xl); }
            .display-2 { font-size: var(--font-size-3xl); }
            .display-3 { font-size: var(--font-size-2xl); }
            .display-4 { font-size: var(--font-size-xl); }
            
            .hero-section {
                min-height: 80vh;
            }
            
            .modern-card {
                padding: var(--spacing-lg);
            }
            
            h1 { font-size: var(--font-size-4xl); }
            h2 { font-size: var(--font-size-3xl); }
            h3 { font-size: var(--font-size-2xl); }
        }
        
        @media (max-width: 576px) {
            .modern-card {
                padding: var(--spacing-md);
            }
        }
        
        /* Dark Theme */
        {% if theme == "dark" %}
        :root {
            --light-color: #0f172a;
            --dark-color: #f8fafc;
        }
        
        body {
            background-color: #0f172a;
            color: #f8fafc;
        }
        
        .modern-navbar {
            background: rgba(15, 23, 42, 0.95);
            color: white;
        }
        
        .modern-card {
            background: rgba(30, 41, 59, 0.95);
            color: white;
        }
        {% endif %}
        
        /* Accessibility */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        
        /* Focus styles for accessibility */
        .btn-modern:focus,
        .gallery-item:focus,
        .social-icon:focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }
        
        /* Custom CSS -->
        {{ custom_css|default("") }}
    </style>
</head>
<body>
    <!-- Main Content -->
    {{ content|default("") }}
    
    <!-- AOS Animation Library -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Custom JavaScript -->
    <script>
        {{ custom_js|default("") }}
        
        // UzorZen Advanced Utilities
        class UzorZenApp {
            constructor() {
                this.init();
            }
            
            init() {
                this.initAOS();
                this.initSmoothScrolling();
                this.initParallax();
                this.initTypingEffect();
                this.initCounterAnimation();
                this.initThemeToggle();
                this.initLazyLoading();
                this.initNavigationEffects();
            }
            
            // Initialize AOS (Animate On Scroll)
            initAOS() {
                AOS.init({
                    duration: 1000,
                    easing: 'ease-in-out',
                    once: true,
                    mirror: false,
                    offset: 50
                });
            }
            
            // Enhanced Smooth Scrolling
            initSmoothScrolling() {
                document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                    anchor.addEventListener('click', function (e) {
                        e.preventDefault();
                        const target = document.querySelector(this.getAttribute('href'));
                        if (target) {
                            const navHeight = document.querySelector('.navbar')?.offsetHeight || 0;
                            const targetPosition = target.offsetTop - navHeight - 20;
                            
                            window.scrollTo({
                                top: targetPosition,
                                behavior: 'smooth'
                            });
                        }
                    });
                });
            }
            
            // Parallax Effects
            initParallax() {
                window.addEventListener('scroll', () => {
                    const scrolled = window.pageYOffset;
                    const parallaxElements = document.querySelectorAll('.parallax');
                    
                    parallaxElements.forEach(element => {
                        const speed = element.dataset.speed || 0.5;
                        const yPos = -(scrolled * speed);
                        element.style.transform = `translateY(${yPos}px)`;
                    });
                });
            }
            
            // Typing Effect
            initTypingEffect() {
                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);
                        }
                    };
                    
                    const observer = new IntersectionObserver((entries) => {
                        if (entries[0].isIntersecting) {
                            typeWriter();
                            observer.disconnect();
                        }
                    });
                    
                    observer.observe(element);
                });
            }
            
            // Counter Animation
            initCounterAnimation() {
                const counters = document.querySelectorAll('.counter');
                counters.forEach(counter => {
                    const target = parseInt(counter.dataset.target);
                    const increment = target / 200;
                    let current = 0;
                    
                    const updateCounter = () => {
                        if (current < target) {
                            current += increment;
                            counter.textContent = Math.ceil(current);
                            setTimeout(updateCounter, 10);
                        } else {
                            counter.textContent = target;
                        }
                    };
                    
                    const observer = new IntersectionObserver((entries) => {
                        if (entries[0].isIntersecting) {
                            updateCounter();
                            observer.disconnect();
                        }
                    });
                    
                    observer.observe(counter);
                });
            }
            
            // Theme Toggle
            initThemeToggle() {
                const themeToggle = document.getElementById('theme-toggle');
                if (themeToggle) {
                    const savedTheme = localStorage.getItem('theme') || 'light';
                    document.documentElement.setAttribute('data-theme', savedTheme);
                    
                    themeToggle.addEventListener('click', () => {
                        const currentTheme = document.documentElement.getAttribute('data-theme');
                        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
                        
                        document.documentElement.setAttribute('data-theme', newTheme);
                        localStorage.setItem('theme', newTheme);
                    });
                }
            }
            
            // Lazy Loading for Images
            initLazyLoading() {
                const images = document.querySelectorAll('img[data-src]');
                const imageObserver = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const img = entry.target;
                            img.src = img.dataset.src;
                            img.removeAttribute('data-src');
                            imageObserver.unobserve(img);
                        }
                    });
                });
                
                images.forEach(img => imageObserver.observe(img));
            }
            
            // Navigation Effects
            initNavigationEffects() {
                const navbar = document.querySelector('.navbar');
                if (navbar) {
                    window.addEventListener('scroll', () => {
                        if (window.scrollY > 100) {
                            navbar.classList.add('scrolled');
                        } else {
                            navbar.classList.remove('scrolled');
                        }
                    });
                }
            }
        }
        
        // Initialize UzorZen App
        document.addEventListener('DOMContentLoaded', () => {
            new UzorZenApp();
        });
        
        // Utility Functions
        window.UzorZen = {
            // Show notification
            showNotification: (message, type = 'info') => {
                const notification = document.createElement('div');
                notification.className = `alert alert-${type} position-fixed`;
                notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999;';
                notification.textContent = message;
                
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 3000);
            },
            
            // Smooth reveal animation
            revealElement: (element, delay = 0) => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(30px)';
                element.style.transition = 'all 0.6s ease';
                
                setTimeout(() => {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, delay);
            },
            
            // Parallax effect
            parallax: (element, speed = 0.5) => {
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const scrolled = window.pageYOffset;
                            const yPos = -(scrolled * speed);
                            entry.target.style.transform = `translateY(${yPos}px)`;
                        }
                    });
                });
                
                observer.observe(element);
            }
        };
    </script>
</body>
</html>
"""