{% 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">
    <div class="hero-copy">
        <p class="eyebrow">Nepal Special Deals</p>
        <h1 class="hero-title">Shop the best offers across electronics, fashion, and home essentials.</h1>
        <p class="hero-description">Fast delivery, secure checkout, and everyday savings on products you love.</p>
        <div class="hero-buttons">
            <a href="{% url 'product_list' %}" class="btn btn-primary btn-lg">{{ ui.shop_now }}</a>
            <a href="{% url 'about' %}" class="btn btn-secondary btn-lg">{{ ui.learn_more }}</a>
        </div>
    </div>
    <div class="hero-highlights">
        {% for deal in special_deals %}
        <div class="highlight-card">
            <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">
    <a href="{% url 'product_list' %}" class="market-pill market-link">{{ ui.products }}: {{ total_products }}</a>
    <a href="{% url 'product_list' %}?featured=1" class="market-pill market-link">{{ ui.featured }}: {{ featured_products }}</a>
    <a href="{% url 'product_list' %}#categories" class="market-pill market-link">{{ ui.categories }}: {{ categories_count }}</a>
    <div class="market-pill">Avg Rating: {{ avg_rating|floatformat:1 }}/5</div>
</section>

<section class="advertised-deals">
    <div class="section-heading">
        <h2 class="section-title">Advertised Deals</h2>
        <p>Shop the hottest offers, discounts, and promotions curated for Nepali customers.</p>
    </div>
    {% if advertised_products %}
    <div class="cards deal-cards">
        {% for product in advertised_products %}
        <div class="card deal-card">
            {% 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">
                <span class="deal-badge">Save Rs. {{ product.savings|floatformat:0 }}</span>
                <span class="deal-label">{{ product.deal_label }}</span>
                <h3>{{ product.name }}</h3>
                <p class="price">Rs. {{ product.discount_price|default:product.price|floatformat:2 }}</p>
                <p class="deal-note">{{ product.category }}</p>
                <a href="{% url 'product_detail' product.id %}" class="btn btn-secondary">View Deal</a>
            </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="trending">
    <div class="section-heading">
        <h2 class="section-title">Trending products</h2>
        <p>Find the top selling items handpicked for you.</p>
    </div>
    {% if trending_products %}
    <div class="cards trending-cards">
        {% for product in trending_products %}
        <div class="card">
            {% 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">
                <h3>{{ product.name }}</h3>
                <p class="price">Rs. {{ product.display_price|floatformat:2 }}</p>
                <p class="stock">Stock: {{ product.stock }}</p>
                <a href="{% url 'product_detail' product.id %}" class="btn btn-secondary">View Product</a>
            </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>
{% endblock %}