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

{% block title %}Pause Méridienne — 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">Pause</span>
                    <span class="title-line">Méridienne</span>
                </h1>
                <p class="hero-subtitle">Activités et animations de la pause méridienne</p>
            </div>
        </div>
    </section>

    <!-- CHAPITRE 1: DISCIPLINES SPORTIVES -->
    <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">Association Sportive</h2>
                </div>
                <div class="chapter-text">
                    <div class="clubs-grid single-item">
                        <div class="club-card" onclick="openImageModal('{{ asset('images/assosport.PNG') }}')">
                            <div class="club-image-wrapper">
                                <img src="{{ asset('images/assosport.PNG') }}" alt="Disciplines de l'Association Sportive" class="club-image">
                                <div class="club-overlay">
                                    <div class="club-icon">🔍</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="image-hint">Cliquez sur l'image pour l'agrandir</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CHAPITRE 2: CLUBS -->
    <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">Clubs</h2>
                </div>
                <div class="chapter-text">
                    <p class="story-paragraph">
                        Durant la pause méridienne, nos élèves peuvent participer à différents clubs
                        pour développer leurs talents et découvrir de nouvelles passions.
                    </p>

                    <div class="clubs-grid">
                        <div class="club-card" onclick="openImageModal('{{ asset('images/clubs/club1.jpg') }}')">
                            <div class="club-image-wrapper">
                                <img src="{{ asset('images/clubs/club1.jpg') }}" alt="Club 1" class="club-image">
                                <div class="club-overlay">
                                    <div class="club-icon">🔍</div>
                                </div>
                            </div>
                        </div>

                        <div class="club-card" onclick="openImageModal('{{ asset('images/clubs/club2.jpg') }}')">
                            <div class="club-image-wrapper">
                                <img src="{{ asset('images/clubs/club2.jpg') }}" alt="Club 2" class="club-image">
                                <div class="club-overlay">
                                    <div class="club-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 %}