{% extends "base.html" %}

{% block content %}
<div class="full-width-content">

<!-- Hero Section -->
<section class="hero-section">
    <!-- blurred orbs -->
    <div class="orb orb-1"></div>
    <div class="orb orb-2"></div>
    <div class="orb orb-3"></div>

    <div class="hero-container">
        <!-- Left side -->
        <div class="hero-left">
            <h1 class="brand-name">
                GOLDEN
                <span>UNIFORMS</span>
            </h1>
            <div class="tagline">
                <span>Smart.</span> <span>Comfortable.</span> <span>Versatile.</span>
            </div>
            <p class="description">
                Premium uniforms designed for schools, businesses and institutions.
                Crafted for comfort, built for durability, and tailored to represent your brand with confidence.
            </p>
            <div class="button-group">
                <a href="{{ url_for('products', category_id=1) }}" class="btn btn-primary">Explore Collection</a>
                <a href="https://wa.me/254721746967?text=Hello%20Golden%20Uniforms!%20I%20would%20like%20to%20get%20a%20quote." class="btn btn-secondary" target="_blank">Get a Quote</a>
            </div>
        </div>

        <!-- Right side: product stage -->
        <div class="hero-right" id="productStage">
            <div class="single-image-container" id="singleImageContainer">
                <div class="product-item" data-id="shirt" data-order="1">
                    <img src="{{ url_for('static', filename='images/tshirt.png') }}" alt="T-Shirt" loading="lazy">
                </div>
                <div class="product-item" data-id="polo" data-order="2">
                    <img src="{{ url_for('static', filename='images/polo.png') }}" alt="Polo" loading="lazy">
                </div>
                <div class="product-item" data-id="hoodie" data-order="3">
                    <img src="{{ url_for('static', filename='images/hoodie.png') }}" alt="Hoodie" loading="lazy">
                </div>
                <div class="product-item" data-id="fleece" data-order="4">
                    <img src="{{ url_for('static', filename='images/fleece1.png') }}" alt="Fleece" loading="lazy">
                </div>
                <div class="product-item" data-id="tracksuit" data-order="5">
                    <img src="{{ url_for('static', filename='images/trackk.png') }}" alt="Tracksuit" loading="lazy">
                </div>
            </div>
        </div>
    </div>
</section>

    <!-- Clearance Sales Section -->
    {% if clearance_products %}
    <div class="clearance-section">        
        <div class="products-grid">
                {% for product in clearance_products %}
                <div class="clearance-card">
                    <div class="clearance-image-container">
                        {% if product.image_url %}
                            <img src="{{ product.image_url }}" alt="{{ product.name }}" class="clearance-image" loading="lazy">
                        {% else %}
                            <div class="image-placeholder">
                                <i class="fas fa-image"></i>
                            </div>
                        {% endif %}
                        <div class="discount-badge">
                            {% set discount_rates = [35, 40, 25, 30, 45, 20] %}
                            -{{ discount_rates[loop.index0 % 6] }}%
                        </div>
                        <div class="clearance-timer">
                            {% set timers = ['2d 12h', '1d 8h', '3d 15h', '4h 30m', '1d 2h', '6h 45m'] %}
                            {{ timers[loop.index0 % 6] }}
                        </div>
                    </div>
                    <div class="clearance-info">
                        <h3 class="clearance-title">{{ product.name }}</h3>
                        <div class="clearance-price">
                            <span class="sale-price">KES {{ "%.0f"|format(product.price) }}</span>
                            <span class="original-price">KES {{ "%.0f"|format(product.price * 1.6) }}</span>
                        </div>
                        <form method="POST" action="{{ url_for('add_to_cart', product_id=product.id) }}" class="quick-add-form" onsubmit="handleAddToCart(event, this)">
                            <button type="submit" class="quick-add-btn">
                                <i class="fas fa-cart-plus"></i>
                                <span class="btn-text">Quick Add</span>
                                <span class="btn-loading" style="display: none;">
                                    <i class="fas fa-spinner fa-spin"></i>
                                </span>
                            </button>
                        </form>
                    </div>
                </div>
                {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Featured Products Section -->
    {% if featured_products %}
    <div class="products-section">
        <div class="products-grid">
            {% for product in featured_products %}
            <div class="product-card">
                <div class="product-image-wrapper">
                    <a href="{{ url_for('product_detail', product_id=product.id) }}">
                        {% if product.image_url %}
                            <img src="{{ product.image_url }}" alt="{{ product.name }}" class="product-image" loading="lazy">
                        {% else %}
                            <div class="image-placeholder">
                                <i class="fas fa-image"></i>
                            </div>
                        {% endif %}
                    </a>
                    {% if product.is_featured %}
                        <div class="product-badge featured">Featured</div>
                    {% endif %}
                    <button class="wishlist-btn" type="button">
                        <i class="far fa-heart"></i>
                    </button>
                </div>
                
                <div class="product-info">
                    <a href="{{ url_for('product_detail', product_id=product.id) }}" class="product-link">
                        <h3 class="product-name text-center">{{ product.name }}</h3>
                    </a>
                    <div class="price-action-row d-flex justify-content-between align-items-center w-100">
                        <div class="product-price">KES {{ "%.0f"|format(product.price) }}</div>
                        <form method="POST" action="{{ url_for('add_to_cart', product_id=product.id) }}" class="add-to-cart-form" onsubmit="handleAddToCart(event, this)">
                            <button type="submit" class="add-cart-btn">
                                <i class="fas fa-shopping-cart"></i>
                                <span class="btn-text">Add</span>
                                <span class="btn-loading" style="display: none;">
                                    <i class="fas fa-spinner fa-spin"></i>
                                </span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Latest Products Section -->
    <div class="latest-products-section">
        <div class="products-grid">
                {% for product in products %}
                <div class="latest-card">
                    <div class="latest-image-container">
                        <a href="{{ url_for('product_detail', product_id=product.id) }}">
                            {% if product.image_url %}
                                <img src="{{ product.image_url }}" alt="{{ product.name }}" class="latest-image" loading="lazy">
                            {% else %}
                                <div class="image-placeholder">
                                    <i class="fas fa-image"></i>
                                </div>
                            {% endif %}
                        </a>
                        <div class="new-badge">New</div>
                    </div>
                    <div class="latest-info">
                        <a href="{{ url_for('product_detail', product_id=product.id) }}" class="product-link">
                            <h3 class="latest-title text-center">{{ product.name }}</h3>
                        </a>
                        <div class="price-action-row d-flex justify-content-between align-items-center w-100">
                            <div class="latest-price">KES {{ "%.0f"|format(product.price) }}</div>
                            <form method="POST" action="{{ url_for('add_to_cart', product_id=product.id) }}" class="quick-add-form" onsubmit="handleAddToCart(event, this)">
                                <button type="submit" class="quick-add-btn">
                                    <i class="fas fa-plus"></i>
                                    <span class="btn-text">Add</span>
                                    <span class="btn-loading" style="display: none;">
                                        <i class="fas fa-spinner fa-spin"></i>
                                    </span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                {% endfor %}
        </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="bottom-navigation">
        <a href="{{ url_for('index') }}" class="nav-item active">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </a>
        <a href="{{ url_for('products') }}" class="nav-item">
            <i class="fas fa-th-large"></i>
            <span>Category</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comment"></i>
            <span>Message</span>
        </a>
        <a href="{{ url_for('cart') }}" class="nav-item" data-cart-count="{{ cart_count if cart_count > 0 else '' }}">
            <i class="fas fa-shopping-cart"></i>
            <span>Cart</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>Account</span>
        </a>
    </div>

</div>
</div>
{% endblock %}