<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>{% block title %}Golden Uniforms - wear smart, feel smarter{% endblock %}</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile-app.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/unified-mobile.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/hero-section.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/subcategory-nav.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/product-detail.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/desktop-responsive.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/desktop-override.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/desktop-sidebar.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile-nav-fix.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/contact-mobile-fix.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/animated-header.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/footer-responsive.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/responsive-sidebar.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/desktop-nav-fix.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/desktop-header-fix.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/desktop-layout-final.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/toast-notifications.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/product-card-fix.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/desktop-navigation-inline.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/desktop-search-fix.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/comprehensive-fixes.css') }}">
    <meta name="google-site-verification" content="aNLBy2QyuQ_Bk7maf-AR9xh2Q6p3LgQSNDtSbvinSbo" />
    {% block extra_head %}{% endblock %}
</head>
<body>
    <!-- Sidebar Overlay -->
    <div class="sidebar-overlay"></div>
    
    <!-- Mobile Sidebar Navigation -->
    <nav class="mobile-sidebar" aria-hidden="true">
        <!-- Sidebar Header -->
        <div class="sidebar-header">
            <a href="{{ url_for('index') }}" class="sidebar-logo">
                <img src="{{ url_for('static', filename='images/logo.png') }}" 
                     alt="Golden Uniforms Logo">
                <div class="sidebar-brand-text">
                    <h1>Golden Uniforms</h1>
                </div>
            </a>
            <button class="sidebar-close-btn" aria-label="Close sidebar">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Sidebar Navigation Items -->
        <div class="sidebar-nav">
            <a href="{{ url_for('index') }}" class="sidebar-nav-item">
                <span>Home</span>
            </a>
            <a href="{{ url_for('products', category_id=1) }}" class="sidebar-nav-item">
                <span>Track Suits</span>
            </a>
            <a href="{{ url_for('products', category_id=2) }}" class="sidebar-nav-item">
                <span>Sweaters</span>
            </a>
            <a href="{{ url_for('products', category_id=3) }}" class="sidebar-nav-item">
                <span>Fleece Jackets</span>
            </a>
            <a href="{{ url_for('products', category_id=4) }}" class="sidebar-nav-item">
                <span>T-Shirts</span>
            </a>
            <a href="{{ url_for('products', category_id=5) }}" class="sidebar-nav-item">
                <span>Hoodies</span>
            </a>
        </div>

        <!-- Contact Section -->
        <div class="sidebar-contact px-4 py-4">
            <a href="https://wa.me/254721746967" class="sidebar-whatsapp-btn" target="_blank">
                <i class="fab fa-whatsapp"></i>
                <span>WhatsApp Us</span>
            </a>
            <a href="tel:+254721746967" class="sidebar-contact-btn">
                <i class="fas fa-phone"></i>
                <span>Call Us</span>
            </a>
        </div>
    </nav>

    <!-- Top Contact Banner with Rotating Numbers -->
    <div class="top-contact-banner">
        <div class="container">
            <div class="contact-info-carousel">
                <!-- Contact Item 1 -->
                <div class="contact-item">
                    <a href="https://wa.me/254721746967?text=Hello%20Golden%20Uniforms!" class="contact-option" target="_blank">
                        <i class="fab fa-whatsapp"></i>
                        <span>WhatsApp: +254 721 746 967</span>
                    </a>
                    <div class="divider"></div>
                    <a href="tel:+254721746967" class="contact-option">
                        <i class="fas fa-phone"></i>
                        <span>Call: +254 721 746 967</span>
                    </a>
                </div>
                
                <!-- Contact Item 2 -->
                <div class="contact-item">
                    <a href="mailto:info@goldenuniforms.co.ke" class="contact-option">
                        <i class="fas fa-envelope"></i>
                        <span>info@goldenuniforms.co.ke</span>
                    </a>
                    <div class="divider"></div>
                    <a href="#" class="contact-option">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Uhuru Market, Jogoo Road – Nairobi</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Sticky Header -->
    <header class="enhanced-header">
        <div class="container">
            <div class="header-content">
                <div class="d-flex justify-content-between align-items-center">
                    <!-- Brand Section -->
                    <div class="brand-section d-flex align-items-center gap-2">
                        <a href="{{ url_for('index') }}" class="brand-link d-flex align-items-center text-decoration-none">
                            <div class="logo-container">
                                <img src="{{ url_for('static', filename='images/logo.png') }}" 
                                     alt="Golden Uniforms Logo" 
                                     class="logo-image">
                            </div>
                            <div class="brand-text-container">
                                <h1 class="brand-text text-dark">Golden Uniforms</h1>
                                <p class="brand-tagline text-dark">wear smart, feel smarter</p>
                            </div>
                        </a>
                    </div>

                    <!-- Desktop Navigation (Hidden on Mobile) -->
                    <nav class="d-none d-lg-flex align-items-center justify-content-center gap-3 flex-1">
                        <a href="{{ url_for('index') }}" class="nav-link text-decoration-none fw-bold text-dark" style="font-family: Calibri, sans-serif;">
                            <span>Home</span>
                        </a>
                        <a href="{{ url_for('products', category_id=1) }}" class="nav-link text-decoration-none fw-bold text-dark" style="font-family: Calibri, sans-serif;">
                            <span>Track Suits</span>
                        </a>
                        <a href="{{ url_for('products', category_id=2) }}" class="nav-link text-decoration-none fw-bold text-dark" style="font-family: Calibri, sans-serif;">
                            <span>Sweater</span>
                        </a>
                        <a href="{{ url_for('products', category_id=3) }}" class="nav-link text-decoration-none fw-bold text-dark" style="font-family: Calibri, sans-serif;">
                            <span>Fleece Jacket</span>
                        </a>
                        <a href="{{ url_for('products', category_id=4) }}" class="nav-link text-decoration-none fw-bold text-dark" style="font-family: Calibri, sans-serif;">
                            <span>T-Shirts</span>
                        </a>
                        <a href="{{ url_for('products', category_id=5) }}" class="nav-link text-decoration-none fw-bold text-dark" style="font-family: Calibri, sans-serif;">
                            <span>Hoodies</span>
                        </a>
                    </nav>

                    <!-- Header Actions -->
                    <div class="header-actions d-flex align-items-center gap-3">
                        <!-- Desktop Sign In Icon -->
                        <a href="{{ url_for('signin') }}" class="header-signin-icon d-none d-lg-flex" title="Sign In">
                            <i class="fas fa-user"></i>
                        </a>
                        
                        <!-- Search on Small Screens -->
                        <div class="search-input-group d-lg-none">
                            <input type="text" class="search-input-mobile" placeholder="Search..." id="mobileHeaderSearchInput">
                            <button type="button" class="search-submit-mobile">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        
                        <!-- Desktop Cart Icon (Large Screens Only) -->
                        <a href="{{ url_for('cart') }}" class="cart-link d-none d-lg-flex" title="Shopping Cart">
                            <i class="fas fa-shopping-cart"></i>
                            {% if cart_count > 0 %}
                            <span class="badge cart-count">{{ cart_count }}</span>
                            {% endif %}
                        </a>
                        
                        <!-- Desktop Search Toggle -->
                        <button class="search-toggle d-lg-block d-none" title="Search">
                            <i class="fas fa-search"></i>
                        </button>
                        
                        <!-- Hamburger Menu Toggle -->
                        <button class="hamburger-toggle d-flex align-items-center justify-content-center" title="Menu">
                            <i class="fas fa-bars"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Animated Search Bar -->
        <div class="search-bar">
            <div class="container">
                <div class="search-container">
                    <form class="search-form">
                        <div class="search-input-group">
                            <input type="text" class="search-input" placeholder="Search for products, categories..." name="q">
                            <button type="submit" class="search-submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </header>

    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="container mt-3">
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'danger' if category == 'error' else 'warning' if category == 'warning' else 'success' }} alert-dismissible fade show">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <!-- Main Content -->
    <main class="main-content">
        {% block content %}{% endblock %}
    </main>

    <!-- Bottom Navigation (Mobile Only) -->
    <nav class="bottom-navigation d-lg-none">
        <a href="{{ url_for('index') }}" class="nav-item">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </a>
        <button class="nav-item" id="mobileCategoriesBtn" style="background:none;border:none;">
            <i class="fas fa-th-large"></i>
            <span>Categories</span>
        </button>
        <a href="{{ url_for('cart') }}" class="nav-item position-relative">
            <i class="fas fa-shopping-cart"></i>
            <span>Cart</span>
            {% if cart_count > 0 %}
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger cart-badge">
                {{ cart_count }}
            </span>
            {% endif %}
        </a>
        <a href="{{ url_for('signin') }}" class="nav-item">
            <i class="fas fa-user"></i>
            <span>Sign In</span>
        </a>
    </nav>

    <!-- Scroll to Top Button -->
    <button class="scroll-to-top" id="scrollToTopBtn" title="Back to top">
        <i class="fas fa-chevron-up"></i>
    </button>

    <!-- Footer -->
    <footer class="text-white mt-5" style="background-color: #001f3f;">
        <div class="container py-5">
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5 class="mb-3" style="color: #D4AF37;">Quick Links</h5>
                    <ul class="list-unstyled footer-links">
                        <li><a href="{{ url_for('about_us') }}" class="text-white-50">About Us</a></li>
                        <li><a href="{{ url_for('services') }}" class="text-white-50">Services</a></li>
                        <li><a href="{{ url_for('contact') }}" class="text-white-50">Contact</a></li>
                    </ul>
                </div>
                
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5 class="mb-3" style="color: #D4AF37;">Policies</h5>
                    <ul class="list-unstyled footer-links">
                        <li><a href="{{ url_for('privacy_policy') }}" class="text-white-50">Privacy Policy</a></li>
                        <li><a href="{{ url_for('return_policy') }}" class="text-white-50">Return Policy</a></li>
                        <li><a href="{{ url_for('products', category_id=1) }}" class="text-white-50">Track Suits</a></li>
                        <li><a href="{{ url_for('products', category_id=2) }}" class="text-white-50">Sweater</a></li>
                        <li><a href="{{ url_for('products', category_id=3) }}" class="text-white-50">Fleece Jacket</a></li>
                        <li><a href="{{ url_for('products', category_id=4) }}" class="text-white-50">T-Shirts</a></li>
                        <li><a href="{{ url_for('products', category_id=5) }}" class="text-white-50">Hoodies</a></li>
                    </ul>
                </div>
                
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5 class="mb-3" style="color: #D4AF37;">Contact Info</h5>
                    <p class="mb-2 text-white"><i class="fas fa-phone me-2"></i> +254 721 746 967</p>
                    <p class="mb-2 text-white"><i class="fas fa-envelope me-2"></i> info@goldenuniforms.co.ke</p>
                    <p class="mb-2 text-white"><i class="fas fa-map-marker-alt me-2"></i> Uhuru Market, Along Jogoo Road – Nairobi</p>
                </div>
                
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5 class="mb-3" style="color: #D4AF37;">Follow Us</h5>
                    <div class="social-links">
                        <a href="https://www.facebook.com/GoldenUniforms" class="text-white me-3" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <a href="https://www.instagram.com/GoldenUniforms" class="text-white me-3" target="_blank"><i class="fab fa-instagram"></i></a>
                    </div>
                    <div class="mt-3">
                        <a href="https://asaploads.co.ke" class="text-white-50 small text-decoration-none" target="_blank">
                            <i class="fas fa-code me-1"></i>Developed by asaploads
                        </a>
                    </div>
                </div>
            </div>
            
            <hr class="my-4">
            <div class="text-center">
                <p>&copy; 2024 Golden Uniforms. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Custom JS -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script src="{{ url_for('static', filename='js/mobile-app.js') }}"></script>
    <script src="{{ url_for('static', filename='js/unified-navigation.js') }}"></script>
    <script src="{{ url_for('static', filename='js/hero-carousel.js') }}"></script>
    <script src="{{ url_for('static', filename='js/subcategory-nav.js') }}"></script>
    <script src="{{ url_for('static', filename='js/product-detail.js') }}"></script>
    <script src="{{ url_for('static', filename='js/desktop-fixes.js') }}"></script>
    <script src="{{ url_for('static', filename='js/animated-header.js') }}"></script>
    <script src="{{ url_for('static', filename='js/responsive-sidebar.js') }}"></script>
    <script src="{{ url_for('static', filename='js/desktop-search.js') }}"></script>
    <script src="{{ url_for('static', filename='js/scroll-to-top.js') }}"></script>
    
    {% block scripts %}{% endblock %}
</body>
</html>