{% extends 'public/themes/qamar/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="qamar-hero">
        <div class="container qamar-hero-grid">
            <div class="qamar-hero-copy">
                <div class="qamar-eyebrow">{{ school.name }}</div>
                <h1 class="qamar-display">{{ school.heroTitle }}</h1>
                <p class="qamar-lead">{{ school.heroSubtitle }}</p>
                <div class="qamar-hero-actions">
                    <a class="qamar-cta" href="{{ school.registrationRoute }}">Commencer l’inscription</a>
                    {% if hasWhatsapp %}
                        <a class="qamar-secondary" href="https://wa.me/{{ whatsappNumber }}">WhatsApp</a>
                    {% else %}
                        <a class="qamar-secondary" href="#programmes">Découvrir les parcours</a>
                    {% endif %}
                </div>
                <div class="qamar-tags" aria-label="Repères du programme">
                    <span>Femmes</span>
                    <span>En ligne</span>
                    <span>Qur’an</span>
                    <span>Suivi progressif</span>
                </div>
            </div>
            <div class="qamar-hero-visual">
                {% if school.hasHeroImage %}
                    <img class="qamar-hero-image" src="{{ asset(school.heroImage) }}" alt="{{ school.name }}">
                {% else %}
                    <div class="qamar-arch-scene" aria-hidden="true">
                        <div class="qamar-arch-window">
                            <span class="qamar-arch-moon"></span>
                            <span class="qamar-arch-line"></span>
                            <span class="qamar-arch-book"></span>
                        </div>
                    </div>
                {% endif %}
                <div class="qamar-hero-panel">
                    <span>Accompagnement</span>
                    <strong>{{ school.aboutTitle }}</strong>
                    <p>{{ school.aboutText }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="container qamar-section" id="presentation">
        <div class="qamar-split">
            <div class="qamar-about-copy">
                <div class="qamar-kicker">Présentation</div>
                <h2>{{ school.aboutTitle }}</h2>
                <p>{{ school.aboutText }}</p>
                <div class="qamar-soft-note">
                    <i class="bi bi-stars"></i>
                    <span>Un cadre lisible pour apprendre, réviser et progresser avec régularité.</span>
                </div>
            </div>
            <div class="qamar-gallery" aria-hidden="true">
                <div class="qamar-gallery-card qamar-gallery-card-large">
                    {% if presentationImage1 %}
                        <img class="qamar-gallery-image" src="{{ asset(presentationImage1) }}" alt="">
                    {% else %}
                        <span class="qamar-gallery-icon">ق</span>
                        <strong>Lecture</strong>
                    {% endif %}
                </div>
                <div class="qamar-gallery-card">
                    {% if presentationImage2 %}
                        <img class="qamar-gallery-image" src="{{ asset(presentationImage2) }}" alt="">
                    {% else %}
                        <span class="qamar-gallery-icon">ن</span>
                        <strong>Qaida</strong>
                    {% endif %}
                </div>
                <div class="qamar-gallery-card">
                    {% if presentationImage3 %}
                        <img class="qamar-gallery-image" src="{{ asset(presentationImage3) }}" alt="">
                    {% else %}
                        <span class="qamar-gallery-icon">ح</span>
                        <strong>Mémorisation</strong>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

    <section class="container qamar-section" id="programmes">
        <div class="qamar-section-head">
            <div class="qamar-kicker">Programmes</div>
            <h2>Des parcours adaptés à la progression de chaque apprenante.</h2>
            <p>Les cartes ci-dessous suivent les sections actives configurées depuis le tableau de bord école.</p>
        </div>
        <div class="qamar-card-grid">
            {% for program in programs %}
                <article class="qamar-program-card">
                    <div class="qamar-card-number">{{ '%02d'|format(loop.index) }}</div>
                    <div class="qamar-card-icon"><i class="bi bi-moon-stars"></i></div>
                    <h3>{{ program.title }}</h3>
                    <p>{{ program.description }}</p>
                </article>
            {% endfor %}
        </div>
    </section>

    <section class="container qamar-section" id="niveaux">
        <div class="qamar-section-head qamar-section-head-narrow">
            <div class="qamar-kicker">Niveaux</div>
            <h2>Une progression simple à comprendre avant l’affectation.</h2>
        </div>
        <div class="qamar-level-grid">
            {% for level in levels %}
                <article class="qamar-level-card">
                    <span>Palier {{ loop.index }}</span>
                    <h3>{{ level.title }}</h3>
                    <p>{{ level.description }}</p>
                </article>
            {% endfor %}
        </div>
    </section>

    <section class="container qamar-section" id="classes">
        <div class="qamar-section-head">
            <div class="qamar-kicker">Classes et groupes</div>
            <h2>Les groupes ouverts apparaissent automatiquement ici.</h2>
        </div>
        {% if classes is not empty %}
            <div class="qamar-class-grid">
                {% for classe in classes %}
                    <article class="qamar-class-card">
                        <span>{{ classe.section ? classe.section.nom : 'Section' }}</span>
                        <h3>{{ classe.nom }}</h3>
                        <p>
                            {{ classe.niveau ? classe.niveau.nom : 'Niveau à préciser' }}
                            {% if classe.langue %} · {{ classe.langue|replace({'_':' '})|title }}{% endif %}
                            {% if classe.mode %} · {{ classe.mode|replace({'_':' '})|title }}{% endif %}
                        </p>
                        <div class="qamar-class-meta">
                            {% if classe.joursCours %}<small>{{ classe.joursCours }}</small>{% endif %}
                            {% if classe.heureDebut %}<small>{{ classe.heureDebut|date('H:i') }}</small>{% endif %}
                            {% if classe.capacite %}<small>{{ classe.capacite }} places</small>{% endif %}
                        </div>
                        {% if classe.tarifDefaut %}
                            <strong>{{ classe.tarifDefaut|number_format(0, ',', ' ') }} FCFA</strong>
                        {% endif %}
                    </article>
                {% endfor %}
            </div>
        {% else %}
            <div class="qamar-empty-state">
                <i class="bi bi-calendar2-heart"></i>
                <strong>Les classes seront bientôt publiées.</strong>
                <p>Contactez l’administration pour connaître les groupes disponibles.</p>
            </div>
        {% endif %}
    </section>

    <section class="qamar-pricing-band" id="tarifs">
        <div class="container">
            <div class="qamar-section-head">
                <div class="qamar-kicker">Tarifs</div>
                <h2>Des frais présentés clairement.</h2>
            </div>
            <div class="qamar-price-grid">
                {% for fee in fees %}
                    <article class="qamar-price-card">
                        <span>Tarif</span>
                        <h3>{{ fee.title }}</h3>
                        <strong>{{ fee.amount }}</strong>
                    </article>
                {% endfor %}
            </div>
        </div>
    </section>

    <section class="container qamar-section" id="inscription">
        <div class="qamar-steps-panel">
            <div>
                <div class="qamar-kicker">Inscription</div>
                <h2>Un parcours clair jusqu’au démarrage des cours.</h2>
            </div>
            <div class="qamar-steps">
                <article><span>01</span><strong>Préinscription</strong><p>L’apprenante remplit le formulaire et reçoit un numéro de dossier.</p></article>
                <article><span>02</span><strong>Validation</strong><p>L’administration vérifie le dossier et prépare l’affectation.</p></article>
                <article><span>03</span><strong>Classe</strong><p>L’apprenante rejoint le groupe adapté à son niveau.</p></article>
            </div>
        </div>
    </section>

    <section class="container qamar-section">
        <div class="qamar-stats">
            {% for stat in stats %}
                <div class="qamar-stat-card">
                    <strong>{{ stat.value }}</strong>
                    <span>{{ stat.label }}</span>
                </div>
            {% endfor %}
        </div>
    </section>

    <section class="container qamar-section">
        <div class="qamar-cta-panel">
            <div>
                <div class="qamar-kicker">Étape suivante</div>
                <h2>{{ school.ctaTitle }}</h2>
                <p>{{ school.ctaText }}</p>
            </div>
            <div class="qamar-cta-actions">
                <a class="qamar-cta qamar-cta-light" href="{{ school.registrationRoute }}">Déposer une demande</a>
                {% if hasWhatsapp %}
                    <a class="qamar-secondary qamar-secondary-dark" href="https://wa.me/{{ whatsappNumber }}">Écrire sur WhatsApp</a>
                {% endif %}
            </div>
        </div>
    </section>

    <section class="container qamar-section qamar-contact-section" id="contact">
        <div class="qamar-section-head">
            <div class="qamar-kicker">Contact</div>
            <h2>Besoin d’orientation avant l’inscription ?</h2>
        </div>
        <div class="qamar-contact-grid">
            <article class="qamar-contact-card">
                <span>Téléphone</span>
                <strong>{{ school.phone }}</strong>
            </article>
            <article class="qamar-contact-card">
                <span>WhatsApp</span>
                <strong>{{ school.whatsapp }}</strong>
            </article>
            <article class="qamar-contact-card">
                <span>Email</span>
                <strong>{{ school.email }}</strong>
            </article>
            <article class="qamar-contact-card">
                <span>Adresse</span>
                <strong>{{ school.address }}{% if school.city != 'Non renseigné' %}, {{ school.city }}{% endif %}</strong>
            </article>
        </div>
    </section>
{% endblock %}
