{% extends 'base.html.twig' %}

{% block title %}Nos Références - ARA Solutions{% endblock %}
{% block meta_description %}Découvrez nos réalisations : sites web, applications mobiles et solutions numériques développés pour nos clients.{% endblock %}

{% block body %}
{# Header #}
<section class="bg-gradient-to-br from-primary-dark to-primary pt-28 pb-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <p class="text-accent-light text-sm font-medium tracking-wider uppercase mb-2">Portfolio</p>
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white">Nos Références</h1>
        <p class="mt-3 text-gray-300 lg:text-lg max-w-2xl">Plus de 20 projets réalisés pour des entreprises, artisans, clubs et associations.</p>
    </div>
</section>

{# Filters + Grid #}
<section class="py-16 bg-surface">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {# Category Filters #}
        {% set category_labels = {'application': 'Applications', 'site-internet': 'Sites internet', 'solution': 'Solutions'} %}
        <div class="flex flex-wrap gap-2 mb-10" id="filters">
            <button data-filter="all" class="filter-btn active px-4 py-2 text-sm font-medium rounded-full bg-primary text-white transition-colors">
                Tous
            </button>
            {% for category in categories %}
            <button data-filter="{{ category }}" class="filter-btn px-4 py-2 text-sm font-medium rounded-full bg-white text-gray-600 border border-gray-200 hover:border-accent hover:text-accent transition-colors">
                {{ category_labels[category]|default(category|capitalize) }}
            </button>
            {% endfor %}
        </div>

        {# References Grid #}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="references-grid">
            {% for reference in references %}
            <div class="reference-item" data-category="{{ reference.category }}">
                {% include 'components/_reference_card.html.twig' %}
            </div>
            {% endfor %}
        </div>

        {# Empty state #}
        <div id="no-results" class="hidden text-center py-12">
            <p class="text-gray-400">Aucune référence dans cette catégorie.</p>
        </div>
    </div>
</section>
{% endblock %}

{% block body_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.filter-btn');
    const items = document.querySelectorAll('.reference-item');
    const noResults = document.getElementById('no-results');

    buttons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            const filter = this.dataset.filter;

            buttons.forEach(function(b) {
                b.classList.remove('active', 'bg-primary', 'text-white');
                b.classList.add('bg-white', 'text-gray-600', 'border', 'border-gray-200');
            });
            this.classList.add('active', 'bg-primary', 'text-white');
            this.classList.remove('bg-white', 'text-gray-600', 'border', 'border-gray-200');

            var visibleCount = 0;
            items.forEach(function(item) {
                if (filter === 'all' || item.dataset.category === filter) {
                    item.style.display = '';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });

            noResults.classList.toggle('hidden', visibleCount > 0);
        });
    });
});
</script>
{% endblock %}