{% extends 'revervation/base.twig' %}

{% block title %}{{ 'catalog.seo.title'|trans }}{% endblock %}
{% block description %}{{ 'catalog.seo.description'|trans }}{% endblock %}

{% block breadcrumb_json %}
    ,{
    "@type": "ListItem",
    "position": 1,
    "name": "{{ 'catalog.breadcrumb'|trans }}",
    "item": "{{ url('reservation_catalogue') }}"
    }
{% endblock %}

{% block body %}
    <utm-event event="view_catalogue"></utm-event>
    <div class="min-h-screen bg-gray-50/50 font-sans antialiased pb-20">

        {# --- HEADER --- #}
        <div class="max-w-7xl mx-auto pt-16 pb-8 px-4 text-center">
            <nav class="flex justify-center space-x-4 text-[10px] mb-8 uppercase tracking-[0.3em] font-black italic" data-aos="fade-down">
                <a href="{{ url('reservation') }}" class="text-slate-600 hover:text-[#fc0e50] transition">{{ 'nav.home'|trans }}</a>
                <span class="text-slate-500">/</span>
                <span class="text-amber-700 underline decoration-2 underline-offset-4">{{ 'catalog.breadcrumb'|trans }}</span>
            </nav>

            <h1 class="text-5xl md:text-7xl font-black text-slate-900 uppercase tracking-tighter italic leading-none mb-6" data-aos="fade-up" data-aos-delay="100">
                {{ 'catalog.header.main'|trans }} <span class="text-[#f39e36]">{{ 'catalog.header.highlight'|trans }}</span>
            </h1>
        </div>

        {# --- FILTRES --- #}
        <div class="sticky top-0 z-20 bg-gray-50/90 backdrop-blur-md border-b border-slate-200 mb-12" data-aos="fade-in" data-aos-delay="200">
            <div class="max-w-7xl mx-auto px-4 py-4">
                <div class="flex flex-wrap justify-center gap-2 md:gap-3">
                    <button data-filter="all" class="filter-btn px-5 py-2.5 rounded-xl font-black italic text-[9px] tracking-widest transition-all uppercase shadow-sm bg-slate-900 text-white border border-slate-900">
                        {{ 'catalog.filter.all'|trans }}
                    </button>

                    {% set categories_list = [
                        {'id': '2-7 ans', 'label': 'catalog.filter.cat_2_7'|trans, 'hover': 'hover:border-amber-500 hover:text-amber-600'},
                        {'id': '3-15 ans', 'label': 'catalog.filter.cat_3_15'|trans, 'hover': 'hover:border-blue-600 hover:text-blue-600'},
                        {'id': '3-99 ans', 'label': 'catalog.filter.cat_3_99'|trans, 'hover': 'hover:border-indigo-600 hover:text-indigo-600'},
                        {'id': 'barnums', 'label': 'catalog.filter.cat_barnums'|trans, 'hover': 'hover:border-slate-800 hover:text-slate-800'},
                        {'id': 'alimentaire', 'label': 'catalog.filter.cat_food'|trans, 'hover': 'hover:border-rose-500 hover:text-rose-600'},
                        {'id': 'options', 'label': 'catalog.filter.cat_options'|trans, 'hover': 'hover:border-emerald-500 hover:text-emerald-600'}
                    ] %}

                    {% for cat in categories_list %}
                        <button data-filter="{{ cat.id }}"
                                class="filter-btn px-5 py-2.5 rounded-xl font-black italic text-[9px] tracking-widest transition-all uppercase bg-white text-slate-600 border border-slate-200 {{ cat.hover }}">
                            {{ cat.label }}
                        </button>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# --- GRILLE DE PRODUITS --- #}
        <div class="max-w-7xl mx-auto px-4">
            <div id="product-grid" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-12">

                {% for product in products %}
                    <div class="product-item group transition-all duration-500" data-category="{{ product.category|lower }}" data-aos="fade-up">
                        <a href="{{ path('reservation_product_show', {id: product.slug}) }}" class="block">

                            <div class="relative overflow-hidden rounded-[1.25rem] md:rounded-[1rem] bg-slate-100 aspect-square mb-4 md:mb-6 shadow-sm group-hover:shadow-2xl transition-all duration-700">
                                {% if product.imageName %}
                                    <img src="{{ vich_uploader_asset(product,'imageFile') | imagine_filter('webp') }}" alt="{{ product.name }}" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-1000">
                                {% else %}
                                    <img src="{{ asset('provider/images/favicon.png') | imagine_filter('webp') }}" alt="{{ product.name }}" class="w-full h-full object-cover opacity-50 transform group-hover:scale-110 transition-transform duration-1000">
                                {% endif %}

                                {# PRIX FLOTTANT (Ultra-minimal sur mobile) #}
                                <div class="absolute top-3 right-3 md:top-5 md:right-5 bg-white/95 backdrop-blur-md px-3 py-1.5 md:px-4 md:py-2 rounded-xl md:rounded-2xl shadow-md border border-slate-100">
                                    <p class="text-slate-900 font-black text-xs md:text-sm italic leading-none whitespace-nowrap">
                                        {# "Dès" masqué sur mobile pour gagner de la place #}
                                        <span class="hidden md:inline text-[10px] opacity-60 not-italic mr-1">{{ 'catalog.product.from'|trans }}</span>

                                        {% if tvaEnabled %}
                                            {{ (product.priceDay*1.20)|format_currency('EUR') }} <span class="text-[8px] md:text-[10px]">TTC</span>
                                        {% else %}
                                            {{ product.priceDay|format_currency('EUR') }}
                                        {% endif %}

                                        {# Suffixe masqué sur mobile #}
                                        <span class="hidden md:inline text-slate-400">
                            {% if product.category == "barnums" %} / {{ 'catalog.product.weekend'|trans }}{% else %} / {{ 'catalog.product.day'|trans }}{% endif %}
                        </span>
                                    </p>
                                </div>
                            </div>

                            <div class="px-1 md:px-2">
                                {# META DATA (Avec mention de durée sur mobile) #}
                                <div class="flex flex-wrap items-center gap-x-2 gap-y-1 mb-2">
                    <span class="text-[9px] md:text-[10px] font-black text-blue-700 uppercase tracking-[0.15em] md:tracking-[0.2em] italic">
                        {{ product.category }}
                    </span>

                                    <span class="w-3 h-[1px] bg-slate-300"></span>

                                    <span class="text-[9px] font-bold text-slate-500 uppercase tracking-widest flex items-center gap-1">
                        {{ 'catalog.product.ref'|trans }} {{ product.ref }}

                                        {# Mention de durée visible UNIQUEMENT sur mobile #}
                        <span class="md:hidden inline-flex items-center before:content-['•'] before:mr-1 before:text-slate-300 text-slate-400 font-medium lowercase">
                            {% if product.category == "barnums" %}
                                {{ 'catalog.product.weekend'|trans }}
                            {% else %}
                                {{ 'catalog.product.day'|trans }}
                            {% endif %}
                        </span>
                    </span>
                                </div>

                                <h3 class="text-lg md:text-2xl font-black text-slate-900 uppercase tracking-tighter leading-[0.95] group-hover:text-[#f39e36] transition-colors line-clamp-2">
                                    {{ product.name }}
                                </h3>

                                <div class="mt-4 md:mt-5 flex items-center gap-2 text-[10px] md:text-[11px] font-black uppercase tracking-[0.15em] text-slate-600 group-hover:text-[#f39e36] transition-colors">
                                    <span>{{ 'catalog.product.view_more'|trans }}</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 md:h-4 md:w-4 transform group-hover:translate-x-2 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4-4m4-4H3" />
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </div>
                {% endfor %}

                <div id="empty-msg" class="hidden col-span-full py-24 text-center bg-white rounded-[3.5rem] border-2 border-dashed border-slate-100" data-aos="fade-in">
                    <p class="text-slate-600 font-black italic uppercase tracking-widest text-xs">{{ 'catalog.empty'|trans }}</p>
                </div>

            </div>
        </div>
    </div>
{% endblock %}