document.addEventListener('DOMContentLoaded', () => {
    const left = document.querySelector('.left-emoji');
    const right = document.querySelector('.right-emoji');
    const winnerText = document.getElementById('winner-text');

    // These variables will be injected by Twig in the template as data attributes or global variables
    const winnerSide = window.winnerSide;
    const loserSide = window.loserSide;

    left.classList.add('slide-in-left');
    right.classList.add('slide-in-right');

    setTimeout(() => {
        left.style.left = '100px';
        right.style.left = '300px';

        left.classList.add('fight-animation');
        right.classList.add('fight-animation');

        setTimeout(() => {
            left.classList.remove('fight-animation');
            right.classList.remove('fight-animation');

            const loser = loserSide === 'left' ? left : right;
            loser.classList.add('loser-fly-up');
            const wing = document.createElement('div');
            wing.classList.add('wing');
            wing.textContent = '🪽';
            loser.appendChild(wing);

            const winner = winnerSide === 'left' ? left : right;
            winner.classList.add('winner-center', 'winner-crown');

            winnerText.textContent = `${winner.textContent.trim()} a gagné ! 🎉`;
            winnerText.style.display = 'block';
        }, 1500);
    }, 3000);
});