<!-- Confetti library -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

<!-- Global Trophy Unlock Modal -->
<div id="lsq-global-trophy-unlock-modal" class="lsq-modal-backdrop" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100002; align-items: center; justify-content: center; backdrop-filter: blur(4px);">
    <div id="lsq-global-trophy-unlock-content" class="bg-surface-container-lowest editorial-shadow" style="border-radius: 20px; padding: 40px; text-align: center; max-width: 420px; width: 90%; position: relative; transform: scale(0.9); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); background-color: #ffffff;">

        <h2 class="font-headline font-extrabold text-3xl text-primary mb-2" style="color: #236c44; font-weight: 800; font-size: 28px; font-family: sans-serif;">🏆 Badge Unlocked!</h2>
        <p id="lsq-gtu-text" class="text-on-surface-variant mb-6 text-sm" style="color: #64748b; font-size: 16px; margin-bottom: 24px; font-family: sans-serif;">You earned a new badge for your Trophy Cabinet.</p>

        <div id="lsq-gtu-badges-container" class="flex justify-center flex-wrap gap-4 mb-8" style="display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; font-family: sans-serif; align-items: center; margin-left: auto; margin-right: auto;">
            <!-- Badges will be injected here -->
        </div>

        <div class="flex flex-col gap-3" style="display: flex; flex-direction: column; gap: 12px;">
            <button onclick="lsqGoToTrophyCabinet()" class="w-full py-4 font-label font-bold text-sm tracking-widest text-on-primary uppercase bg-primary rounded-full hover:bg-primary-dim transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none focus-visible:ring-offset-2" style="width: 100%; padding: 16px; font-weight: bold; background-color: #236c44; color: white; border-radius: 9999px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em; border: none;">Open Trophy Cabinet</button>
            <button onclick="closeGlobalTrophyUnlockModal()" class="w-full py-4 font-label font-bold text-sm tracking-widest text-primary uppercase bg-surface-container-high rounded-full hover:bg-secondary-fixed transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none focus-visible:ring-offset-2" style="width: 100%; padding: 16px; font-weight: bold; background-color: #f1f5f9; color: #236c44; border-radius: 9999px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em; border: none;">Close & Continue</button>
        </div>
    </div>
</div>

<script>
function showGlobalTrophyUnlockModal(badges) {
    const modal = document.getElementById('lsq-global-trophy-unlock-modal');
    const content = document.getElementById('lsq-global-trophy-unlock-content');
    const container = document.getElementById('lsq-gtu-badges-container');
    const textElem = document.getElementById('lsq-gtu-text');

    if (!modal) {
        window.location.reload();
        return;
    }

    container.innerHTML = '';
    let any_has_mcq = false;

    badges.forEach(b => {
        if (b.has_mcq) any_has_mcq = true;

        // Circular styling similar to trophy cabinet
        let html = '<div class="flex flex-col items-center justify-center p-4 bg-surface-container-low rounded-xl" style="width: 160px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background-color: #f8fafc; border-radius: 16px; border: 1px solid #e2e8f0; margin: 0 auto;">';
        if (b.has_mcq) {
            html += '<div class="absolute -top-2 -right-2 bg-yellow-400 text-yellow-900 text-[10px] px-2 py-1 rounded-full font-bold border-2 border-white" style="position: absolute; top: -8px; right: -8px; background-color: #FFD54F; color: #b45309; font-size: 10px; padding: 2px 6px; border-radius: 9999px; font-weight: bold; border: 2px solid white;">MCQ</div>';
        }
        if (b.image_url) {
            html += '<div class="w-24 h-24 mb-3 rounded-full overflow-hidden border-4 border-surface-container shadow-sm" style="width: 100px; height: 100px; margin-bottom: 12px; border-radius: 9999px; overflow: hidden; border: 4px solid #f1f5f9; background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); position: relative; margin-left: auto; margin-right: auto; z-index: 1;">';
            html += '<img src="' + b.image_url + '" alt="' + b.name + '" style="width: 100%; height: 100%; object-fit: cover; display: block;" />';
            html += '</div>';
        } else {
            html += '<div class="w-24 h-24 mb-3 rounded-full overflow-hidden border-4 border-surface-container flex items-center justify-center bg-white shadow-sm text-5xl" style="width: 96px; height: 96px; margin-bottom: 12px; border-radius: 9999px; overflow: hidden; border: 4px solid #f1f5f9; display: flex; align-items: center; justify-content: center; background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); font-size: 48px;">';
            html += '🍋';
            html += '</div>';
        }
        html += '<h4 class="font-bold text-sm text-primary leading-tight" style="font-weight: 700; font-size: 14px; color: #1e293b; text-align: center; margin: 0;">' + b.name + '</h4>';
        html += '</div>';
        container.innerHTML += html;
    });

    if (any_has_mcq) {
        textElem.innerHTML = 'You earned a new badge for your Trophy Cabinet.<br><br><strong class="text-primary" style="color: #236c44;">P.S. A new Badge MCQ Challenge has also been unlocked! 🎉</strong>';
    } else {
        textElem.innerHTML = 'You earned a new badge for your Trophy Cabinet.';
    }

    modal.style.display = 'flex';
    // Force reflow
    void modal.offsetWidth;
    content.style.transform = 'scale(1)';
    content.style.opacity = '1';

    // Trigger confetti
    triggerTrophyConfetti();
}

function triggerTrophyConfetti() {
    if (typeof confetti !== 'function') return;

    var duration = 3 * 1000;
    var animationEnd = Date.now() + duration;
    var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 100003 };

    function randomInRange(min, max) {
      return Math.random() * (max - min) + min;
    }

    var interval = setInterval(function() {
      var timeLeft = animationEnd - Date.now();

      if (timeLeft <= 0) {
        return clearInterval(interval);
      }

      var particleCount = 50 * (timeLeft / duration);
      confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
      confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
    }, 250);
}

function closeGlobalTrophyUnlockModal() {
    const modal = document.getElementById('lsq-global-trophy-unlock-modal');
    if (modal) {
        modal.style.display = 'none';
    }
    // Reload to update UI (like calendar, etc.)
    window.location.reload();
}

function lsqGoToTrophyCabinet() {
    const modal = document.getElementById('lsq-global-trophy-unlock-modal');
    if (modal) {
        modal.style.display = 'none';
    }

    if (typeof openLemonTrophyModal === 'function') {
        openLemonTrophyModal();
    } else {
        // If the trophy modal is not on this page, redirect to account page
        window.location.href = '/membership-account/';
    }
}
</script>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://testing.lemonsqeezy.co.uk/wp-sitemap-index.xsl" ?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://testing.lemonsqeezy.co.uk/wp-sitemap-posts-page-1.xml</loc></sitemap><sitemap><loc>https://testing.lemonsqeezy.co.uk/wp-sitemap-posts-elementskit_template-1.xml</loc></sitemap><sitemap><loc>https://testing.lemonsqeezy.co.uk/wp-sitemap-users-1.xml</loc></sitemap></sitemapindex>
