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

{% block extra_head %}
<style>
    .brand-card {
        border: none;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.07);
        transition: all 0.35s ease;
        height: 100%;
        overflow: hidden;
    }
    .brand-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(106, 13, 173, 0.15);
    }
    .brand-logo {
        height: 80px;
        object-fit: contain;
    }
    .featured-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        background: linear-gradient(135deg, #f59e0b, #ef4444);
        color: white;
        font-size: 0.75rem;
        padding: 4px 12px;
        border-radius: 50px;
        font-weight: 700;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">

    <!-- Header -->
    <div class="text-center mb-5">
        <h1 class="display-5 fw-bold">Trusted Entertainment Brands</h1>
        <p class="lead text-muted">Verified partners and brands we work with</p>
    </div>

    <!-- Featured Brands -->
    {% if featured_brands %}
    <h4 class="mb-4">Featured Partners</h4>
    <div class="row g-4 mb-5">
        {% for brand in featured_brands %}
        <div class="col-md-6 col-lg-4">
            <a href="{% url 'core:brand_detail' brand.slug %}" class="text-decoration-none">
                <div class="card brand-card position-relative">
                    <span class="featured-badge">FEATURED</span>
                    <div class="card-body text-center p-4">
                        {% if brand.logo %}
                            <img src="{{ brand.logo.url }}" alt="{{ brand.name }}" class="brand-logo mb-3">
                        {% else %}
                            <div class="mb-3">
                                <i class="fas fa-building fa-3x text-primary"></i>
                            </div>
                        {% endif %}
                        <h5 class="fw-bold text-dark mb-1">{{ brand.name }}</h5>
                        <p class="text-muted small mb-0">{{ brand.get_category_display }}</p>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- All Trusted Brands -->
    <h4 class="mb-4">All Trusted Brands</h4>
    <div class="row g-4">
        {% for brand in brands %}
        <div class="col-md-6 col-lg-3">
            <a href="{% url 'core:brand_detail' brand.slug %}" class="text-decoration-none">
                <div class="card brand-card">
                    <div class="card-body text-center p-4">
                        {% if brand.logo %}
                            <img src="{{ brand.logo.url }}" alt="{{ brand.name }}" class="brand-logo mb-3">
                        {% else %}
                            <div class="mb-3">
                                <i class="fas fa-building fa-2x text-muted"></i>
                            </div>
                        {% endif %}
                        <h6 class="fw-bold text-dark mb-1">{{ brand.name }}</h6>
                        <small class="text-muted">{{ brand.get_category_display }}</small>
                    </div>
                </div>
            </a>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info text-center">
                No trusted brands available at the moment.
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}