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

{# --- SEO OPTIMISÉ --- #}
{% block title %}Nos Formules Location | Packs Gonflables & Événements - Ludik Event{% endblock %}
{% block description %}Découvrez nos packs événementiels clés en main. Location de châteaux gonflables, machines gourmandes et animations regroupés dans nos formules exclusives.{% endblock %}

{% block breadcrumb_json %}
    ,{
    "@type": "ListItem",
    "position": 1,
    "name": "Nos Formules",
    "item": "{{ url('reservation_formules') }}"
    }
{% endblock %}

{% block body %}
    <utm-event event="view_formules_list"></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-12 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">ACCUEIL</a>
                <span class="text-slate-500">/</span>
                <span class="text-amber-700 underline decoration-2 underline-offset-4 tracking-[0.3em]">NOS FORMULES</span>
            </nav>

            <h1 class="text-6xl md:text-8xl font-black text-slate-900 uppercase tracking-tighter italic leading-none mb-6" data-aos="fade-up" data-aos-delay="100">
                PACKS <span class="text-[#fc0e50]">&</span> <span class="text-blue-600">FORMULES</span>
            </h1>
            <p class="max-w-2xl mx-auto text-slate-600 font-bold uppercase text-xs tracking-widest italic" data-aos="fade-up" data-aos-delay="200">
                Simplifiez votre événement avec nos solutions <span class="text-slate-900 underline decoration-[#f39e36] decoration-4">clés en main</span>
            </p>
        </div>

        {# --- GRILLE DES FORMULES --- #}
        <div class="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            {% for formule in formules %}
                <div class="group bg-white rounded-[3rem] p-4 border-2 border-slate-900 shadow-[10px_10px_0px_0px_rgba(15,23,42,1)] hover:shadow-[15px_15px_0px_0px_rgba(15,23,42,1)] transition-all duration-300 flex flex-col" data-aos="fade-up">

                    {# Conteneur Image #}
                    <div class="relative overflow-hidden rounded-[2.5rem] aspect-[4/5] bg-slate-100 flex items-center justify-center border-b-2 border-slate-900">
                        {% if formule.imageName %}
                            <img src="{{ vich_uploader_asset(formule, 'imageFile') | imagine_filter('product_card') }}"
                                 alt="{{ formule.name }}"
                                 loading="lazy"
                                 class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700">
                        {% else %}
                            <img src="{{ asset('provider/images/favicon.png') }}" class="w-32 h-32 opacity-20 grayscale">
                        {% endif %}
                    </div>

                    {# Infos & Prix #}
                    <div class="mt-8 px-2 pb-4 flex-grow flex flex-col">
                        <h3 class="text-3xl font-black text-slate-900 leading-none italic uppercase tracking-tighter group-hover:text-[#fc0e50] transition-colors">
                            {{ formule.name }}
                        </h3>



                        {# Grille de Tarifs Dégressifs #}
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-3 mt-8 p-4 md:p-3 bg-slate-50 rounded-2xl md:rounded-3xl border-2 border-slate-900/5">

                            <!-- 1 JOUR -->
                            <div class="text-center pb-3 md:pb-0 border-b border-slate-200 md:border-b-0">
                                <p class="text-[10px] md:text-[8px] font-black text-slate-400 uppercase tracking-wider">1 JOUR</p>
                                <p class="text-base md:text-sm font-black text-slate-900">
                                    {% if tvaEnabled %}
                                        {{ (formule.price1j * 1.20)|format_currency('EUR') }} <span class="text-[10px] opacity-75">TTC</span>
                                    {% else %}
                                        {{ formule.price1j|format_currency('EUR') }}
                                    {% endif %}
                                </p>
                            </div>

                            <!-- 2 JOURS -->
                            <div class="text-center py-3 md:py-0 border-b border-slate-200 md:border-b-0 md:border-x">
                                <p class="text-[10px] md:text-[8px] font-black text-slate-400 uppercase tracking-wider">2 JOURS</p>
                                <p class="text-base md:text-sm font-black text-blue-600 md:text-blue-900">
                                    {% if tvaEnabled %}
                                        {{ (formule.price2j * 1.20)|format_currency('EUR') }} <span class="text-[10px] opacity-75">TTC</span>
                                    {% else %}
                                        {{ formule.price2j|format_currency('EUR') }}
                                    {% endif %}
                                </p>
                            </div>

                            <!-- 5 JOURS -->
                            <div class="text-center pt-3 md:pt-0">
                                <p class="text-[10px] md:text-[8px] font-black text-slate-400 uppercase tracking-wider">5 JOURS</p>
                                <p class="text-base md:text-sm font-black text-emerald-600">
                                    {% if tvaEnabled %}
                                        {{ (formule.price5j * 1.20)|format_currency('EUR') }} <span class="text-[10px] opacity-75">TTC</span>
                                    {% else %}
                                        {{ formule.price5j|format_currency('EUR') }}
                                    {% endif %}
                                </p>
                            </div>

                        </div>

                        <div class="mt-8">
                            <a href="{{ path('reservation_formule_show', {slug: formule.slug|default(formule.id)}) }}"
                               class="block w-full py-4 bg-[#f39e36] hover:bg-slate-900 text-white text-center rounded-2xl font-black uppercase italic tracking-widest transition-all border-2 border-slate-900 shadow-[4px_4px_0px_0px_rgba(15,23,42,1)] active:translate-y-1 active:shadow-none">
                                Réserver ce pack
                            </a>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="col-span-full py-32 text-center bg-white border-4 border-dashed border-slate-200 rounded-[4rem]" data-aos="fade-in">
                    <div class="text-6xl mb-6">🎈</div>
                    <h2 class="text-2xl font-black text-slate-900 uppercase italic">Mise à jour imminente</h2>
                    <p class="text-slate-500 font-medium mt-2">Nos formules arrivent d'ici quelques minutes...</p>
                </div>
            {% endfor %}
        </div>

        {# --- CTA CATALOGUE --- #}
        <div class="mt-20 text-center" data-aos="fade-up">
            <p class="text-slate-500 font-bold uppercase text-[10px] tracking-[0.2em] mb-6">Besoin de composer votre propre bonheur ?</p>
            <a href="{{ url('reservation_catalogue') }}" class="inline-flex items-center space-x-3 bg-slate-900 text-white px-10 py-5 rounded-full font-black uppercase italic tracking-wider hover:bg-[#fc0e50] transition-all group">
                <span>Accéder au catalogue complet</span>
                <svg class="w-5 h-5 transform group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
            </a>
        </div>
    </div>
{% endblock %}
