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

{% block title %}Animation Pastorale - Collège Notre-Dame de Bourbourg{% endblock %}

{% block body %}
    <!-- === HERO SECTION === -->
    <section class="story-hero">
        <div class="hero-content">
            <h1 class="hero-title">
                <span class="title-line">Animation Pastorale</span>
            </h1>
            <p class="hero-subtitle">Partager sa foi et la vivre autrement</p>
        </div>
        <div class="hero-background"></div>
    </section>

    <!-- === GALERIES === -->
    <main class="main-content" style="padding: 60px 0;">
        <div class="container">
            <style>
                .simple-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 30px;
                    max-width: 1200px;
                    margin: 0 auto;
                }

                .simple-card {
                    background: var(--card-bg);
                    border-radius: 12px;
                    overflow: hidden;
                    border: 1px solid var(--border-color);
                    cursor: pointer;
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                }

                .simple-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                }

                .simple-card img {
                    width: 100%;
                    height: auto;
                    display: block;
                }

                .simple-card-title {
                    padding: 20px;
                    text-align: center;
                    font-size: 1.2rem;
                    font-weight: 600;
                    color: var(--text-primary);
                }

                @media (max-width: 768px) {
                    .simple-grid {
                        grid-template-columns: 1fr;
                    }
                }
            </style>

            <div class="simple-grid">
                <!-- ROME -->
                <div class="simple-card gallery-card" data-gallery-id="rome" data-gallery="rome">
                    <img src="{{ asset('images/pastorale/rome/titre.PNG') }}" alt="Rome">
                    <div class="simple-card-title">Rome</div>
                </div>

                <!-- CÉLÉBRATIONS -->
                <div class="simple-card gallery-card" data-gallery-id="celebrations" data-gallery="celebrations">
                    <img src="{{ asset('images/pastorale/célébrations/titre.PNG') }}" alt="Célébrations">
                    <div class="simple-card-title">Célébrations</div>
                </div>

                <!-- LE CARÊME -->
                <div class="simple-card gallery-card" data-gallery-id="careme" data-gallery="careme">
                    <img src="{{ asset('images/pastorale/le careme/titre.PNG') }}" alt="Le Carême">
                    <div class="simple-card-title">Le Carême</div>
                </div>

                <!-- LES ASSOCIATIONS -->
                <div class="simple-card gallery-card" data-gallery-id="associations" data-gallery="associations">
                    <img src="{{ asset('images/pastorale/les associations/titre.PNG') }}" alt="Les Associations">
                    <div class="simple-card-title">Les Associations</div>
                </div>

                <!-- NOËL -->
                <div class="simple-card gallery-card" data-gallery-id="noel" data-gallery="noel">
                    <img src="{{ asset('images/pastorale/noel/titre.PNG') }}" alt="Noël">
                    <div class="simple-card-title">Noël</div>
                </div>

                <!-- NOTRE PARRAIN -->
                <div class="simple-card gallery-card" data-gallery-id="parrain" data-gallery="parrain">
                    <img src="{{ asset('images/pastorale/notre parrain nouis noel/titre.PNG') }}" alt="Notre Parrain">
                    <div class="simple-card-title">Notre Parrain Louis Noel</div>
                </div>

                <!-- PRÉPARATION AU SACREMENT -->
                <div class="simple-card gallery-card" data-gallery-id="sacrement" data-gallery="sacrement">
                    <img src="{{ asset('images/pastorale/preparation au sacrement/titre.PNG') }}" alt="Préparation au Sacrement">
                    <div class="simple-card-title">Préparation au Sacrement</div>
                </div>

                <!-- SOEUR GABY -->
                <div class="simple-card gallery-card" data-gallery-id="gaby" data-gallery="gaby">
                    <img src="{{ asset('images/pastorale/soeur gaby/titre.PNG') }}" alt="Soeur Gaby">
                    <div class="simple-card-title">Soeur Gaby</div>
                </div>

                <!-- TEMPS DU MATIN -->
                <div class="simple-card gallery-card" data-gallery-id="matin" data-gallery="matin">
                    <img src="{{ asset('images/pastorale/temps du matin/titre.PNG') }}" alt="Temps du Matin">
                    <div class="simple-card-title">Temps du Matin</div>
                </div>

                <!-- ANIMATION EN PASTORALE -->
                <div class="simple-card gallery-card" data-gallery-id="animation" data-gallery="animation">
                    <img src="{{ asset('images/pastorale/animation en pastorale/titre.PNG') }}" alt="Animation en Pastorale">
                    <div class="simple-card-title">Animation en Pastorale</div>
                </div>
            </div>
        </div>
    </main>

    <!-- === DONNÉES DES GALERIES === -->
    <script type="application/json" id="galleriesData">
        {{ galleries|json_encode|raw }}
    </script>
{% endblock %}

{% block modals %}
    <!-- === MODAL GALERIE === -->
    <div id="galleryModal" class="gallery-modal">
        <div class="gallery-modal-content">
            <button class="gallery-modal-close" aria-label="Fermer">&times;</button>

            <h2 id="galleryModalTitle" class="gallery-modal-title"></h2>

            <div class="gallery-slider">
                <button class="gallery-slider-prev" aria-label="Image précédente">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>

                <div class="gallery-slider-container">
                    <div id="gallerySliderTrack" class="gallery-slider-track"></div>
                </div>

                <button class="gallery-slider-next" aria-label="Image suivante">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
            </div>

            <div class="gallery-counter">
                <span id="galleryModalCounter"></span>
            </div>

            <div class="gallery-thumbnails-container">
                <div id="galleryThumbnails" class="gallery-thumbnails"></div>
            </div>
        </div>
    </div>
{% endblock %}