{% extends 'main/base.html' %}

{% block title %}Главная - NOVA{% endblock %}

{% block content %}
<!-- Hero секция -->
<div class="hero-section">
    <div class="container text-center">
        <h1 class="hero-title">NOVA</h1>
        <p class="hero-subtitle">Новая звезда в мире стиля</p>
        <a href="{% url 'product_list' %}" class="btn btn-primary btn-lg">Перейти к покупкам</a>
    </div>
</div>

<!-- Новинки -->
<section class="mt-5">
    <h2 class="mb-4 text-center">Новинки</h2>
    <div class="row g-4">
        {% for product in new_products %}
            <div class="col-md-3">
                <a href="{% url 'product_detail' product.slug %}" class="text-decoration-none">
                    <div class="card h-100 product-card">
                        {% with product.variants.first as variant %}
                            {% if variant and variant.image %}
                                <img src="{{ variant.image.url }}" class="card-img-top" alt="{{ product.name }}">
                            {% else %}
                                <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 250px;">
                                    <span style="color: #5E3D1E;">Нет фото</span>
                                </div>
                            {% endif %}
                        {% endwith %}

                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">{{ product.name }}</h5>
                            <p class="card-text mt-auto">
                                <strong class="price">{{ product.base_price }} ₽</strong>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        {% empty %}
            <div class="col-12">
                <div class="alert alert-info text-center">Новинок пока нет</div>
            </div>
        {% endfor %}
    </div>
</section>

<!-- Популярные категории -->
<section class="mt-5">
    <h2 class="mb-4 text-center">Популярные категории</h2>
    <div class="row g-4">
        {% for category in categories %}
            <div class="col-md-4">
                <a href="{% url 'product_list' %}?category={{ category.slug }}" class="text-decoration-none">
                    <div class="category-card">
                        {% if category.image %}
                            <img src="{{ category.image.url }}" alt="{{ category.name }}">
                        {% else %}
                            <div class="bg-light d-flex align-items-center justify-content-center" style="height: 200px; background: #F5F0E8 !important;">
                                <!-- Убираем текст, оставляем только фон -->
                            </div>
                        {% endif %}
                        <div class="category-overlay">
                            <h3>{{ category.name }}</h3>
                            <span class="btn btn-sm">Смотреть</span>
                        </div>
                    </div>
                </a>
            </div>
        {% empty %}
            <div class="col-12">
                <p class="text-center">Категорий пока нет</p>
            </div>
        {% endfor %}
    </div>
</section>

<style>
.category-card {
    background: #5e3d1e;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #45240c;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: #CDB694;
    background: #99693f;
}

.category-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #e3ceae;
    margin-bottom: 10px;
}

.category-card .btn {
    background: #CDB694;
    color: #342716;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .product-card .card-img-top {
        height: 200px;
    }
    .category-card {
        height: 150px;
    }
    .category-overlay h3 {
        font-size: 1rem;
    }
}



</style>
{% endblock %}