<div id="lottie-container">
    <lottie-player 
        id="lottie-animation" 
        src="https://euno.ai/wp-content/uploads/2024/12/lottie.json" 
        background="transparent" 
        speed="1" 
        style="width: 100%;"
    ></lottie-player>
</div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const player = document.querySelector('#lottie-animation');
    const buttons = document.querySelectorAll('.btn[data-part]');
    
    let currentSegment = null;
    let isFirstLoad = true;
    let lottieAnim = null;
    let segments = null;
    
    // Configuration de base
    player.loop = false;
    player.autoplay = false;
    player.mode = "normal";
    
    function initSegments() {
        const totalFrames = lottieAnim.totalFrames;
        const segmentLength = Math.floor(totalFrames / 3);
        
        segments = {
            '1': { start: 0, end: segmentLength - 1 },
            '2': { start: segmentLength, end: segmentLength * 2 - 1 },
            '3': { start: segmentLength * 2, end: totalFrames - 1 }
        };
        
        console.log('Initialisation des segments:', {
            totalFrames,
            segmentLength,
            segments
        });
    }
    
    function updateProgress(segmentPart, progress) {
        const button = Array.from(buttons).find(btn => btn.dataset.part === segmentPart);
        if (!button) return;
        
        const progressBar = button.querySelector('.progress-bar');
        const btnTitle = button.querySelector('.btn-title');
        const btnText = button.querySelector('.btn-text');
        
        if (progressBar) {
            progressBar.style.height = `${progress}%`;
        }
        
        if (progress > 0) {
            if (btnTitle) btnTitle.style.color = '#0A225C';
            if (btnText) btnText.style.color = '#0A225C';
        } else {
            if (btnTitle) btnTitle.style.removeProperty('color');
            if (btnText) btnText.style.removeProperty('color');
        }
    }
    
    function playSegment(part) {
        if (!lottieAnim) {
            lottieAnim = player.getLottie();
            initSegments();
        }
        
        console.log('=== Démarrage segment ===', part);
        currentSegment = part;
        const segment = segments[part];
        
        // Reset des progress bars
        buttons.forEach(btn => {
            updateProgress(btn.dataset.part, 0);
        });
        
        // Configuration du segment
        const fromFrame = segment.start;
        const toFrame = segment.end;
        
        console.log('Lecture segment:', {
            part,
            de: fromFrame,
            à: toFrame
        });
        
        // Force l'arrêt de l'animation en cours
        player.stop();
        
        // Configure et joue le segment spécifique
        player.seek(fromFrame);
        player.setLooping(false);
        lottieAnim.playSegments([fromFrame, toFrame], true);
    }
    
    function calculateProgress(currentFrame, segment) {
        const duration = segment.end - segment.start;
        const position = currentFrame - segment.start;
        const progress = (position / duration) * 100;
        
        console.log('Calcul progression:', {
            frame: currentFrame,
            start: segment.start,
            position,
            progress: progress.toFixed(2)
        });
        
        return Math.min(100, Math.max(0, progress));
    }
    
    // Event de mise à jour des frames
    player.addEventListener('frame', () => {
        if (!currentSegment || !segments || !lottieAnim) return;
        
        const frame = lottieAnim.currentFrame;
        const segment = segments[currentSegment];
        
        if (frame >= segment.start && frame <= segment.end) {
            const progress = calculateProgress(frame, segment);
            updateProgress(currentSegment, progress);
        }
    });
    
    // Gestion des clics sur les boutons
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            playSegment(this.dataset.part);
        });
    });
    
    // Gestion de la fin d'animation
    player.addEventListener('complete', () => {
        console.log('=== Fin de segment ===', currentSegment);
        updateProgress(currentSegment, 100);
        
        const nextPart = String(parseInt(currentSegment) + 1);
        if (nextPart <= 3) {
            setTimeout(() => {
                playSegment(nextPart);
            }, 100);
        }
    });
    
    // Observer pour l'autoplay
    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && isFirstLoad) {
                    isFirstLoad = false;
                    setTimeout(() => {
                        playSegment('1');
                    }, 100);
                }
            });
        },
        { threshold: 0.1 }
    );
    
    observer.observe(player);
});
</script>