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

{% block content %}
<!-- Hero Section -->
<section class="hero-section py-5 mb-5" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); position: relative; overflow: hidden;">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h1 class="display-3 mb-4" style="line-height: 1.1;">Define Your <span style="color: var(--accent-color);">Minimalist</span> Style.</h1>
                <p class="lead mb-5 text-secondary">Discover our curated collection of premium gadgets and lifestyle essentials designed for the modern home.</p>
                <div class="d-flex gap-3">
                    <a href="#products" class="btn btn-primary btn-lg px-4">Shop Collection</a>
                    <a href="#" class="btn btn-outline-dark btn-lg px-4">Learn More</a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="position-relative">
                    <div class="hero-shape" style="position: absolute; width: 400px; height: 400px; background: rgba(244, 63, 94, 0.1); border-radius: 50%; filter: blur(50px); top: -50px; right: -50px; z-index: 0;"></div>
                    <img src="https://images.pexels.com/photos/129731/pexels-photo-129731.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Hero Image" class="img-fluid rounded-4 shadow-lg position-relative" style="z-index: 1;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Filter & Search Section -->
<section class="mb-5" id="products">
    <div class="container">
        <div class="row align-items-center mb-4">
            <div class="col-md-6 mb-3 mb-md-0">
                <h2 class="mb-0">Featured Products</h2>
            </div>
            <div class="col-md-6">
                <form action="{% url 'index' %}" method="GET" class="d-flex gap-2">
                    <input type="text" name="q" class="form-control rounded-pill px-4" placeholder="Search products..." value="{{ query|default:'' }}">
                    {% if selected_category %}
                        <input type="hidden" name="category" value="{{ selected_category }}">
                    {% endif %}
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Search</button>
                </form>
            </div>
        </div>

        <!-- Categories -->
        <div class="d-flex gap-2 overflow-auto pb-3 mb-5" style="scrollbar-width: none;">
            <a href="{% url 'index' %}" class="btn {% if not selected_category %}btn-dark{% else %}btn-outline-dark{% endif %} rounded-pill px-4">All</a>
            {% for category in categories %}
                <a href="{% url 'index' %}?category={{ category.id }}{% if query %}&q={{ query }}{% endif %}" 
                   class="btn {% if selected_category == category.id %}btn-dark{% else %}btn-outline-dark{% endif %} rounded-pill px-4">
                   {{ category.name }}
                </a>
            {% endfor %}
        </div>

        <!-- Product Grid -->
        <div class="row g-4">
            {% for product in products %}
                <div class="col-sm-6 col-md-4 col-lg-3">
                    <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden product-card">
                        <a href="{% url 'product_detail' product.pk %}" class="text-decoration-none">
                            <div class="position-relative overflow-hidden" style="height: 250px;">
                                {% if product.image_url %}
                                    <img src="{% static product.image_url %}" class="card-img-top h-100 w-100 object-fit-cover transition-scale" alt="{{ product.title }}">
                                {% else %}
                                    <div class="h-100 w-100 bg-light d-flex align-items-center justify-content-center">
                                        <span class="text-muted">No image</span>
                                    </div>
                                {% endif %}
                                <div class="position-absolute top-0 end-0 p-3">
                                    <span class="badge bg-white text-dark shadow-sm rounded-pill">${{ product.price }}</span>
                                </div>
                            </div>
                        </a>
                        <div class="card-body p-4 d-flex flex-column">
                            <small class="text-uppercase text-secondary fw-bold" style="font-size: 0.7rem; letter-spacing: 1px;">{{ product.category.name }}</small>
                            <h5 class="card-title mt-1 mb-2">
                                <a href="{% url 'product_detail' product.pk %}" class="text-decoration-none text-dark">{{ product.title }}</a>
                            </h5>
                            <p class="card-text text-secondary small mb-4 text-truncate-2">{{ product.description }}</p>
                            <div class="mt-auto">
                                <a href="{% url 'add_to_cart' product.pk %}" class="btn btn-outline-dark w-100 rounded-pill">Add to Cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="col-12 text-center py-5">
                    <p class="text-muted">No products found matching your criteria.</p>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<style>
    .product-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .product-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
    }
    .transition-scale {
        transition: transform 0.5s ease;
    }
    .product-card:hover .transition-scale {
        transform: scale(1.1);
    }
    .text-truncate-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .object-fit-cover {
        object-fit: cover;
    }
</style>
{% endblock %}