{#
 # ============================================================================
 # ORGANISM: LANDING TOOLS — STICKER BOARD
 # ============================================================================
 #
 # Planche de stickers scatter : placement absolu, rotation initiale par outil,
 # animation de chute à l'entrée (staggered), hover qui redresse + soulève
 # + déploie le bouton "Lancer [Outil]" via max-height reveal.
 #
 # Couleurs : fond pastel = rgba(col_db, 0.26) ; encre = col_db (badge, bouton, icône).
 # Responsive < 960px : colonne centrée, bouton toujours visible.
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre | Type   | Defaut                               | Description              |
 # |-----------|--------|--------------------------------------|--------------------------|
 # | eyebrow   | string | 'LA PLANCHE D\'OUTILS'               | Pill eyebrow             |
 # | title     | string | 'Une boîte à outils <em>...</em>'    | Titre (HTML autorisé)    |
 # | tools     | array  | (9 outils par défaut)                | Liste d'objets tool      |
 # | class     | string | ''                                   | Classes additionnelles   |
 #
 # ============================================================================
 #}

{# ============================================================================
   DEFAULT VALUES
   ============================================================================ #}

{% set class   = class   ?? '' %}
{% set eyebrow = eyebrow ?? 'NOS OUTILS' %}
{% set title   = title   ?? 'Un outil dédié <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">pour chaque besoin</span>' %}
{% set tools = tools ?? [
    { code: 'moodia',    description: 'Transformez un PDF en cours LMS complet avec sections, activités, quiz et podcasts. Export natif .mbz.',            badge: '.MBZ',      iconName: 'bubul-moodia' },
    { code: 'scormia',   description: 'Créez des modules e-learning interactifs (quiz notés, flashcards, exercices) depuis un PDF ou un sujet. Export SCORM pour Moodle et tous les LMS.', badge: 'SCORM', iconName: 'bubul-scormia', beta: true },
    { code: 'slidia',    description: 'Générez des présentations professionnelles aux couleurs de votre charte graphique en quelques secondes.',            badge: '.PPTX',     iconName: 'bubul-slidia' },
    { code: 'serenia',   description: 'Assistant IA confidentiel avec upload de fichiers. Vos données restent privées.',                                    badge: 'Chat IA',   iconName: 'bubul-serenia' },
    { code: 'monalisia', description: 'Créez des infographies percutantes aux couleurs de votre charte, depuis un texte ou un PDF.',                        badge: '.PNG',      iconName: 'bubul-monalisia' },
    { code: 'castia',    description: 'Produisez des podcasts pédagogiques avec des voix naturelles. Idéal pour enrichir vos parcours.',                   badge: '.MP3',      iconName: 'bubul-castia' },
    { code: 'pixia',     description: 'Générez des images pédagogiques IA à partir d\'un texte ou d\'un PDF. Intégration directe dans Moodia.',             badge: '.PNG',      iconName: 'bubul-pixia',    isNew: true },
    { code: 'promptly',  description: 'Bibliothèque de prompts IA partagés et personnels. Recherche instantanée et lancement direct sur Serenia.',          badge: 'Prompts',   iconName: 'bubul-promptly', isNew: true },
    { code: 'sam',       description: 'Suivez la progression de vos apprenants en temps réel. KPIs, alertes et synchronisation automatique avec Moodle.',   badge: 'Dashboard', iconName: 'bubul-sam' }
] %}

{# ============================================================================
   COULEURS DYNAMIQUES depuis la DB
   ============================================================================ #}
{% set colMoodia    = tool_color_details['moodia'].primary    ?? '#0C81E4' %}
{% set colSlidia    = tool_color_details['slidia'].primary    ?? '#E91E8C' %}
{% set colSerenia   = tool_color_details['serenia'].primary   ?? '#7C3AED' %}
{% set colMonalisia = tool_color_details['monalisia'].primary ?? '#EC4899' %}
{% set colCastia    = tool_color_details['castia'].primary    ?? '#309344' %}
{% set colSam       = tool_color_details['sam'].primary       ?? '#06B6D4' %}
{% set colPromptly  = tool_color_details['promptly'].primary  ?? '#F97316' %}
{% set colPixia     = tool_color_details['pixia'].primary     ?? '#6366F1' %}
{% set colScormia   = tool_color_details['scormia'].primary   ?? '#1E40AF' %}

{% set colorMap = {
    'moodia':    colMoodia,
    'scormia':   colScormia,
    'slidia':    colSlidia,
    'serenia':   colSerenia,
    'monalisia': colMonalisia,
    'castia':    colCastia,
    'sam':       colSam,
    'promptly':  colPromptly,
    'pixia':     colPixia
} %}

{# ============================================================================
   LAYOUT — positions absolues + tilts + delays d'animation
   ============================================================================ #}
{# Grille 3×3 : colonnes alignées (9% / 39% / 69%), 3 rangées (0% / 33% / 66%),
   largeur uniforme + légers tilts pour conserver l'esprit « sticker ». #}
{% set slotMap = {
    'moodia':    { left:  '9%', top:  '0%', width: '252px', tilt: '-4',   delay: '80ms'  },
    'scormia':   { left: '39%', top:  '0%', width: '252px', tilt: '3',    delay: '160ms' },
    'slidia':    { left: '69%', top:  '0%', width: '252px', tilt: '-2.5', delay: '240ms' },
    'serenia':   { left:  '9%', top: '33%', width: '252px', tilt: '2.5',  delay: '320ms' },
    'monalisia': { left: '39%', top: '33%', width: '252px', tilt: '-3.5', delay: '400ms' },
    'castia':    { left: '69%', top: '33%', width: '252px', tilt: '2',    delay: '480ms' },
    'pixia':     { left:  '9%', top: '66%', width: '252px', tilt: '-2',   delay: '560ms' },
    'promptly':  { left: '39%', top: '66%', width: '252px', tilt: '4',    delay: '640ms' },
    'sam':       { left: '69%', top: '66%', width: '252px', tilt: '-3',   delay: '720ms' }
} %}

{# ============================================================================
   HTML OUTPUT
   ============================================================================ #}

<style>
/* === Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=JetBrains+Mono:wght@400&display=swap');

/* === Bezier curves === */
.sb-wrap {
    --spring:   cubic-bezier(0.34, 1.56, 0.5, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}


/* === Title === */
.sb-title {
    margin-top: 26px;
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #14152B;
}

/* === Board === */
.sb-board {
    position: relative;
    height: 900px;
    margin-top: 64px;
}

/* === Slot — zone de hover stable, padding bas couvre le bouton déployé === */
.sb-slot {
    position: absolute;
    padding: 14px 14px 80px 14px;
}
.sb-slot:hover { z-index: 30; }

/* === Sticker === */
.sb-sticker {
    position: relative;
    display: block;
    border-radius: 22px;
    padding: 20px 22px 22px;
    transform: rotate(var(--tilt, 0deg));
    transition:
        transform  480ms var(--spring),
        box-shadow 380ms var(--ease-out);
    cursor: pointer;
    user-select: none;
    will-change: transform;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 10px 22px -10px rgba(20, 20, 40, 0.18),
        0 2px 5px -1px rgba(20, 20, 40, 0.08);
    animation: sb-drop 700ms var(--ease-out) backwards;
    animation-delay: var(--delay, 0ms);
}
.sb-slot:hover .sb-sticker {
    transform: rotate(0deg) translateY(-12px) scale(1.04);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 30px 50px -16px rgba(20, 20, 40, 0.28),
        0 8px 16px -5px rgba(20, 20, 40, 0.12);
}

/* === Entrance animation === */
@keyframes sb-drop {
    0%   { opacity: 0; transform: translateY(-28px) rotate(0deg) scale(0.94); }
    100% { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}

/* === Head === */
.sb-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

/* === Icon pill === */
.sb-icon-pill {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 380ms var(--spring);
    flex-shrink: 0;
}
.sb-icon-pill svg,
.sb-icon-pill img {
    width: 19px !important;
    height: 19px !important;
}
.sb-slot:hover .sb-icon-pill { transform: rotate(-6deg) scale(1.06); }

/* === Badge === */
.sb-badge {
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 6px 11px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
    transition: transform 380ms var(--spring);
}
.sb-slot:hover .sb-badge { transform: rotate(4deg) scale(1.06); }

/* === Groupe badges (format + statut BETA) === */
.sb-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sb-beta {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform 380ms var(--spring);
}
.sb-slot:hover .sb-beta { transform: rotate(4deg) scale(1.06); }

/* === Tool name === */
.sb-name {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: #14152B;
}

/* === Description === */
.sb-desc {
    font-size: 13.5px;
    line-height: 1.4;
    color: #4C4F66;
}

/* === Launch button — max-height reveal === */
.sb-launch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;

    /* État replié */
    max-height: 0;
    margin-top: 0;
    padding: 0 16px;
    opacity: 0;
    transform: translateY(8px);

    transition:
        max-height  380ms var(--ease-out),
        margin-top  380ms var(--ease-out),
        padding     380ms var(--ease-out),
        opacity     240ms var(--ease-out),
        transform   380ms var(--spring),
        filter      200ms ease;
}
.sb-launch svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
    transition: transform 280ms var(--spring);
}

/* État déployé */
.sb-slot:hover .sb-launch {
    max-height: 50px;
    margin-top: 16px;
    padding: 11px 16px;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
}
.sb-launch:hover { filter: brightness(0.88); }
.sb-launch:hover svg { transform: translateX(3px); }

/* === Hint === */
.sb-hint {
    text-align: center;
    margin-top: 24px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: #8A8775;
    letter-spacing: 0.02em;
}

/* === Responsive < 960px === */
@media (max-width: 960px) {
    .sb-board {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        margin-top: 36px;
    }
    .sb-slot {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: min(360px, 92%) !important;
        padding: 0;
    }
    /* Bouton toujours visible sur mobile */
    .sb-launch {
        max-height: 50px;
        margin-top: 16px;
        padding: 11px 16px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Tactile (touch) : bouton toujours visible === */
@media (hover: none) {
    .sb-slot:hover .sb-sticker { transform: rotate(var(--tilt, 0deg)); }
    .sb-slot:hover .sb-icon-pill,
    .sb-slot:hover .sb-badge { transform: none; }
    .sb-launch {
        max-height: 50px;
        margin-top: 16px;
        padding: 11px 16px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Accessibilité : pas d'animation === */
@media (prefers-reduced-motion: reduce) {
    .sb-sticker { animation: none; transform: rotate(var(--tilt, 0deg)); }
    .sb-sticker, .sb-icon-pill, .sb-badge, .sb-launch { transition: none; }
}
</style>

<section class="section {{ class }}" id="outils" style="background: #FFFFFF; padding: 72px 0 60px;">
    <div class="sb-wrap max-w-[1280px] mx-auto px-6 lg:px-8">

        {# ===== Header ===== #}
        <header style="text-align: center; margin-bottom: 0;">
            <p class="font-secondary text-xs font-bold tracking-[3px] text-primary mb-4 uppercase">{{ eyebrow }}</p>
            <h2 class="sb-title">{{ title|raw }}</h2>
        </header>

        {# ===== Sticker Board ===== #}
        <div class="sb-board">

            {% for tool in tools %}
                {% set col  = colorMap[tool.code] ?? '#0C81E4' %}
                {% set rgb  = col|hex_to_rgb %}
                {% set displayName   = tool_details[tool.code].name ?? tool.name ?? tool.code %}
                {% set displayDesc   = tool_details[tool.code].description ?? tool.description %}
                {% set slot = slotMap[tool.code] ?? { left: '0', top: '0', width: '248px', tilt: '0', delay: '0ms' } %}

                <div class="sb-slot"
                     style="left: {{ slot.left }}; top: {{ slot.top }}; width: {{ slot.width }};">

                    <article class="sb-sticker"
                             style="--tilt: {{ slot.tilt }}deg; --delay: {{ slot.delay }}; background: rgba({{ rgb }}, 0.26);">

                        {# --- Head : icon pill + badge --- #}
                        <div class="sb-head">
                            <span class="sb-icon-pill">
                                {% include '_atoms/icon/icon.html.twig' with { name: tool.iconName, size: 'sm', colorPrimary: col, colorSecondary: col } only %}
                            </span>
                            <div class="sb-badges">
                                {% if tool.beta ?? false %}
                                    <span class="sb-beta" style="color: {{ col }}; background: rgba({{ rgb }}, 0.16);">BETA</span>
                                {% endif %}
                                <span class="sb-badge" style="color: {{ col }};">{{ tool.badge }}</span>
                            </div>
                        </div>

                        {# --- Nom + description --- #}
                        <h3 class="sb-name">{{ displayName }}</h3>
                        <p class="sb-desc">{{ displayDesc }}</p>

                        {# --- Bouton (révélé au hover) --- #}
                        <a href="{{ path('app_landing_' ~ tool.code) }}"
                           class="sb-launch"
                           style="background: {{ col }};">
                            Lancer {{ displayName }}
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M5 12h14M13 5l7 7-7 7"/>
                            </svg>
                        </a>

                    </article>
                </div>
            {% endfor %}

        </div>

        {# ===== Hint ===== #}
        <p class="sb-hint">survolez un sticker pour le décoller</p>

    </div>
</section>