{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<link rel="stylesheet" href="{% static 'css/product.css' %}">
{% endblock %}

{% block content %}
<section class="hero reveal">
    <div class="hero-copy">
        <p class="eyebrow">Nepal Special Deals</p>
        <h1 class="hero-title">A smarter, more attractive shopping system with the same Hamro Karma theme.</h1>
        <p class="hero-description">Discover featured offers, explore clean dashboard-style insights, and move through cart, checkout, payment, and order tracking with a more polished user experience.</p>
        <div class="hero-buttons">
            <a href="{% url 'product_list' %}" class="btn btn-primary btn-lg">{{ ui.shop_now }}</a>
            <a href="{% url 'my_orders' %}" class="btn btn-secondary btn-lg">Track Orders</a>
            <a href="{% url 'settings' %}" class="btn btn-secondary btn-lg">Customize</a>
        </div>

        <div class="hero-metric-grid">
            <div class="hero-metric-card reveal">
                <strong>{{ total_products }}</strong>
                <span>Live products</span>
            </div>
            <div class="hero-metric-card reveal">
                <strong>{{ featured_products }}</strong>
                <span>Featured picks</span>
            </div>
            <div class="hero-metric-card reveal">
                <strong>{{ categories_count }}</strong>
                <span>Active categories</span>
            </div>
            <div class="hero-metric-card reveal">
                <strong>{{ avg_rating|floatformat:1 }}/5</strong>
                <span>Average rating</span>
            </div>
        </div>
    </div>

    <div class="hero-highlights">
        {% for deal in special_deals %}
        <div class="highlight-card reveal">
            <span class="highlight-title">{{ deal.title }}</span>
            <p>{{ deal.description }}</p>
            {% if deal.note %}<small>{{ deal.note }}</small>{% endif %}
        </div>
        {% endfor %}
    </div>
</section>

<section class="market-features reveal">
    <a href="{% url 'product_list' %}" class="market-pill market-link">
        <strong>{{ ui.products }}</strong>
        <span>{{ total_products }} items ready to browse</span>
    </a>
    <a href="{% url 'product_list' %}?featured=1" class="market-pill market-link">
        <strong>{{ ui.featured }}</strong>
        <span>{{ featured_products }} curated listings</span>
    </a>
    <a href="{% url 'product_list' %}#categories" class="market-pill market-link">
        <strong>{{ ui.categories }}</strong>
        <span>{{ categories_count }} shopping lanes</span>
    </a>
    <div class="market-pill">
        <strong>Verified flow</strong>
        <span>Checkout, payment, and order status are all connected.</span>
    </div>
</section>

<section class="section-shell spotlight-shell reveal">
    <div class="section-heading">
        <div>
            <h2 class="section-title">Category spotlight</h2>
            <p>Explore the strongest categories in the catalog with counts, ratings, and starting price points.</p>
        </div>
        <a href="{% url 'product_list' %}" class="btn btn-secondary">Browse all products</a>
    </div>

    <div class="spotlight-grid">
        {% for spotlight in category_spotlights %}
        <article class="spotlight-card reveal">
            <div class="spotlight-head">
                <div>
                    <p class="spotlight-kicker">Popular category</p>
                    <h3>{{ spotlight.category }}</h3>
                </div>
                <span class="spotlight-pill">{{ spotlight.total }} items</span>
            </div>
            <p>Featured picks: {{ spotlight.featured_total }} • Avg rating: {{ spotlight.avg_rating|floatformat:1 }}/5</p>
            <div class="spotlight-meta">
                <span>Starting from Rs. {{ spotlight.best_price|floatformat:0 }}</span>
                <span>Updated live from your catalog</span>
            </div>
            <a href="{% url 'product_list' %}?category={{ spotlight.category|urlencode }}" class="btn btn-primary small">Explore {{ spotlight.category }}</a>
        </article>
        {% empty %}
        <div class="empty-state">
            <h2>No categories available yet.</h2>
            <p>Add products from admin to start building category spotlights.</p>
        </div>
        {% endfor %}
    </div>
</section>

<section class="advertised-deals section-shell reveal">
    <div class="section-heading">
        <div>
            <h2 class="section-title">Advertised Deals</h2>
            <p>Shop the hottest offers, discounts, and promotions curated for Nepali customers.</p>
        </div>
        <a href="{% url 'product_list' %}" class="btn btn-secondary">See all offers</a>
    </div>
    {% if advertised_products %}
    <div class="cards deal-cards">
        {% for product in advertised_products %}
        <div class="card deal-card reveal">
            {% if product.image %}
            <img src="{{ product.image.url }}" alt="{{ product.name }}">
            {% else %}
            <div class="product-image-placeholder">No image</div>
            {% endif %}
            <div class="card-content">
                <div class="deal-topline">
                    <span class="deal-badge">Save Rs. {{ product.savings|floatformat:0 }}</span>
                    <span class="deal-label">{{ product.deal_label }}</span>
                </div>
                <h3>{{ product.name }}</h3>
                <p class="price">Rs. {{ product.discount_price|default:product.price|floatformat:2 }}</p>
                <p class="deal-note">{{ product.category }}</p>
                <div class="card-actions">
                    <a href="{% url 'product_detail' product.id %}" class="btn btn-secondary">View Deal</a>
                    <a href="{% url 'buy_now' product.id %}" class="btn btn-primary">Buy Now</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state"><h2>No deals available.</h2><p>Check back soon for new offers.</p></div>
    {% endif %}
</section>

<section class="section-shell experience-shell reveal">
    <div class="section-heading">
        <div>
            <h2 class="section-title">Special experience upgrades</h2>
            <p>These improvements keep the same theme while making the system feel more advanced and more informative.</p>
        </div>
    </div>

    <div class="experience-grid">
        {% for feature in experience_highlights %}
        <article class="experience-card reveal">
            <span class="experience-badge">{{ feature.badge }}</span>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
        </article>
        {% endfor %}
    </div>
</section>

<section class="trending section-shell reveal">
    <div class="section-heading">
        <div>
            <h2 class="section-title">Trending products</h2>
            <p>Find the top selling items handpicked for you.</p>
        </div>
        <a href="{% url 'product_list' %}?sort=newest" class="btn btn-secondary">See fresh arrivals</a>
    </div>
    {% if trending_products %}
    <div class="cards trending-cards">
        {% for product in trending_products %}
        <div class="card reveal">
            {% if product.image %}<img src="{{ product.image.url }}" alt="{{ product.name }}">{% else %}<div class="product-image-placeholder">No image</div>{% endif %}
            <div class="card-content">
                <div class="tag-row">
                    {% if product.featured %}<span class="tag badge-pill">Featured</span>{% endif %}
                    <span class="tag category-tag">{{ product.category }}</span>
                    {% if product.discount_percent %}<span class="tag savings-tag">Save {{ product.discount_percent }}%</span>{% endif %}
                </div>
                <h3>{{ product.name }}</h3>
                <p class="price">Rs. {{ product.display_price|floatformat:2 }}</p>
                <p class="stock">Stock: {{ product.stock }}</p>
                <div class="card-actions">
                    <a href="{% url 'product_detail' product.id %}" class="btn btn-secondary">View Product</a>
                    <a href="{% url 'add_to_cart' product.id %}?next={{ request.path|urlencode }}" class="btn btn-primary">Add to Cart</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state"><h2>No products yet.</h2><p>Add products from admin to show them here.</p></div>
    {% endif %}
</section>

<section class="section-shell quick-action-shell reveal">
    <div class="section-heading">
        <div>
            <h2 class="section-title">Quick access</h2>
            <p>Reach the most useful parts of the system faster from the home screen.</p>
        </div>
    </div>

    <div class="quick-action-grid">
        {% if user.is_authenticated %}
        <a href="{% url 'my_orders' %}" class="quick-action-card reveal">
            <strong>Order dashboard</strong>
            <p>Open your advanced order list with status filters and payment actions.</p>
        </a>
        <a href="{% url 'wishlist' %}" class="quick-action-card reveal">
            <strong>Wishlist</strong>
            <p>Keep favorite products ready for later and move them into the cart faster.</p>
        </a>
        <a href="{% url 'settings' %}" class="quick-action-card reveal">
            <strong>Preferences</strong>
            <p>Change theme, language, and delivery location from one clean settings page.</p>
        </a>
        {% else %}
        <a href="{% url 'register' %}" class="quick-action-card reveal">
            <strong>Create an account</strong>
            <p>Save your wishlist, manage orders, and keep checkout details ready for later.</p>
        </a>
        <a href="{% url 'login' %}" class="quick-action-card reveal">
            <strong>Sign in</strong>
            <p>Return to your cart, payment flow, and order history without losing progress.</p>
        </a>
        <a href="{% url 'product_list' %}" class="quick-action-card reveal">
            <strong>Browse catalog</strong>
            <p>Explore featured products, categories, and smart filters right away.</p>
        </a>
        {% endif %}
    </div>
</section>
{% endblock %}