{#
 Organisme — Modale de nouveauté
 ================================
 Panneau dégradé Bubul à gauche (texte), illustration flottante à droite.
 En dessous de `md`, l'illustration passe au-dessus et le texte en dessous.

 Paramètres :
   badge       string   Pastille au-dessus du titre (optionnel)
   title       string   Titre de l'annonce
   body        string   Paragraphe d'introduction
   bullets     array    Puces (0 à 4)
   imagePath   string   Chemin public de l'illustration (optionnel — sans elle,
                        le panneau de texte occupe toute la largeur)
   imageAlt    string   Texte alternatif de l'illustration
   ctaLabel    string   Libellé du bouton principal (optionnel)
   ctaUrl      string   Destination du bouton principal
   closeLabel  string   Libellé du bouton secondaire (défaut : « Fermer »)

   modalAttr   object   Attributs HTML sur le conteneur
   closeAttr   object   Attributs HTML sur la croix, le bouton secondaire et le fond
   ctaAttr     object   Attributs HTML sur le bouton principal

   targetScope string   Nom d'un contrôleur Stimulus (ex. 'admin--announcement-preview').
                        Renseigné, chaque zone reçoit un data-<scope>-target et les
                        blocs optionnels sont rendus même vides, pour que la
                        prévisualisation puisse les remplir à la volée. En production,
                        laisser vide.
   previewBulletSlots int  Nombre d'emplacements de puces rendus vides en
                        prévisualisation (défaut : 4, cf. Announcement::MAX_BULLETS).
#}

{% set isPreview = targetScope is defined and targetScope %}
{% set bullets = bullets|default([]) %}

<div class="hidden fixed inset-0 z-[60] items-center justify-center p-4"
     role="dialog" aria-modal="true" aria-labelledby="announcement-title"
     {% for k, v in (modalAttr ?? {}) %}{{ k }}="{{ v }}" {% endfor %}>

    {# Fond — cliquer dessus ferme, au même titre que la croix #}
    <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"
         {% for k, v in (closeAttr ?? {}) %}{{ k }}="{{ v }}" {% endfor %}></div>

    {# Panneau #}
    <div class="relative w-full max-w-3xl max-h-[90vh] overflow-y-auto bg-white rounded-2xl shadow-2xl
                flex flex-col md:flex-row announcement-modal-panel">

        {# Pas de croix : le bouton « Fermer » du panneau de texte porte déjà la
           sortie, et il est doublé par Échap et le clic sur le fond. Une croix
           flottant sur l'illustration ajoutait une seconde cible pour la même
           action, moins lisible que celle qui est nommée. #}

        {# ── Texte ──────────────────────────────────────────────────────────── #}
        <div class="order-2 md:order-1 flex-1 md:flex-[1.1] p-7 md:p-9 flex flex-col
                    bg-[linear-gradient(150deg,#0d1b3e_0%,#0C81E4_100%)]">

            {% if isPreview or badge|default(null) %}
                <span class="self-start inline-block text-[10px] font-extrabold tracking-[0.11em] uppercase
                             px-2.5 py-1 rounded-md bg-white/20 text-white mb-3 {{ badge|default(null) ? '' : 'hidden' }}"
                      {% if isPreview %}data-{{ targetScope }}-target="badge"{% endif %}>{{ badge|default('') }}</span>
            {% endif %}

            <h2 id="announcement-title"
                class="text-2xl md:text-[28px] font-bold text-white leading-tight tracking-tight"
                {% if isPreview %}data-{{ targetScope }}-target="title"{% endif %}>{{ title|default('') }}</h2>

            {# whitespace-pre-line plutôt que nl2br : les sauts de ligne survivent aussi
               quand la prévisualisation réécrit ce paragraphe en textContent. #}
            <p class="mt-2.5 text-sm text-white/80 leading-relaxed whitespace-pre-line"
               {% if isPreview %}data-{{ targetScope }}-target="body"{% endif %}>{{ body|default('') }}</p>

            {% if isPreview or bullets %}
                {# En prévisualisation, les emplacements sont rendus vides et masqués :
                   le contrôleur n'a que du texte à écrire, jamais de balisage à
                   reconstruire — sans quoi la mise en forme des puces existerait en
                   deux exemplaires, ici et en JavaScript. #}
                {% set bulletSlots = isPreview ? range(1, previewBulletSlots|default(4)) : bullets %}
                <ul class="mt-4 flex flex-col gap-2 {{ bullets ? '' : 'hidden' }}"
                    {% if isPreview %}data-{{ targetScope }}-target="bullets"{% endif %}>
                    {% for bullet in bulletSlots %}
                        <li class="flex items-start gap-2.5 text-[13px] text-white/90 {{ isPreview ? 'hidden' : '' }}"
                            {% if isPreview %}data-{{ targetScope }}-target="bullet"{% endif %}>
                            {# Coche nue. Le jeu d'icônes est en duotone : « check » embarque
                               un cercle sur sa couche secondaire, qui enfermait le glyphe
                               dans une pastille. colorSecondary transparent l'efface —
                               plutôt que de le masquer en CSS par-dessus. #}
                            <span class="-mt-px shrink-0">
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: 'check', size: 'md',
                                    colorPrimary: '#ffffff', colorSecondary: 'transparent'
                                } only %}
                            </span>
                            <span {% if isPreview %}data-{{ targetScope }}-target="bulletText"{% endif %}>{{ isPreview ? '' : bullet }}</span>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}

            <div class="mt-auto pt-7 flex flex-col sm:flex-row sm:items-center gap-3">
                {% if isPreview or ctaLabel|default(null) %}
                    <a href="{{ ctaUrl|default('#') }}"
                       class="inline-flex items-center justify-center px-5 py-2.5 rounded-xl bg-white text-[#0d1b3e]
                              text-sm font-bold shadow-lg hover:shadow-xl hover:brightness-105 transition-all
                              {{ ctaLabel|default(null) ? '' : 'hidden' }}"
                       {% if isPreview %}data-{{ targetScope }}-target="cta"{% endif %}
                       {% for k, v in (ctaAttr ?? {}) %}{{ k }}="{{ v }}" {% endfor %}>{{ ctaLabel|default('') }}</a>
                {% endif %}

                <button type="button"
                        class="text-xs font-semibold text-white/60 hover:text-white/90 transition-colors sm:px-2"
                        {% for k, v in (closeAttr ?? {}) %}{{ k }}="{{ v }}" {% endfor %}>{{ closeLabel|default('Fermer') }}</button>
            </div>
        </div>

        {# ── Illustration ───────────────────────────────────────────────────── #}
        {% if isPreview or imagePath|default(null) %}
            {# L'illustration occupe tout le panneau, bord à bord : plus de carte
               flottante, de marge intérieure ni de hauteur plafonnée. En dessous de
               `md` le panneau devient un bandeau de hauteur fixe ; au-delà, il s'étire
               sur la hauteur du texte (comportement d'étirement du conteneur flex). #}
            {# min-height et non height : l'illustration étant en `absolute`, ce
               conteneur n'a aucun contenu en flux, et `flex-1` (donc flex-basis:0)
               écrase toute hauteur posée sur l'axe principal — en colonne il
               retombait à zéro. En `md`, l'axe bascule et min-h-0 rend la main à
               l'étirement du conteneur flex. #}
            <div class="order-1 md:order-2 relative flex-1 min-h-[180px] md:min-h-0 bg-slate-50 overflow-hidden
                        {{ imagePath|default(null) ? '' : 'hidden' }}"
                 {% if isPreview %}data-{{ targetScope }}-target="imageWrap"{% endif %}>
                <img src="{{ imagePath|default('') }}"
                     alt="{{ imageAlt|default('') }}"
                     class="absolute inset-0 w-full h-full object-cover"
                     {% if isPreview %}data-{{ targetScope }}-target="image"{% endif %}>
            </div>
        {% endif %}

    </div>
</div>

<style>
@keyframes announcementModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.announcement-modal-panel { animation: announcementModalIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .announcement-modal-panel { animation: none; }
}
</style>