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

{% block title %}Nos Séjours — Collège Notre‑Dame{% endblock %}

{% block body %}
    <!-- SECTION HÉRO -->
    <section class="story-hero scroll-reveal">
        <div class="story-container">
            <div class="hero-content">
                <h1 class="hero-title">
                    <span class="title-line">Nos</span>
                    <span class="title-line">Séjours</span>
                </h1>
                <p class="hero-subtitle">Séjours scolaires et sorties pédagogiques</p>
            </div>
        </div>
    </section>

    <!-- CHAPITRE : SÉJOURS -->
    <section class="story-chapter chapter-1 scroll-reveal">
        <div class="story-container">
            <div class="chapter-content">
                <div class="chapter-header">
                    <div class="chapter-number">01</div>
                    <h2 class="chapter-title">Séjours</h2>
                </div>
                <div class="chapter-text">
                    <p class="story-paragraph">
                        Chaque année, nos élèves partent à la découverte de nouvelles destinations,
                        enrichissant leur parcours scolaire par des expériences culturelles et humaines inoubliables.
                    </p>

                    <div class="voyages-grid">

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Alsace.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Alsace.jpg') }}" alt="Voyage en Alsace" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Angleterre.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Angleterre.jpg') }}" alt="Voyage en Angleterre" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Espagne.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Espagne.jpg') }}" alt="Voyage en Espagne" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Lozaire.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Lozaire.jpg') }}" alt="Voyage en Lozère" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Morzine.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Morzine.jpg') }}" alt="Voyage à Morzine" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/NewYork.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/NewYork.jpg') }}" alt="Voyage à New York" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Normandie.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Normandie.jpg') }}" alt="Voyage en Normandie" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Pays Bas.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Pays Bas.jpg') }}" alt="Voyage aux Pays-Bas" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Puy du Fou.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Puy du Fou.jpg') }}" alt="Visite du Puy du Fou" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Rome.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Rome.jpg') }}" alt="Voyage à Rome" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Val Cenis.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Val Cenis.jpg') }}" alt="Voyage à Val Cenis" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CHAPITRE : ERASMUS+ -->
    <section class="story-chapter chapter-2 scroll-reveal">
        <div class="story-container">
            <div class="chapter-content">
                <div class="chapter-header">
                    <div class="chapter-number">02</div>
                    <h2 class="chapter-title">Erasmus</h2>
                </div>
                <div class="chapter-text">
                    <p class="story-paragraph">
                        Dans le cadre du programme Erasmus+, nos élèves participent à des échanges européens enrichissants,
                        favorisant l'ouverture culturelle et le développement de compétences linguistiques et interculturelles.
                    </p>

                    <div class="erasmus-grid">
                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Pologne.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Pologne.jpg') }}" alt="Échange Erasmus+ en Pologne" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="voyage-card" onclick="openImageModal('{{ asset('images/voyages/Allemagne.jpg') }}')">
                            <div class="voyage-image-wrapper">
                                <img src="{{ asset('images/voyages/Allemagne.jpg') }}" alt="Échange Erasmus+ en Allemagne" class="voyage-image">
                                <div class="voyage-overlay">
                                    <div class="voyage-icon">🔍</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function openImageModal(src) {
            document.getElementById('imageModal').style.display = 'flex';
            document.getElementById('modalImage').src = src;
            document.body.style.overflow = 'hidden';
        }

        function closeImageModal() {
            document.getElementById('imageModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // Fermer avec la touche Échap
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeImageModal();
            }
        });
    </script>
{% endblock %}