{#
 # ============================================================================
 # ORGANISM: LANDING PILLARS
 # ============================================================================
 #
 # Section présentant les 3 piliers de Bubul : Infrastructure LMS,
 # Création de contenus IA, et Gestion & Pilotage.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMETERS
 # ============================================================================
 #
 # | Parameter  | Type   | Default                              | Description             |
 # |------------|--------|--------------------------------------|-------------------------|
 # | surtitle   | string | 'CE QUE NOUS FAISONS POUR VOUS'      | Eyebrow text            |
 # | title      | string | 'Une solution complète,...'           | H2 title (HTML allowed) |
 # | subtitle   | string | 'Bubul prend en charge...'           | Subtitle paragraph      |
 # | pillars    | array  | (default 3 pillars)                  | [{icon, title, description, points, badge, gradient, gradientStart, accentColor, number, badgeBg, screenshot}] |
 # | pills      | array  | (default 3 pills)                    | [{label, bgClass}]      |
 # | class      | string | ''                                   | Additional CSS classes  |
 # | id         | string | 'pillars'                            | HTML anchor id          |
 #
 # ============================================================================
 # USAGE EXAMPLES
 # ============================================================================
 #
 # {% include '_organisms/landing/pillars.html.twig' only %}
 #
 # ============================================================================
 #}

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

{% set surtitle = surtitle ?? 'CE QUE NOUS FAISONS POUR VOUS' %}
{% set title = title ?? 'Une solution complète,<br>de l\'infrastructure aux contenus' %}
{% set subtitle = subtitle ?? 'Bubul prend en charge chaque étape de votre déploiement e-learning. Du LMS à la création de contenus, on s\'occupe de tout.' %}
{% set id = id ?? 'pillars' %}
{% set class = class ?? '' %}

{% set defaultPills = [
    { label: 'Infrastructure LMS', bgClass: 'bg-primary/8 text-primary' },
    { label: '6 Outils pédagogiques', bgClass: 'bg-cohorts/8 text-cohorts' },
    { label: 'Pilotage apprenants', bgClass: 'bg-info/8 text-info' }
] %}
{% set pills = pills ?? defaultPills %}

{# ============================================================================
   PILLARS DATA
   ============================================================================ #}

{% set defaultPillars = [
    {
        icon: 'server',
        title: 'On monte votre LMS',
        description: 'De l\'installation à la configuration, on prend en charge le déploiement technique de votre LMS. Votre plateforme e-learning est opérationnelle sans effort de votre côté.',
        points: [
            'Installation et configuration LMS',
            'Hébergement et maintenance inclus',
            'Opérationnel rapidement',
            'Support technique dédié'
        ],
        badge: 'Infrastructure',
        gradient: 'linear-gradient(135deg, #0C81E4 0%, #42A5F5 100%)',
        gradientStart: '#0C81E4',
        accentColor: 'primary',
        number: '01',
        badgeBg: 'bg-primary/8 text-primary',
        screenshot: '/img/landing/moodle.png'
    },
    {
        icon: 'magic-stick',
        title: 'Créez vos contenus pédagogiques en quelques minutes',
        description: 'Moodia, Slidia, Castia, Monalisia, Serenia — créez des cours complets, présentations, podcasts et infographies en quelques minutes. L\'IA pense pédagogie à votre place.',
        points: [
            'Cours LMS complets au format MBZ',
            'Diaporamas PowerPoint/OpenOffice',
            'Podcasts pédagogiques',
            'Infographies aux couleurs de votre établissement'
        ],
        badge: 'Création',
        gradient: 'linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%)',
        gradientStart: '#7C3AED',
        accentColor: 'cohorts',
        number: '02',
        badgeBg: 'bg-cohorts/8 text-cohorts',
        screenshot: '/img/landing/tools.png'
    },
    {
        icon: 'users-group',
        title: 'SAM pilote vos apprenants',
        description: 'SAM connecte votre LMS via l\'API et vous offre un dashboard graphique complet pour suivre la progression de vos apprenants et gérer vos cohortes.',
        points: [
            'Dashboard graphique de suivi',
            'Gestion des cohortes et inscriptions',
            'Synchronisation via API LMS',
            'Suivi de progression en temps réel'
        ],
        badge: 'Pilotage',
        gradient: 'linear-gradient(135deg, #0891B2 0%, #22D3EE 100%)',
        gradientStart: '#0891B2',
        accentColor: 'info',
        number: '03',
        badgeBg: 'bg-info/8 text-info',
        screenshot: '/img/landing/SAM.png'
    }
] %}

{% set pillars = pillars ?? defaultPillars %}

{# ============================================================================
   ACCENT COLOR CLASSES (keyed by accentColor for dynamic lookup)
   ============================================================================ #}

{% set accentTextClasses = {
    'primary': 'text-primary',
    'cohorts': 'text-cohorts',
    'info': 'text-info'
} %}

{% set accentCheckColors = {
    'primary': 'primary',
    'cohorts': 'cohorts',
    'info': 'info'
} %}

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

<section class="relative overflow-hidden py-28 lg:py-40 bg-white {{ class }}" id="{{ id }}">

    {# ===== Top gradient fade (from hero) ===== #}
    <div class="absolute inset-x-0 top-0 h-24 pointer-events-none" style="background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);"></div>

    {# ===== Bottom gradient fade (to how-it-works) ===== #}
    <div class="absolute inset-x-0 bottom-0 h-24 pointer-events-none" style="background: linear-gradient(to top, rgba(249,250,251,0.7), transparent);"></div>

    <div class="relative max-w-[1400px] mx-auto px-6 lg:px-12">

        {# ===== Header ===== #}
        <div class="text-center mb-16">
            <p class="font-secondary text-xs font-bold tracking-[3px] text-primary mb-5 uppercase">
                {{ surtitle }}
            </p>
            <h2 class="font-secondary text-3xl md:text-4xl lg:text-[2.5rem] font-bold text-gray-900 mb-5 max-w-[900px] mx-auto">
                {{ title|raw }}
            </h2>
            <p class="text-gray-500 text-lg max-w-[600px] mx-auto leading-relaxed">
                {{ subtitle }}
            </p>

            {# ===== Pillar pills ===== #}
            {% if pills|length > 0 %}
                <div class="inline-flex gap-3 mt-8 flex-wrap justify-center">
                    {% for pill in pills %}
                        <span class="{{ pill.bgClass }} rounded-full px-4 py-1.5 text-sm font-medium">{{ pill.label }}</span>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        {# ===== Pillars ===== #}
        <div class="flex flex-col gap-24 lg:gap-32">
        {% for pillar in pillars %}

            <div class="flex flex-col lg:flex-row {{ loop.index is even ? 'lg:flex-row-reverse' : '' }} items-center gap-12 lg:gap-16">

                {# ===== Screenshot — 58% de la largeur ===== #}
                <div class="w-full lg:w-[58%] shrink-0">
                    <div class="rounded-2xl overflow-hidden border border-gray-100" style="box-shadow: 0 20px 60px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);">
                        {# Browser bar colorée #}
                        <div class="flex items-center gap-1.5 px-4 border-b border-black/5" style="background: {{ pillar.gradient }}; height: 36px;">
                            <div class="w-3 h-3 rounded-full bg-white/40"></div>
                            <div class="w-3 h-3 rounded-full bg-white/40"></div>
                            <div class="w-3 h-3 rounded-full bg-white/40"></div>
                        </div>
                        {# Screenshot pleine largeur, taille naturelle #}
                        <img src="{{ pillar.screenshot }}" alt="{{ pillar.title }}"
                             class="w-full block">
                    </div>
                </div>

                {# ===== Texte — 42% ===== #}
                <div class="w-full lg:w-[42%] flex flex-col gap-5">

                    <span class="inline-flex px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider w-fit {{ pillar.badgeBg }}">
                        {{ pillar.badge }}
                    </span>

                    <h3 class="font-secondary text-2xl lg:text-3xl font-bold text-gray-900 leading-tight">
                        {{ pillar.title }}
                    </h3>

                    <p class="text-gray-500 text-base lg:text-lg leading-relaxed">
                        {{ pillar.description }}
                    </p>

                    <ul class="flex flex-col gap-3 mt-2">
                        {% for point in pillar.points %}
                            <li class="flex items-center gap-3">
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: 'check-circle',
                                    size: 'md',
                                    color: accentCheckColors[pillar.accentColor] ?? 'primary'
                                } only %}
                                <span class="text-gray-700 font-medium text-sm lg:text-base">{{ point }}</span>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

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

    </div>
</section>