{{-- Social Proof Popup (Recent Transactions) --}}
<div id="social-proof-popup" class="fixed bottom-24 md:bottom-8 left-4 md:left-8 z-[100] transform translate-y-10 opacity-0 pointer-events-none transition-all duration-700 ease-in-out">
    <div class="glass flex items-center gap-4 p-4 pr-6 rounded-2xl shadow-[0_10px_40px_rgba(242,127,13,0.15)] border border-white/10" style="background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(16px);">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shrink-0 border-2 border-primary/30 shadow-[0_0_15px_rgba(242,127,13,0.3)]">
            <img id="sp-avatar" src="https://ui-avatars.com/api/?name=V&background=f27f0d&color=fff&bold=true" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-[#0a0a0a]"></div>
        </div>
        <div>
            <p class="text-sm text-white font-medium leading-tight">
                <span id="sp-name" class="font-bold text-primary">Someone</span> exchanged
            </p>
            <p id="sp-action" class="text-xs text-slate-300 mt-0.5 font-bold tracking-wide">$100 Amazon Gift Card</p>
            <p class="text-[10px] text-slate-500 mt-1 flex items-center gap-1 font-medium">
                <span class="material-symbols-outlined text-[12px] text-green-500">verified_user</span>
                Verified Payout • <span id="sp-time">Just now</span>
            </p>
        </div>
        <button onclick="document.getElementById('social-proof-popup').style.display='none'" class="absolute top-2 right-2 text-slate-600 hover:text-slate-300 transition-colors pointer-events-auto">
            <span class="material-symbols-outlined text-sm">close</span>
        </button>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
    // Arrays for random generation
    const maleNames = ['Chinedu', 'Segun', 'Emeka', 'Ibrahim', 'Abubakar', 'Chukwudi', 'Tunde', 'Kunle', 'Musa', 'Nnamdi', 'Obinna', 'Adewale', 'Kelechi', 'Yusuf', 'Dayo', 'Femi', 'Oluwaseun', 'Babajide', 'Uche', 'Sadiq', 'Mustapha'];
    const femaleNames = ['Ngozi', 'Fatima', 'Amaka', 'Zainab', 'Bisi', 'Aisha', 'Chika'];
    
    // Predominantly male (approx 85/15 split)
    const generateName = () => {
        const isMale = Math.random() < 0.85;
        const arr = isMale ? maleNames : femaleNames;
        return arr[Math.floor(Math.random() * arr.length)];
    }

    const assets = [
        '$100 Steam Gift Card',
        '$500 Apple Gift Card',
        '$200 Amazon Gift Card',
        '$50 Razer Gold',
        '$100 Sephora Gift Card',
        '$150 Google Play Card',
        '0.025 BTC',
        '1,250 USDT',
        '0.5 ETH',
        '0.15 BTC',
        '500 USDT',
        '$500 Vanilla Visa'
    ];
    
    const actions = ['exchanged', 'sold', 'traded'];
    const times = ['Just now', '1 min ago', '2 mins ago', '3 mins ago', '5 mins ago'];

    const popup = document.getElementById('social-proof-popup');
    const nameEl = document.getElementById('sp-name');
    const actionEl = document.getElementById('sp-action');
    const timeEl = document.getElementById('sp-time');
    const avatarEl = document.getElementById('sp-avatar');

    let isClosed = false;
    popup.querySelector('button').addEventListener('click', () => {
        isClosed = true;
    });

    const showPopup = () => {
        if (isClosed) return;

        const name = generateName();
        const asset = assets[Math.floor(Math.random() * assets.length)];
        const action = actions[Math.floor(Math.random() * actions.length)];
        const time = times[Math.floor(Math.random() * times.length)];
        
        nameEl.innerHTML = `${name} <span class="text-slate-400 font-normal">${action}</span>`;
        actionEl.innerText = asset;
        timeEl.innerText = time;
        avatarEl.src = `https://ui-avatars.com/api/?name=${name.charAt(0)}&background=f27f0d&color=fff&bold=true`;

        // Slide in
        popup.classList.remove('translate-y-10', 'opacity-0', 'pointer-events-none');
        popup.classList.add('translate-y-0', 'opacity-100', 'pointer-events-auto');

        // Hide after 5.5 seconds
        setTimeout(() => {
            if (!isClosed) {
                popup.classList.remove('translate-y-0', 'opacity-100', 'pointer-events-auto');
                popup.classList.add('translate-y-10', 'opacity-0', 'pointer-events-none');
            }
        }, 5500);
    };

    // Show first popup after 3 seconds
    setTimeout(() => {
        showPopup();
        
        // Loop randomly between 12s and 25s
        const loopPopup = () => {
            if (isClosed) return;
            const nextInterval = Math.floor(Math.random() * 13000) + 12000;
            setTimeout(() => {
                showPopup();
                loopPopup();
            }, nextInterval);
        };
        
        loopPopup();
        
    }, 3000);
});
</script>