{% extends 'public/themes/daroul_ilm/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="daroul-hero">
        <div class="daroul-pattern" aria-hidden="true"></div>
        <div class="container daroul-hero-grid">
            <div class="daroul-hero-copy">
                <div class="daroul-eyebrow">{{ school.name }}</div>
                <h1 class="daroul-display">{{ school.heroTitle }}</h1>
                <p class="daroul-lead">{{ school.heroSubtitle }}</p>
                <div class="daroul-hero-actions">
                    <a class="daroul-cta" href="{{ school.registrationRoute }}"><i class="bi bi-pencil-square"></i> Rejoindre une classe</a>
                    <a class="daroul-secondary" href="#programmes"><i class="bi bi-grid-3x3-gap"></i> Voir les parcours</a>
                </div>
                <div class="daroul-pills" aria-label="Langues et modes">
                    <span>Français</span>
                    <span>Haoussa</span>
                    <span>Foulfouldé</span>
                    <span>WhatsApp</span>
                    <span>Présentiel</span>
                </div>
            </div>
            <div class="daroul-frame">
                <div class="daroul-frame-arch" aria-hidden="true"></div>
                {% if school.hasHeroImage %}
                    <img class="daroul-hero-image" src="{{ asset(school.heroImage) }}" alt="{{ school.name }}">
                {% else %}
                    <div class="daroul-visual-placeholder" aria-hidden="true">
                        <span class="daroul-visual-calligraphy">علم</span>
                        <span class="daroul-visual-book"></span>
                    </div>
                {% endif %}
                <div class="daroul-frame-card">
                    <span>Présentation</span>
                    <strong>{{ school.aboutTitle }}</strong>
                    <p>{{ school.aboutText }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="container daroul-section" id="presentation">
        <div class="daroul-about-split">
            <div class="daroul-about-copy">
                <div class="daroul-kicker">Présentation</div>
                <h2>{{ school.aboutTitle }}</h2>
                <p>{{ school.aboutText }}</p>
                <div class="daroul-soft-note">
                    <strong>Notre approche :</strong>
                    <span>des parcours structurés, un suivi sérieux et une organisation claire pour faciliter l’apprentissage.</span>
                </div>
            </div>
            <div class="daroul-about-gallery" aria-hidden="true">
                <div class="daroul-about-image daroul-about-image-large">
                    {% if presentationImage1 %}
                        <img src="{{ asset(presentationImage1) }}" alt="">
                    {% else %}
                        <span>علم</span>
                    {% endif %}
                </div>
                <div class="daroul-about-image">
                    {% if presentationImage2 %}
                        <img src="{{ asset(presentationImage2) }}" alt="">
                    {% else %}
                        <span>قرآن</span>
                    {% endif %}
                </div>
                <div class="daroul-about-image">
                    {% if presentationImage3 %}
                        <img src="{{ asset(presentationImage3) }}" alt="">
                    {% else %}
                        <span>فقه</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

    <section class="container daroul-section" id="programmes">
        <div class="daroul-section-head">
            <div class="daroul-kicker">Programmes</div>
            <h2>Deux axes forts pour apprendre avec méthode et régularité.</h2>
            <p>Les programmes sont alimentés par les sections actives de la madrassa quand elles existent.</p>
        </div>
        <div class="daroul-program-grid">
            {% for program in programs %}
                <article class="daroul-program-card">
                    <div class="daroul-card-top">
                        <span>{{ '%02d'|format(loop.index) }}</span>
                        <i class="bi bi-moon-stars"></i>
                    </div>
                    <h3>{{ program.title }}</h3>
                    <p>{{ program.description }}</p>
                </article>
            {% endfor %}
        </div>
    </section>

    <section class="container daroul-section" id="langues">
        <div class="daroul-language-panel">
            <div class="daroul-section-head">
                <div class="daroul-kicker">Langues et organisation</div>
                <h2>Des groupes structurés selon la langue, le profil et le mode de cours.</h2>
            </div>
            <div class="daroul-languages-grid">
                <article class="daroul-language-card">
                    <span>FR</span>
                    <strong>Français</strong>
                    <p>Groupes hommes et femmes selon le programme choisi.</p>
                </article>
                <article class="daroul-language-card">
                    <span>HA</span>
                    <strong>Haoussa</strong>
                    <p>Suivi accessible pour les apprenants haoussaphones.</p>
                </article>
                <article class="daroul-language-card">
                    <span>FF</span>
                    <strong>Foulfouldé</strong>
                    <p>Orientation selon les disponibilités et le niveau.</p>
                </article>
                <article class="daroul-language-card daroul-language-card-wide">
                    <span><i class="bi bi-person-check"></i></span>
                    <strong>Présentiel personnalisé</strong>
                    <p>Rythme et tarif ajustés selon le nombre de séances.</p>
                </article>
            </div>
        </div>
    </section>

    <section class="container daroul-section" id="niveaux">
        <div class="daroul-section-head">
            <div class="daroul-kicker">Niveaux</div>
            <h2>Une progression pédagogique lisible.</h2>
        </div>
        <div class="daroul-level-grid">
            {% for level in levels %}
                <article class="daroul-level-card">
                    <span>Niveau {{ loop.index }}</span>
                    <h3>{{ level.title }}</h3>
                    <p>{{ level.description }}</p>
                </article>
            {% endfor %}
        </div>
    </section>

    <section class="container daroul-section" id="classes">
        <div class="daroul-section-head">
            <div class="daroul-kicker">Classes et groupes</div>
            <h2>Les groupes actifs configurés par l’école.</h2>
        </div>
        {% if classes is not empty %}
            <div class="daroul-class-grid">
                {% for classe in classes %}
                    <article class="daroul-class-card">
                        <div>
                            <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.sexe %} · {{ classe.sexe|replace({'_':' '})|title }}{% endif %}
                                {% if classe.mode %} · {{ classe.mode|replace({'_':' '})|title }}{% endif %}
                            </p>
                            <div class="daroul-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>
                        </div>
                        {% if classe.tarifDefaut %}
                            <strong>{{ classe.tarifDefaut|number_format(0, ',', ' ') }} FCFA</strong>
                        {% else %}
                            <strong>Sur mesure</strong>
                        {% endif %}
                    </article>
                {% endfor %}
            </div>
        {% else %}
            <div class="daroul-empty-state">
                <i class="bi bi-building-check"></i>
                <strong>Les groupes seront bientôt publiés.</strong>
                <p>Contactez l’administration pour choisir le programme et la langue adaptés.</p>
            </div>
        {% endif %}
    </section>

    <section class="daroul-pricing-band" id="tarifs">
        <div class="container">
            <div class="daroul-section-head">
                <div class="daroul-kicker">Tarifs</div>
                <h2>Des frais simples, lisibles et adaptés au parcours.</h2>
            </div>
            <div class="daroul-price-grid">
                {% for fee in fees %}
                    <article class="daroul-price-card">
                        <span>Tarif</span>
                        <h3>{{ fee.title }}</h3>
                        <strong>{{ fee.amount }}</strong>
                    </article>
                {% endfor %}
            </div>
        </div>
    </section>

    <section class="container daroul-section" id="inscription">
        <div class="daroul-steps-panel">
            <div>
                <div class="daroul-kicker">Méthode d’inscription</div>
                <h2>Un parcours administratif clair avant l’intégration.</h2>
            </div>
            <div class="daroul-steps">
                <article><span>01</span><strong>Demande</strong><p>L’apprenant dépose ses informations et précise WhatsApp ou présentiel.</p></article>
                <article><span>02</span><strong>Orientation</strong><p>L’école confirme la langue, le profil et le niveau.</p></article>
                <article><span>03</span><strong>Affectation</strong><p>La classe ou le suivi personnalisé est validé par l’administration.</p></article>
            </div>
        </div>
    </section>

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

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

    <section class="container daroul-section daroul-contact-section" id="contact">
        <div class="daroul-section-head">
            <div class="daroul-kicker">Contact</div>
            <h2>Échanger avec l’administration.</h2>
        </div>
        <div class="daroul-contact-grid">
            <article class="daroul-contact-card">
                <span>Téléphone</span>
                <strong>{{ school.phone }}</strong>
            </article>
            <article class="daroul-contact-card">
                <span>WhatsApp</span>
                <strong>{{ school.whatsapp }}</strong>
            </article>
            <article class="daroul-contact-card">
                <span>Email</span>
                <strong>{{ school.email }}</strong>
            </article>
            <article class="daroul-contact-card daroul-contact-card-wide">
                <span>Adresse</span>
                <strong>{{ school.address }}{% if school.city != 'Non renseigné' %}, {{ school.city }}{% endif %}</strong>
            </article>
        </div>
    </section>
{% endblock %}
