{% extends 'layouts/front_layout.html.twig' %}

{% block title %}Galerie | Luxim - Portfolio Immobilier{% endblock %}

{% block body %}
<div class="min-h-screen bg-white">
    {# Hero Section avec Image Réelle & Overlay #}
    {% include 'visiteur/_hero.html.twig' %}

    <section class="py-20">
        <div class="container mx-auto px-4">
            {# Filters #}
            <div class="mb-10 flex flex-wrap justify-center gap-2">
                {% set categories = ["Tous", "Appartements", "Villas", "Intérieurs", "Chantiers"] %}
                {% for cat in categories %}
                    <button
                        onclick="filterGallery('{{ cat }}', this)"
                        class="gallery-filter-btn rounded-full px-5 py-2 font-heading text-sm font-semibold transition-colors
                        {{ loop.first ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground hover:bg-primary/10' }}"
                    >
                        {{ cat }}
                    </button>
                {% endfor %}
            </div>

            {# Grid #}
            <div id="gallery-grid" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                {# Simulation des datas Symfony #}
                {% set images = [
                    { src: "https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?q=80&w=800", alt: "Résidence Les Palmiers", category: "Appartements" },
                    { src: "https://images.unsplash.com/photo-1613977257363-707ba9348227?q=80&w=800", alt: "Villa Belvédère", category: "Villas" },
                    { src: "https://images.unsplash.com/photo-1618221195710-dd6b41faeaa6?q=80&w=800", alt: "Salon moderne", category: "Intérieurs" },
                    { src: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=800", alt: "Chantier Cocody", category: "Chantiers" },
                    { src: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=800", alt: "Façade Résidence Azur", category: "Appartements" },
                    { src: "https://images.unsplash.com/photo-1613490493576-7fde63acd811?q=80&w=800", alt: "Villa duplex Bingerville", category: "Villas" },
                    { src: "https://images.unsplash.com/photo-1556911228-e59f9d4fb39d?q=80&w=800", alt: "Cuisine équipée", category: "Intérieurs" },
                    { src: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=800", alt: "Structure béton", category: "Chantiers" },
                    { src: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=800", alt: "Piscine Domaine Royal", category: "Villas" },
                    { src: "https://images.unsplash.com/photo-1560448204-603b3fc33ddc?q=80&w=800", alt: "Chambre parentale", category: "Intérieurs" },
                    { src: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=800", alt: "Immeuble Marcory", category: "Appartements" },
                    { src: "https://images.unsplash.com/photo-1541888946425-d81bb19480c5?q=80&w=800", alt: "Fondation chantier", category: "Chantiers" }
                ] %}

                {% for img in images %}
                    <div 
                        class="gallery-item group overflow-hidden rounded-xl bg-muted transition-all duration-500 ease-in-out"
                        data-category="{{ img.category }}"
                        data-aos="fade-up"
                        data-aos-delay="{{ (loop.index0 % 4) * 50 }}"
                    >
                        <div class="relative h-64 w-full overflow-hidden">
                            <img
                                src="{{ img.src }}"
                                alt="{{ img.alt }}"
                                loading="lazy"
                                class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
                                onerror="this.src='https://placehold.co/600x400?text=Image+Projet'"
                            />
                        </div>
                        <div class="p-3 bg-white">
                            <p class="text-sm font-medium text-slate-900">{{ img.alt }}</p>
                            <p class="text-xs text-muted-foreground">{{ img.category }}</p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
</div>

<style>
    /* Simulation de l'effet "popLayout" d'AnimatePresence */
    .gallery-item.hide {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
        pointer-events: none;
        position: absolute;
        visibility: hidden;
    }
    
    #gallery-grid {
        position: relative;
        transition: all 0.4s ease;
    }
</style>

<script>
    function filterGallery(category, btn) {
        // 1. Update Buttons UI
        document.querySelectorAll('.gallery-filter-btn').forEach(b => {
            b.classList.remove('bg-primary', 'text-primary-foreground');
            b.classList.add('bg-secondary', 'text-secondary-foreground');
        });
        btn.classList.add('bg-primary', 'text-primary-foreground');
        btn.classList.remove('bg-secondary', 'text-secondary-foreground');

        // 2. Logic de filtrage
        const items = document.querySelectorAll('.gallery-item');
        
        items.forEach((item, index) => {
            const itemCat = item.getAttribute('data-category');
            
            if (category === 'Tous' || itemCat === category) {
                item.classList.remove('hide');
                item.style.display = 'block';
                // Trigger re-animation
                setTimeout(() => {
                    item.style.opacity = '1';
                    item.style.transform = 'scale(1) translateY(0)';
                }, 10);
            } else {
                item.style.opacity = '0';
                item.style.transform = 'scale(0.9) translateY(20px)';
                setTimeout(() => {
                    if (item.style.opacity === '0') {
                        item.style.display = 'none';
                        item.classList.add('hide');
                    }
                }, 400);
            }
        });
    }
</script>
{% endblock %}