{#
 # ============================================================================
 # ORGANISM: LANDING LMS PARTNERSHIP
 # ============================================================================
 #
 # 2-column layout showcasing the dotTilde LMS partnership.
 # Left: server dashboard mockup. Right: text + feature grid.
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre   | Type   | Defaut                              | Description                      |
 # |-------------|--------|-------------------------------------|----------------------------------|
 # | eyebrow     | string | 'PARTENARIAT DOTTILDE'              | Eyebrow text above title         |
 # | title       | string | 'Votre LMS <span...>installé...</span>' | H2 title (HTML allowed)     |
 # | subtitle    | string | 'En partenariat avec dotTilde...'   | Subtitle paragraph               |
 # | features    | array  | (default 4 features)                | [{icon, iconColor, iconBg, title, desc}] |
 # | class       | string | ''                                  | Additional CSS classes           |
 # | id          | string | 'lms'                               | HTML anchor id                   |
 #
 # ============================================================================
 #}

{% set eyebrow = eyebrow ?? 'PARTENARIAT DOTTILDE' %}
{% set title = title ?? 'Votre LMS <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">installé, hébergé et maintenu</span>' %}
{% set subtitle = subtitle ?? 'En partenariat avec dotTilde, Bubul propose un service complet d\'infrastructure LMS. De l\'installation à la maintenance, tout est géré pour vous sur des serveurs européens sécurisés.' %}
{% set id = id ?? 'lms' %}
{% set class = class ?? '' %}

{% set defaultFeatures = [
    { icon: 'server',  iconColor: 'primary', iconBgClass: 'bg-primary/10', title: 'Installation complète',  desc: 'LMS configuré et prêt à l\'emploi' },
    { icon: 'shield',  iconColor: 'success', iconBgClass: 'bg-success/10', title: 'Hébergement EU',        desc: 'Serveurs en France et Allemagne' },
    { icon: 'refresh', iconColor: 'warning', iconBgClass: 'bg-warning/10', title: 'Mises à jour auto',     desc: 'Patches de sécurité appliqués' },
    { icon: 'help',    iconColor: 'cohorts', iconBgClass: 'bg-cohorts/10', title: 'Support par dotTilde',   desc: 'Équipe technique dédiée' }
] %}
{% set features = features ?? defaultFeatures %}

<section class="py-28 lg:py-32 bg-[#FAFCFF] {{ class }}" id="{{ id }}">
    <div class="max-w-[1280px] mx-auto px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">

            {# ===== Left: Server Dashboard Mockup — order-2 sur mobile (texte passe en premier) ===== #}
            <div class="reveal order-2 lg:order-1">
                <div class="bg-white border border-[#E4EBF5] rounded-[20px] overflow-hidden shadow-[0_12px_40px_rgba(12,129,228,0.08),0_2px_8px_rgba(0,0,0,0.04)]">
                    {# Header with macOS dots + LIVE badge #}
                    <div class="flex items-center gap-3 px-[18px] py-[14px] bg-white border-b border-[#E4EBF5]">
                        <div class="flex items-center gap-1.5">
                            <span class="w-[10px] h-[10px] rounded-full inline-block" style="background:#FF5F57;"></span>
                            <span class="w-[10px] h-[10px] rounded-full inline-block" style="background:#FFBD2E;"></span>
                            <span class="w-[10px] h-[10px] rounded-full inline-block" style="background:#28CA41;"></span>
                        </div>
                        <span class="font-mono text-[12.5px] font-semibold text-[#5A6B7F]">bubul × dotTilde</span>
                        <span class="inline-flex items-center gap-[5px] ml-auto text-[9px] font-bold tracking-[0.5px] text-white bg-success rounded-full px-2 py-0.5">
                            <span class="w-[5px] h-[5px] rounded-full bg-white lms-live-dot"></span>
                            LIVE
                        </span>
                    </div>

                    <div class="p-5">
                        {# Status banner #}
                        <div class="flex items-center justify-between px-[14px] py-[10px] bg-[rgba(48,147,68,0.06)] border border-[rgba(48,147,68,0.15)] rounded-xl mb-[14px]">
                            <div class="flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-success relative flex-shrink-0 lms-pulse-dot"></span>
                                <span class="font-semibold text-[13px] text-[#1A2B3F]">Tous les systèmes opérationnels</span>
                            </div>
                            <div class="text-right">
                                <div class="font-secondary text-[16px] font-bold leading-none text-success">99.98%</div>
                                <div class="text-[8px] text-[#8A96A8] mt-0.5">uptime</div>
                            </div>
                        </div>

                        {# Uptime bars #}
                        <div class="mb-4">
                            <div class="flex justify-between mb-1.5">
                                <span class="text-[8px] text-[#8A96A8]">30 derniers jours</span>
                                <span class="text-[8px] text-success">100% ce mois</span>
                            </div>
                            <div class="flex items-end gap-0.5 h-5">
                                {% for i in 1..30 %}
                                    {% if i == 8 %}
                                        <div class="flex-1 min-w-0 bg-warning rounded-[1.5px] opacity-75" style="height: 10px;"></div>
                                    {% elseif i == 21 %}
                                        <div class="flex-1 min-w-0 bg-warning rounded-[1.5px] opacity-75" style="height: 11px;"></div>
                                    {% else %}
                                        {% set heights = [14, 16, 17, 15, 18, 16, 14, 17, 15, 16, 18, 14, 15, 17, 16, 14, 18, 15, 16, 17, 14, 15, 18, 16, 17, 15, 14, 16, 18, 15] %}
                                        <div class="flex-1 min-w-0 bg-success rounded-[1.5px] opacity-85" style="height: {{ heights[i - 1] }}px;"></div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>

                        {# KPI grid — 4 cards #}
                        <div class="grid grid-cols-4 gap-2.5 mb-4">
                            <div class="text-center px-3 py-2.5 bg-white rounded-[10px] border border-[#E4EBF5]">
                                <div class="flex items-center justify-center mx-auto mb-1.5 w-7 h-7 rounded-lg" style="background: rgba(12,129,228,0.1);">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'server', size: 'sm', color: 'primary' } only %}
                                </div>
                                <div class="font-secondary text-[18px] font-bold leading-[1.2] text-primary">LMS</div>
                                <div class="text-[10px] text-[#8A96A8] mt-0.5">Prêt</div>
                            </div>
                            <div class="text-center px-3 py-2.5 bg-white rounded-[10px] border border-[#E4EBF5]">
                                <div class="flex items-center justify-center mx-auto mb-1.5 w-7 h-7 rounded-lg" style="background: rgba(12,129,228,0.1);">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'bolt', size: 'sm', color: 'primary' } only %}
                                </div>
                                <div class="font-secondary text-[18px] font-bold leading-[1.2] text-primary">12ms</div>
                                <div class="text-[10px] text-[#8A96A8] mt-0.5">Latence</div>
                            </div>
                            <div class="text-center px-3 py-2.5 bg-white rounded-[10px] border border-[#E4EBF5]">
                                <div class="flex items-center justify-center mx-auto mb-1.5 w-7 h-7 rounded-lg" style="background: rgba(48,147,68,0.1);">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'lock', size: 'sm', color: 'success' } only %}
                                </div>
                                <div class="font-secondary text-[18px] font-bold leading-[1.2] text-success">SSL</div>
                                <div class="text-[10px] text-[#8A96A8] mt-0.5">Actif</div>
                            </div>
                            <div class="text-center px-3 py-2.5 bg-white rounded-[10px] border border-[#E4EBF5]">
                                <div class="flex items-center justify-center mx-auto mb-1.5 w-7 h-7 rounded-lg" style="background: rgba(48,147,68,0.1);">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'cloud', size: 'sm', color: 'success' } only %}
                                </div>
                                <div class="font-secondary text-[18px] font-bold leading-[1.2] text-success">Backup</div>
                                <div class="text-[10px] text-[#8A96A8] mt-0.5">Actif</div>
                            </div>
                        </div>

                        {# Server table #}
                        <div class="border border-[#E4EBF5] rounded-xl overflow-hidden">
                            <div class="grid grid-cols-[1.4fr_1fr_0.8fr_0.5fr] px-[14px] py-2 bg-[#F8FAFC] text-[10px] font-semibold text-[#8A96A8] uppercase tracking-[0.5px]">
                                <span>Nœud</span>
                                <span>Région</span>
                                <span>Statut</span>
                                <span>Ping</span>
                            </div>
                            <div class="grid grid-cols-[1.4fr_1fr_0.8fr_0.5fr] px-[14px] py-2.5 border-t border-[#E4EBF5] items-center">
                                <div class="flex items-center gap-2">
                                    <span>&#127465;&#127466;</span>
                                    <span class="font-mono text-xs font-medium text-[#1A2B3F]">lms-backup-01</span>
                                </div>
                                <span class="text-xs text-[#5A6B7F]">Frankfurt, DE</span>
                                <span class="inline-flex items-center gap-1 text-[11px] font-medium text-success">
                                    <span class="w-1.5 h-1.5 rounded-full bg-success relative lms-status-badge-dot"></span>
                                    Actif
                                </span>
                                <span class="text-xs font-bold text-success">14ms</span>
                            </div>
                            <div class="grid grid-cols-[1.4fr_1fr_0.8fr_0.5fr] px-[14px] py-2.5 border-t border-[#E4EBF5] items-center">
                                <div class="flex items-center gap-2">
                                    <span>&#127467;&#127479;</span>
                                    <span class="font-mono text-xs font-medium text-[#1A2B3F]">lms-prod-01</span>
                                </div>
                                <span class="text-xs text-[#5A6B7F]">Paris, FR</span>
                                <span class="inline-flex items-center gap-1 text-[11px] font-medium text-success">
                                    <span class="w-1.5 h-1.5 rounded-full bg-success relative lms-status-badge-dot"></span>
                                    Actif
                                </span>
                                <span class="text-xs font-bold text-success">8ms</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# ===== Right: Text ===== #}
            <div class="reveal reveal-delay-2 order-1 lg:order-2">
                <p class="font-secondary text-xs font-bold tracking-[3px] text-primary mb-4 uppercase">{{ eyebrow }}</p>
                <h2 class="font-display text-3xl md:text-4xl font-bold mb-6 text-[#1A2B3F]">
                    {{ title|raw }}
                </h2>
                <p class="text-lg leading-relaxed mb-10 text-[#5A6B7F]">
                    {{ subtitle }}
                </p>

                {# Feature grid 2x2 #}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    {% for feature in features %}
                        <div class="flex items-start gap-3">
                            <span class="w-10 h-10 rounded-xl {{ feature.iconBgClass ?? 'bg-primary/10' }} flex items-center justify-center flex-shrink-0">
                                {% include '_atoms/icon/icon.html.twig' with { name: feature.icon, size: 'md', color: feature.iconColor ?? 'primary' } only %}
                            </span>
                            <div>
                                <div class="font-semibold text-sm text-[#1A2B3F]">{{ feature.title }}</div>
                                <div class="text-xs text-[#5A6B7F]">{{ feature.desc }}</div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>