{#
 # ============================================================================
 # ORGANISM: LANDING SCREENSHOTS
 # ============================================================================
 #
 # Section showcase des 6 outils Bubul avec tabs interactifs en CSS pur
 # (radio buttons, aucun JavaScript). Chaque tab affiche une description
 # avec features et un placeholder pour le screenshot correspondant.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig (icones Solar dans tabs, features check-circle)
 #
 # ============================================================================
 # PARAMETERS
 # ============================================================================
 #
 # | Parameter | Type   | Default                              | Description                 |
 # |-----------|--------|--------------------------------------|-----------------------------|
 # | surtitle  | string | 'NOS OUTILS'                         | Eyebrow text                |
 # | title     | string | '6 outils pédagogiques,...'           | H2 title                    |
 # | tools     | array  | (default 6 tools)                    | [{id, name, icon, color, tagline, description, features, screenshot_note, activeClasses, placeholderBg}] |
 # | class     | string | ''                                   | Additional CSS classes      |
 # | id        | string | 'screenshots'                        | HTML anchor id              |
 #
 # ============================================================================
 # USAGE EXAMPLES
 # ============================================================================
 #
 # {% include '_organisms/landing/screenshots.html.twig' only %}
 #
 # ============================================================================
 #}

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

{% set surtitle = surtitle ?? 'NOS OUTILS' %}
{% set title = title ?? '6 outils pédagogiques, une seule plateforme' %}
{% set id = id ?? 'screenshots' %}
{% set class = class ?? '' %}

{# ============================================================================
   TOOLS DATA
   ============================================================================ #}

{% set defaultTools = [
    {
        id: 'moodia',
        name: 'Moodia',
        icon: 'widget-add',
        color: 'primary',
        tagline: 'Cours LMS complet au format .mbz',
        description: 'Décrivez votre cours ou déposez votre PDF. Moodia génère automatiquement pages, podcasts et quiz au format .mbz prêt à importer dans Moodle. Votre cours est entièrement modifiable avant export.',
        features: ['Cours complet avec pages texte-image', 'Quiz générés automatiquement', 'Podcast pédagogique intégré', 'Export .mbz natif Moodle'],
        screenshot_note: 'Screenshot : interface de génération Moodia (wizard étapes)',
        activeClasses: 'bg-primary/10 text-primary border-primary',
        placeholderBg: 'bg-primary/5 border-primary/20'
    },
    {
        id: 'slidia',
        name: 'Slidia',
        icon: 'presentation-graph',
        color: 'pink',
        tagline: 'Diaporamas aux couleurs de votre établissement',
        description: 'Générez des présentations respectant réellement les formats PowerPoint et OpenOffice. Slidia s\'adapte à vos masques d\'établissement pour un rendu professionnel immédiat.',
        features: ['Format PowerPoint et OpenOffice natif', 'Masques d\'établissement personnalisés', 'Adaptation rapide au contexte', 'Prêt à projeter en quelques secondes'],
        screenshot_note: 'Screenshot : interface Slidia avec aperçu de présentation',
        activeClasses: 'bg-pink/10 text-pink border-pink',
        placeholderBg: 'bg-pink/5 border-pink/20'
    },
    {
        id: 'serenia',
        name: 'Serenia',
        icon: 'chat',
        color: 'cohorts',
        tagline: 'Le LLM sécurisé orienté pédagogie',
        description: 'Serenia, c\'est la puissance d\'un LLM avec la rigueur d\'un pédagogue. Vos données restent confidentielles, et chaque réponse est pensée pour favoriser l\'apprentissage.',
        features: ['Sécurité totale des données', 'Orientation pédagogique des réponses', 'Upload et analyse de fichiers', 'Suivi de votre empreinte écologique'],
        screenshot_note: 'Screenshot : interface chat Serenia',
        activeClasses: 'bg-cohorts/10 text-cohorts border-cohorts',
        placeholderBg: 'bg-cohorts/5 border-cohorts/20'
    },
    {
        id: 'monalisia',
        name: 'Monalisia',
        icon: 'monalisia',
        color: 'warning',
        tagline: 'Infographies aux couleurs de votre établissement',
        description: 'Transformez n\'importe quel texte ou support de cours en infographie percutante. Monalisia respecte votre charte graphique pour un rendu immédiatement professionnel.',
        features: ['À partir de texte ou PDF', 'Aux couleurs de votre établissement', 'Export haute résolution', 'Synthèse visuelle automatique'],
        screenshot_note: 'Screenshot : interface Monalisia avec aperçu infographie',
        activeClasses: 'bg-warning/10 text-warning border-warning',
        placeholderBg: 'bg-warning/5 border-warning/20'
    },
    {
        id: 'castia',
        name: 'Castia',
        icon: 'microphone',
        color: 'success',
        tagline: 'Podcasts pédagogiques en 2 coups de cuillère à pot',
        description: 'Générez vos podcasts pédagogiques à partir d\'un simple texte. Voix naturelles, mise en forme automatique — vos apprenants découvrent une nouvelle façon d\'apprendre.',
        features: ['Voix naturelles IA', 'À partir de n\'importe quel texte', 'Format audio professionnel', 'Multi-langues supporté'],
        screenshot_note: 'Screenshot : interface Castia avec lecteur audio',
        activeClasses: 'bg-success/10 text-success border-success',
        placeholderBg: 'bg-success/5 border-success/20'
    },
    {
        id: 'sam',
        name: 'SAM',
        icon: 'user-id',
        color: 'info',
        tagline: 'Dashboard de suivi pour admins LMS',
        description: 'SAM connecte votre LMS via l\'API et vous offre un dashboard graphique complet. Suivez la progression de vos apprenants, gérez vos cohortes et pilotez vos inscriptions depuis Bubul.',
        features: ['Dashboard graphique de progression', 'Gestion des cohortes et inscriptions', 'Connexion API LMS native', 'Suivi centralisé multi-instances'],
        screenshot_note: 'Screenshot : interface SAM tableau de bord',
        activeClasses: 'bg-info/10 text-info border-info',
        placeholderBg: 'bg-info/5 border-info/20'
    }
] %}

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

{% set tools = tools ?? defaultTools %}

<section class="py-28 lg:py-40 bg-gray-50/50 {{ class }}" id="{{ id }}">
    <div class="max-w-[1280px] mx-auto px-6 lg:px-8">

        {# ===== Header ===== #}
        <div class="text-center mb-20">
            <p class="font-secondary text-xs font-bold tracking-[3px] text-primary mb-4 uppercase">
                {{ surtitle }}
            </p>
            <h2 class="font-secondary text-3xl md:text-4xl lg:text-[2.5rem] font-bold text-gray-900">
                {{ title }}
            </h2>
        </div>

        {# ===== Tab System (CSS-only with radio buttons) ===== #}
        <div class="screenshots-tabs">

            {# Hidden radio inputs #}
            {% for tool in tools %}
                <input type="radio" name="tool-tab" id="tab-{{ tool.id }}" class="hidden"{{ loop.first ? ' checked' : '' }}>
            {% endfor %}

            {# Tab labels #}
            <div class="flex flex-wrap justify-center gap-2 mb-10">
                {% for tool in tools %}
                    <label for="tab-{{ tool.id }}"
                           class="screenshots-tab inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border-2 border-transparent
                                  text-sm font-secondary font-semibold cursor-pointer
                                  text-gray-500 hover:text-gray-700 hover:bg-gray-100
                                  transition-all duration-base">
                        {% include '_atoms/icon/icon.html.twig' with { name: tool.icon, size: 'sm', color: tool.color } only %}
                        <span>{{ tool.name }}</span>
                    </label>
                {% endfor %}
            </div>

            {# Tab panels #}
            {% for tool in tools %}
                <div class="screenshots-panel hidden" id="panel-{{ tool.id }}">
                    <div class="flex flex-col lg:flex-row gap-10 items-center">

                        {# Left: Description + Features #}
                        <div class="lg:w-5/12">
                            <div class="flex items-center gap-3 mb-4">
                                {% include '_atoms/icon/icon.html.twig' with { name: tool.icon, size: 'xl', color: tool.color } only %}
                                <div>
                                    <h3 class="font-secondary text-2xl font-bold text-gray-900">{{ tool.name }}</h3>
                                    <p class="text-sm text-gray-500 font-medium">{{ tool.tagline }}</p>
                                </div>
                            </div>

                            <p class="text-gray-600 leading-relaxed mb-6">
                                {{ tool.description }}
                            </p>

                            <ul class="space-y-3">
                                {% for feature in tool.features %}
                                    <li class="flex items-start gap-3">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'check-circle', size: 'md', color: tool.color } only %}
                                        <span class="text-gray-700 text-sm font-medium">{{ feature }}</span>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>

                        {# Right: Screenshot placeholder #}
                        <div class="lg:w-7/12">
                            <div class="aspect-[16/9] rounded-2xl border-2 {{ tool.placeholderBg }} flex items-center justify-center shadow-sm">
                                <div class="text-center p-8">
                                    {% include '_atoms/icon/icon.html.twig' with { name: tool.icon, size: '5xl', color: tool.color } only %}
                                    <p class="text-gray-400 text-sm mt-4 font-medium">{{ tool.screenshot_note }}</p>
                                </div>
                            </div>
                        </div>

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

        </div>

    </div>
</section>

{# ============================================================================
   CSS-ONLY TAB LOGIC (radio :checked selectors)
   ============================================================================
   The radio inputs and tab bar / panels are all direct children of
   .screenshots-tabs, so the general sibling combinator (~) works.
   We use :has() as a fallback for broader browser support.
   ============================================================================ #}

<style>
    /* Hide all panels by default */
    .screenshots-panel { display: none; }

    /* --- Moodia (primary: #0C81E4) --- */
    .screenshots-tabs:has(#tab-moodia:checked) label[for="tab-moodia"] {
        background-color: rgb(12 129 228 / 0.1);
        color: var(--color-primary);
        border-color: var(--color-primary);
    }
    .screenshots-tabs:has(#tab-moodia:checked) #panel-moodia { display: block; }

    /* --- Slidia (pink: #EC4899) --- */
    .screenshots-tabs:has(#tab-slidia:checked) label[for="tab-slidia"] {
        background-color: rgb(236 72 153 / 0.1);
        color: var(--color-pink);
        border-color: var(--color-pink);
    }
    .screenshots-tabs:has(#tab-slidia:checked) #panel-slidia { display: block; }

    /* --- Serenia (cohorts: #8b5cf6) --- */
    .screenshots-tabs:has(#tab-serenia:checked) label[for="tab-serenia"] {
        background-color: rgb(139 92 246 / 0.1);
        color: var(--color-cohorts);
        border-color: var(--color-cohorts);
    }
    .screenshots-tabs:has(#tab-serenia:checked) #panel-serenia { display: block; }

    /* --- Monalisia (warning: #F59E0B) --- */
    .screenshots-tabs:has(#tab-monalisia:checked) label[for="tab-monalisia"] {
        background-color: rgb(245 158 11 / 0.1);
        color: var(--color-warning);
        border-color: var(--color-warning);
    }
    .screenshots-tabs:has(#tab-monalisia:checked) #panel-monalisia { display: block; }

    /* --- Castia (success: #309344) --- */
    .screenshots-tabs:has(#tab-castia:checked) label[for="tab-castia"] {
        background-color: rgb(48 147 68 / 0.1);
        color: var(--color-success);
        border-color: var(--color-success);
    }
    .screenshots-tabs:has(#tab-castia:checked) #panel-castia { display: block; }

    /* --- SAM (info: #0EA5E9) --- */
    .screenshots-tabs:has(#tab-sam:checked) label[for="tab-sam"] {
        background-color: rgb(14 165 233 / 0.1);
        color: var(--color-info);
        border-color: var(--color-info);
    }
    .screenshots-tabs:has(#tab-sam:checked) #panel-sam { display: block; }
</style>