{% extends 'base.landing.html.twig' %}

{% block title %}Bubul — L'IA au service de votre pédagogie | Créez, déployez, pilotez vos formations{% endblock %}

{% block meta_description %}Bubul centralise 9 outils IA pédagogiques : Moodia, Scormia, Slidia, Castia, Monalisia, Serenia, Pixia, Promptly et SAM. Créez des cours LMS, modules SCORM, diaporamas, podcasts, infographies et images IA. Pensé par des pédagogues pour les formateurs.{% endblock %}

{% block meta_keywords %}Bubul, Moodia, Scormia, Slidia, Castia, Monalisia, Serenia, SAM, Pixia, Promptly, IA pédagogique, cours LMS IA, éditeur SCORM, formateurs, enseignants, diaporama IA, podcast pédagogique, infographie IA, image IA{% endblock %}

{% block og_title %}Bubul — L'IA au service de votre pédagogie{% endblock %}
{% block og_description %}9 outils IA pédagogiques dans une seule interface. Cours LMS, modules SCORM, diaporamas, podcasts, infographies, images IA — pensé par des pédagogues pour des pédagogues.{% endblock %}
{% block twitter_title %}Bubul — L'IA au service de votre pédagogie{% endblock %}
{% block twitter_description %}9 outils IA pédagogiques dans une seule interface. Cours LMS, modules SCORM, diaporamas, podcasts, infographies, images IA — pensé par des pédagogues pour des pédagogues.{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500&family=Sora:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
{% endblock %}

{% block landing_content %}

{# ===== 1. HERO ===== #}
{% include '_organisms/landing/hero.html.twig' with {
    ctaUrl: path('app_login'),
    badge: (activeUserCount >= 10 ? ((activeUserCount // 10) * 10) ~ '+' : activeUserCount) ~ ' formateurs nous font déjà confiance',
    heroAvatars: heroAvatars ?? [],
    activeUserCount: activeUserCount ?? 0
} only %}

{# ===== 4. TOOLS (Bento Grid) ===== #}
{% include '_organisms/landing/tools.html.twig' with {
    eyebrow: 'NOS OUTILS',
    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>',
    subtitle: 'Cours LMS, diaporamas, podcasts, infographies, images IA — chaque outil conçu pour exceller dans sa spécialité.',
    tools: [
        { code: 'moodia',    name: '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',   name: 'Scormia',   description: 'Créez des modules SCORM interactifs (quiz notés, flashcards, exercices) à partir d\'un PDF ou d\'un sujet. Export SCORM pour Moodle et tous les LMS.',                                                                                       badge: 'SCORM',      iconName: 'bubul-scormia' },
        { code: 'slidia',    name: 'Slidia',    description: 'Générez des présentations professionnelles respectant votre charte graphique.',                                                                                                                                                               badge: '.PPTX',      iconName: 'bubul-slidia' },
        { code: 'serenia',   name: 'Serenia',   description: 'Assistant IA confidentiel avec upload de fichiers.',                                                                                                                                                                                          badge: 'Chat IA',    iconName: 'bubul-serenia' },
        { code: 'monalisia', name: 'Monalisia', description: 'Créez des infographies aux couleurs de votre charte graphique.',                                                                                                                                                                              badge: '.PNG',       iconName: 'bubul-monalisia' },
        { code: 'castia',    name: 'Castia',    description: 'Produisez des podcasts pédagogiques avec des voix naturelles.',                                                                                                                                                                               badge: '.MP3',       iconName: 'bubul-castia' },
        { code: 'pixia',     name: 'Pixia',     description: 'Générez des images pédagogiques IA à partir d\'un texte ou d\'un PDF.',                                                                                    badge: '.PNG',       iconName: 'bubul-pixia' },
        { code: 'promptly',  name: 'Promptly',  description: 'Bibliothèque de prompts IA partagés et personnels. Recherche instantanée, favoris et lancement direct sur Serenia.',                                                                                                                    badge: 'Prompts',    iconName: 'bubul-promptly' },
        { code: 'sam',       name: 'SAM',       description: 'Tableau de bord complet pour suivre la progression de vos apprenants sur votre LMS. KPIs, alertes et analytics en temps réel. Notre API vous permet également de récupérer vos données LMS directement dans vos propres outils.', badge: 'Dashboard',  iconName: 'bubul-sam' }
    ]
} only %}

{# ===== 5. DEMO SHOWCASE ===== #}
{% include '_organisms/landing/demo-showcase.html.twig' with {
    eyebrow: 'PLATEFORME UNIFIÉE',
    title: 'Tous vos outils, <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">un seul workflow</span>',
    subtitle: 'Fini les dizaines d\'abonnements et les exports manuels. Bubul connecte chaque outil dans un espace unique — votre progression, vos fichiers et vos tokens partagés en temps réel.',
    bulletPoints: [
        '9 outils connectés, un seul espace de travail',
        'Tout inclus, sans abonnement par outil',
        'IA responsable — CO₂ et Wh visibles à chaque génération'
    ],
    ctaLabel: 'Découvrir',
    ctaUrl: path('app_login')
} only %}

{# ===== 6. LMS PARTNERSHIP ===== #}
{% include '_organisms/landing/lms-partnership.html.twig' with {
    eyebrow: 'PARTENARIAT DOTTILDE',
    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>',
    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.'
} only %}

{# ===== 7. TRUST & COMPLIANCE ===== #}
{% include '_organisms/landing/trust.html.twig' with {
    eyebrow: 'CONFIANCE & CONFORMITÉ',
    title: 'Confidentialité et transparence <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">dès le premier jour</span>',
    subtitle: 'Bubul est conçu avec la confidentialité au cœur de son architecture. Nos serveurs d\'hébergement sont basés en Europe, vos données ne sont jamais réutilisées pour entraîner des modèles IA, et chaque requête affiche son impact écologique en temps réel.',
    badges: [
        { iconName: 'shield',       iconColor: 'primary', iconBg: 'rgba(12, 129, 228, 0.08)', label: 'Hébergement EU' },
        { iconName: 'check-circle', iconColor: 'cohorts', iconBg: 'rgba(124, 58, 237, 0.08)', label: 'Loi IA européenne' },
        { iconName: 'lock',         iconColor: 'success', iconBg: 'rgba(48, 147, 68, 0.08)',  label: 'Données non réutilisées' },
        { iconName: 'bolt',         iconColor: 'warning', iconBg: 'rgba(245, 158, 11, 0.08)', label: 'Empreinte CO₂ suivie' }
    ],
    panelItems: [
        {
            iconName: 'shield', iconColor: 'primary', iconBg: 'rgba(12,129,228,0.1)',
            title: 'Hébergement européen',
            desc: 'Nos serveurs Bubul sont hébergés en Europe. Conformité RGPD complète en cours — les traitements IA via OpenAI relèvent du droit américain.',
            tagClass: 'trust-tag--progress', tagLabel: 'En cours'
        },
        {
            iconName: 'check-circle', iconColor: 'info', iconBg: 'rgba(6,182,212,0.1)',
            title: 'Conforme AI Act',
            desc: 'Transparence algorithmique complète. Traçabilité de chaque génération.',
            tagClass: 'trust-tag--active', tagLabel: 'Actif'
        },
        {
            iconName: 'lock', iconColor: 'primary', iconBg: 'rgba(12,129,228,0.1)',
            title: 'Vos données vous appartiennent',
            desc: 'Vos contenus ne sont jamais utilisés pour entraîner des modèles IA.',
            tagClass: 'trust-tag--guaranteed', tagLabel: 'Garanti'
        },
        {
            iconName: 'bolt', iconColor: 'info', iconBg: 'rgba(6,182,212,0.1)',
            title: 'Empreinte carbone visible',
            desc: 'Chaque requête affiche son impact en Wh et CO2 estimé.',
            tagClass: 'trust-tag--tracked', tagLabel: 'Tracké'
        }
    ]
} only %}

{# ===== 8. PRICING ===== #}
{% include '_organisms/landing/pricing.html.twig' with {
    ctaUrl: path('app_login'),
    plans: pricingPlans,
    equivDataIsReal: hasRealEquivData,
    featureRows: [
        { label: 'Accès SAM',                        desc: 'Synchronisation LMS en temps réel',               idx: 0 },
        { label: 'Support prioritaire',              desc: 'Le plus rapidement possible',                     idx: 1 },
        { label: 'Dashboard multi-comptes',          desc: 'Gérez tous vos utilisateurs depuis un seul espace', idx: 2 },
        { label: 'Tokens flexibles par utilisateur', desc: 'Attribuez les tokens selon les besoins',           idx: 3 },
        { label: 'Tarif dégressif',                  desc: 'Moins cher à mesure que le volume augmente',       idx: 4 },
        { label: 'Formation dédiée',                 desc: 'Onboarding personnalisé pour vos équipes',         idx: 5 }
    ],
    equivTools: [
        { code: 'moodia',    fallback: 'Moodia' },
        { code: 'slidia',    fallback: 'Slidia' },
        { code: 'serenia',   fallback: 'Serenia' },
        { code: 'monalisia', fallback: 'Monalisia' },
        { code: 'castia',    fallback: 'Castia' },
        { code: 'pixia',     fallback: 'Pixia' },
        { code: 'promptly',  fallback: 'Promptly', featureIdx: 7 },
        { code: 'scormia',   fallback: 'Scormia',  featureIdx: 8 }
    ]
} only %}

{# ===== 9. FAQ ===== #}
{% include '_organisms/landing/faq.html.twig' with {
    eyebrow: 'FAQ',
    title: 'Questions <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">fréquentes</span>',
    subtitle: 'Tout ce que vous devez savoir sur Bubul.',
    freemiumTokens: freemiumTokens
} only %}

{# ===== 10. CTA ===== #}
{% include '_organisms/landing/cta.html.twig' with {
    badge:    'Freemium — ' ~ freemiumTokens|number_format(0, ',', ' ') ~ ' tokens/mois offerts',
    subtitle: 'Sans carte bancaire. Créez cours, diaporamas, podcasts, infographies et images IA pédagogiques dès votre inscription.',
    ctaUrl:   path('app_login')
} only %}

{# ===== 11. FOOTER ===== #}
{% include '_organisms/landing/footer.html.twig' with {
    tagline: '9 outils IA pensés pour les formateurs — créez, déployez et pilotez vos formations depuis un seul espace.'
} only %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {# ===== Smooth anchor scrolling (bypass Turbo Drive) ===== #}
    <script>
    document.addEventListener('click', function(e) {
        var a = e.target.closest('a[href^="#"]');
        if (!a) return;
        var id = a.getAttribute('href').slice(1);
        var target = document.getElementById(id);
        if (!target) return;
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
    </script>

    {# ===== Reveal Observer (global scroll animations) ===== #}
    <script>
    (function() {
        'use strict';

        function initReveal() {
            var observer = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.05 });

            document.querySelectorAll('.reveal:not(.visible)').forEach(function(el) {
                observer.observe(el);
            });

            // Fallback: show all remaining elements after 2s if observer didn't fire
            setTimeout(function() {
                document.querySelectorAll('.reveal:not(.visible)').forEach(function(el) {
                    el.classList.add('visible');
                });
            }, 2000);
        }

        // Run now + after Turbo navigation
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initReveal);
        } else {
            initReveal();
        }
        document.addEventListener('turbo:load', initReveal);
    })();
    </script>

    {# ===== Bubble Cursor Effect ===== #}
    <script>
    (function() {
        'use strict';

        var CONFIG = {
            cursor: {
                size: 32, zIndex: 999999,
                gradient: 'radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(12, 129, 228, 0.7) 50%, rgba(58, 184, 232, 0.6))',
                shadow: '0 0 25px rgba(12, 129, 228, 0.5), 0 0 50px rgba(58, 184, 232, 0.3), inset -5px -5px 10px rgba(255, 255, 255, 0.4), inset 5px 5px 10px rgba(12, 129, 228, 0.3)',
                blur: 3, clickScale: 1.3, clickDuration: 200
            },
            bubbles: {
                size: 8, zIndex: 999998, movementThreshold: 25,
                gradient: 'radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), rgba(12, 129, 228, 0.25) 50%, rgba(58, 184, 232, 0.15))',
                border: '0.5px solid rgba(12, 129, 228, 0.25)',
                shadow: '0 0 6px rgba(12, 129, 228, 0.2), inset 0 0 4px rgba(255, 255, 255, 0.2)',
                initialOpacity: 0.45, finalOpacity: 0.03
            },
            physics: {
                lifeSpan: 180, velocityX: 0.25,
                velocityY: { min: -1.3, max: -0.8 },
                velocityChangeX: 2/75, velocityChangeY: 1/300,
                scaleStart: 0.8, scaleGrowth: 1.7
            },
            click: { burstCount: 8, burstDelay: 15 }
        };

        var cursor = null;
        var lastCursor = { x: 0, y: 0 };
        var particles = [];

        function Particle() {
            this.lifeSpan = CONFIG.physics.lifeSpan;
            this.init = function(x, y) {
                this.velocity = {
                    x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() * CONFIG.physics.velocityX),
                    y: CONFIG.physics.velocityY.min + Math.random() * (CONFIG.physics.velocityY.max - CONFIG.physics.velocityY.min)
                };
                this.position = { x: x, y: y };
                this.element = document.createElement('span');
                var hs = CONFIG.bubbles.size / 2;
                Object.assign(this.element.style, {
                    position: 'fixed', left: x+'px', top: y+'px', display: 'block',
                    pointerEvents: 'none', zIndex: CONFIG.bubbles.zIndex,
                    width: CONFIG.bubbles.size+'px', height: CONFIG.bubbles.size+'px',
                    marginLeft: -hs+'px', marginTop: -hs+'px', willChange: 'transform',
                    background: CONFIG.bubbles.gradient, border: CONFIG.bubbles.border,
                    borderRadius: '50%', boxShadow: CONFIG.bubbles.shadow,
                    opacity: CONFIG.bubbles.initialOpacity
                });
                this.update();
                document.body.appendChild(this.element);
            };
            this.update = function() {
                this.position.x += this.velocity.x;
                this.position.y += this.velocity.y;
                this.velocity.x += (Math.random() < 0.5 ? -1 : 1) * CONFIG.physics.velocityChangeX;
                this.velocity.y -= Math.random() * CONFIG.physics.velocityChangeY;
                this.lifeSpan--;
                var progress = (CONFIG.physics.lifeSpan - this.lifeSpan) / CONFIG.physics.lifeSpan;
                var scale = CONFIG.physics.scaleStart + progress * CONFIG.physics.scaleGrowth;
                var opacity = Math.max(CONFIG.bubbles.finalOpacity, this.lifeSpan / CONFIG.physics.lifeSpan * CONFIG.bubbles.initialOpacity);
                this.element.style.left = this.position.x + 'px';
                this.element.style.top = this.position.y + 'px';
                this.element.style.transform = 'scale(' + scale + ')';
                this.element.style.opacity = opacity;
            };
            this.die = function() {
                if (this.element.parentNode) this.element.parentNode.removeChild(this.element);
            };
        }

        function init() {
            cursor = document.createElement('div');
            cursor.style.cssText = 'position:fixed;width:'+CONFIG.cursor.size+'px;height:'+CONFIG.cursor.size+'px;border-radius:50%;background:'+CONFIG.cursor.gradient+';border:none;pointer-events:none;z-index:'+CONFIG.cursor.zIndex+';transform:translate(-50%,-50%);box-shadow:'+CONFIG.cursor.shadow+';opacity:1;backdrop-filter:blur('+CONFIG.cursor.blur+'px)';
            document.body.appendChild(cursor);
            document.body.style.cursor = 'none';
            document.querySelectorAll('a, button, input, textarea').forEach(function(el) { el.style.cursor = 'none'; });
            document.addEventListener('mousemove', function(e) {
                if (!cursor) return;
                cursor.style.left = e.clientX + 'px';
                cursor.style.top = e.clientY + 'px';
                var dx = Math.abs(lastCursor.x - e.clientX);
                var dy = Math.abs(lastCursor.y - e.clientY);
                if (dx > CONFIG.bubbles.movementThreshold || dy > CONFIG.bubbles.movementThreshold) {
                    lastCursor.x = e.clientX; lastCursor.y = e.clientY;
                    addParticle(e.clientX, e.clientY);
                }
            });
            document.addEventListener('click', function(e) {
                for (var i = 0; i < CONFIG.click.burstCount; i++) {
                    setTimeout(function() { addParticle(e.clientX, e.clientY); }, i * CONFIG.click.burstDelay);
                }
                if (cursor) {
                    cursor.style.transform = 'translate(-50%,-50%) scale('+CONFIG.cursor.clickScale+')';
                    setTimeout(function() { cursor.style.transform = 'translate(-50%,-50%) scale(1)'; }, CONFIG.cursor.clickDuration);
                }
            });
            (function loop() {
                requestAnimationFrame(loop);
                particles.forEach(function(p) { p.update(); });
                for (var i = particles.length - 1; i >= 0; i--) {
                    if (particles[i].lifeSpan < 0) { particles[i].die(); particles.splice(i, 1); }
                }
            })();
        }

        function addParticle(x, y) {
            var p = new Particle(); p.init(x, y); particles.push(p);
        }

        if (window.matchMedia('(max-width: 768px)').matches || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
        if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); }
    })();
    </script>
{% endblock %}