{% extends 'public/themes/sahaba/base.html.twig' %}

{% block body %}
    {% set hasWhatsapp = school.whatsapp != 'WhatsApp non renseigné' %}
    {% set whatsappNumber = school.whatsapp|replace({' ': '', '+': '', '-': '', '(': '', ')': ''}) %}
    {% set presentationImage1 = school.presentationImages[0] ?? null %}
    {% set presentationImage2 = school.presentationImages[1] ?? null %}
    {% set presentationImage3 = school.presentationImages[2] ?? null %}

    <section class="sahaba-hero">
        <div class="container sahaba-hero-grid">
            <div class="sahaba-hero-copy">
                <div class="sahaba-eyebrow">{{ school.slogan }}</div>
                <h1 class="sahaba-display">{{ school.heroTitle }}</h1>
                <p class="sahaba-lead">{{ school.heroSubtitle }}</p>
                <div class="sahaba-hero-actions">
                    <a class="sahaba-cta" href="{{ school.registrationRoute }}"><i class="bi bi-pencil-square"></i> Déposer une demande</a>
                    <a class="sahaba-secondary" href="#niveaux"><i class="bi bi-layers"></i> Voir les niveaux</a>
                </div>
            </div>
            <div class="sahaba-hero-panel" aria-label="Repères clés">
                <div class="sahaba-panel-top">
                    <span>Session 2026-2027</span>
                    <strong>Qur’an & Mutun</strong>
                </div>
                {% if school.hasHeroImage %}
                    <img class="sahaba-hero-image" src="{{ asset(school.heroImage) }}" alt="{{ school.name }}">
                {% else %}
                    <div class="sahaba-manuscript" aria-hidden="true">
                        <span>اقرأ</span>
                        <small>Lecture · Tajwid · Mémorisation</small>
                    </div>
                {% endif %}
                <div class="sahaba-hero-facts">
                    <article><span>Inscription</span><strong>10 mai - 06 juin 2026</strong></article>
                    <article><span>Début des cours</span><strong>13 juin 2026</strong></article>
                    <article><span>Fin de parcours</span><strong>Attestation</strong></article>
                </div>
            </div>
        </div>
    </section>

    <section class="container sahaba-section" id="presentation">
        <div class="sahaba-about">
            <div>
                <div class="sahaba-kicker">Présentation</div>
                <h2>{{ school.aboutTitle }}</h2>
            </div>
            <div>
                <p>{{ school.aboutText }}</p>
                <div class="sahaba-note">
                    <i class="bi bi-award"></i>
                    <span>Une attestation est prévue en fin de parcours pour les apprenants ayant suivi le programme avec sérieux.</span>
                </div>
                {% if school.hasPresentationImages %}
                    <div class="sahaba-presentation-gallery">
                        {% if presentationImage1 %}
                            <figure class="sahaba-presentation-image sahaba-presentation-image-large">
                                <img src="{{ asset(presentationImage1) }}" alt="Présentation {{ school.name }}">
                            </figure>
                        {% endif %}
                        {% if presentationImage2 %}
                            <figure class="sahaba-presentation-image">
                                <img src="{{ asset(presentationImage2) }}" alt="Parcours Qur’an et Mutun">
                            </figure>
                        {% endif %}
                        {% if presentationImage3 %}
                            <figure class="sahaba-presentation-image">
                                <img src="{{ asset(presentationImage3) }}" alt="Cadre pédagogique {{ school.name }}">
                            </figure>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </section>

    <section class="sahaba-program-band" id="programmes">
        <div class="container sahaba-program-grid">
            {% for program in programs %}
                <article class="sahaba-program-card">
                    <span>{{ '%02d'|format(loop.index) }}</span>
                    <h3>{{ program.title }}</h3>
                    <p>{{ program.description }}</p>
                </article>
            {% endfor %}
        </div>
    </section>

    <section class="container sahaba-section" id="niveaux">
        <div class="sahaba-section-head">
            <div class="sahaba-kicker">Niveaux</div>
            <h2>Trois niveaux pour avancer de la lecture vers la mémorisation.</h2>
        </div>
        <div class="sahaba-level-list">
            {% for level in levels %}
                <article class="sahaba-level-row">
                    <div class="sahaba-level-index">N{{ loop.index }}</div>
                    <div>
                        <h3>{{ level.title }}</h3>
                        <p>{{ level.description }}</p>
                    </div>
                </article>
            {% endfor %}
        </div>
    </section>

    <section class="container sahaba-section" id="classes">
        <div class="sahaba-section-head">
            <div class="sahaba-kicker">Classes</div>
            <h2>Groupes principaux du week-end.</h2>
        </div>
        {% if classes is not empty %}
            <div class="sahaba-class-grid">
                {% for classe in classes %}
                    <article class="sahaba-class-card">
                        <span>{{ classe.niveau ? classe.niveau.nom : 'Niveau' }}</span>
                        <h3>{{ classe.nom }}</h3>
                        <p>
                            {% if classe.joursCours %}{{ classe.joursCours }}{% endif %}
                            {% if classe.mode %} · {{ classe.mode|replace({'_':' '})|title }}{% endif %}
                            {% if classe.sexe %} · {{ classe.sexe|replace({'_':' '})|title }}{% endif %}
                        </p>
                        <div class="sahaba-class-meta">
                            {% if classe.capacite %}<small>{{ classe.capacite }} places</small>{% endif %}
                            {% if classe.tarifDefaut %}<strong>{{ classe.tarifDefaut|number_format(0, ',', ' ') }} FCFA</strong>{% endif %}
                        </div>
                    </article>
                {% endfor %}
            </div>
        {% else %}
            <div class="sahaba-empty-state">
                <i class="bi bi-calendar2-check"></i>
                <strong>Les groupes seront bientôt publiés.</strong>
                <p>Contactez l’administration pour connaître les disponibilités.</p>
            </div>
        {% endif %}
    </section>

    <section class="sahaba-fees-band" id="frais">
        <div class="container sahaba-fees-grid">
            <div class="sahaba-fees-copy">
                <div class="sahaba-kicker">Frais</div>
                <h2>25 000 FCFA au total, répartis en deux étapes.</h2>
                <p>Les frais sont configurés dans le module finance afin de générer les échéances selon l’année active de Sahaba.</p>
            </div>
            <article class="sahaba-fee-card">
                <span>Acompte à l’inscription</span>
                <strong>10 000 FCFA</strong>
                <p>Montant payable à l’inscription.</p>
            </article>
            <article class="sahaba-fee-card">
                <span>Solde frais annuels</span>
                <strong>15 000 FCFA</strong>
                <p>À régler entre le 17 juillet 2026 et le 12 octobre 2026.</p>
            </article>
        </div>
    </section>

    <section class="container sahaba-section" id="calendrier">
        <div class="sahaba-calendar">
            <div>
                <div class="sahaba-kicker">Calendrier</div>
                <h2>Un démarrage encadré par une évaluation initiale.</h2>
            </div>
            <div class="sahaba-timeline">
                <article><span>10 mai 2026</span><strong>Ouverture des inscriptions</strong><p>Les dossiers peuvent être déposés en ligne.</p></article>
                <article><span>06 juin 2026</span><strong>Clôture des inscriptions</strong><p>L’administration prépare les groupes et les convocations.</p></article>
                <article><span>13 juin 2026</span><strong>Début des cours</strong><p>Premier week-end dédié à l’évaluation des niveaux.</p></article>
            </div>
        </div>
    </section>

    <section class="container sahaba-section">
        <div class="sahaba-cta-panel">
            <div>
                <div class="sahaba-kicker">Inscription</div>
                <h2>{{ school.ctaTitle }}</h2>
                <p>{{ school.ctaText }}</p>
            </div>
            <div class="sahaba-cta-actions">
                <a class="sahaba-cta sahaba-cta-light" href="{{ school.registrationRoute }}">Remplir le formulaire</a>
                {% if hasWhatsapp %}
                    <a class="sahaba-secondary sahaba-secondary-dark" href="https://wa.me/{{ whatsappNumber }}">Écrire sur WhatsApp</a>
                {% endif %}
            </div>
        </div>
    </section>

    <section class="container sahaba-section sahaba-contact-section" id="contact">
        <div class="sahaba-section-head">
            <div class="sahaba-kicker">Contact</div>
            <h2>Contacter l’administration.</h2>
        </div>
        <div class="sahaba-contact-grid">
            <article><span>Téléphone 1</span><strong>{{ school.phone }}</strong></article>
            {% if school.phone2 %}
                <article><span>Téléphone 2</span><strong>{{ school.phone2 }}</strong></article>
            {% endif %}
            <article><span>WhatsApp</span><strong>{{ school.whatsapp }}</strong></article>
            <article><span>Localisation</span><strong>{{ school.city }}</strong></article>
        </div>
    </section>
{% endblock %}