<style>
.gamification-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.gamification-hero::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 50%);  
    animation: rotate 10s linear infinite; pointer-events: none;
}
@keyframes rotate { 100% { transform: rotate(360deg); } }

.avatar-ring {
    width: 100px; height: 100px;
    border-radius: 50%;
    border: 4px solid #8b5cf6;
    padding: 4px;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}
.level-badge {
    position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    background: #c026d3; color: white; padding: 4px 16px; border-radius: 20px;
    font-weight: 800; font-size: 0.9rem; box-shadow: 0 4px 10px rgba(192, 38, 211, 0.4);
}
.xp-bar-container {
    background: rgba(255, 255, 255, 0.1);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 1.5rem;
    position: relative;
}
.xp-bar-fill {
    background: linear-gradient(90deg, #8b5cf6, #d946ef);
    height: 100%;
    width: 0%; /* Will animate via JS */
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    box-shadow: 0 0 10px #d946ef;
}
.badge-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: transform 0.3s, box-shadow 0.3s;
}
.badge-card.unlocked {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.1);
}
.badge-card.unlocked:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.2);
}
.badge-icon-wrapper {
    width: 60px; height: 60px;
    margin: 0 auto 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    color: #475569;
}
.badge-card.unlocked .badge-icon-wrapper {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(217, 70, 239, 0.2));
    color: #e879f9;
    box-shadow: inset 0 0 10px rgba(139, 92, 246, 0.5);
}
.badge-name { font-weight: 700; font-size: 1rem; color: #94a3b8; }
.badge-card.unlocked .badge-name { color: #f8fafc; }
.badge-date { font-size: 0.75rem; color: #64748b; margin-top: 5px; }

</style>

<div class="gamification-hero mb-5 text-white">
    <div class="row align-items-center position-relative" style="z-index: 1;">
        <div class="col-md-3 text-center mb-4 mb-md-0 position-relative">
            <img src="https://ui-avatars.com/api/?name=<?= urlencode($userName) ?>&background=8b5cf6&color=fff&size=150" alt="Avatar" class="avatar-ring img-fluid">
            <div class="level-badge">المستوى <?= $profile['level'] ?></div>
        </div>
        <div class="col-md-9">
            <h1 class="fw-bold mb-1" style="font-size: 2rem;"><?= htmlspecialchars($userName) ?></h1>
            <p class="text-info fs-5 mb-3 fw-bold"><i class="fa-solid fa-star text-warning"></i> <?= $profile['title'] ?></p>
            
            <div class="d-flex justify-content-between text-muted" style="font-size: 0.85rem;">
                <span class="text-white-50"><i class="fa-solid fa-bolt text-warning"></i> <?= number_format($profile['xp']) ?> XP الحالية</span>
                <span class="text-white-50">الهدف: <?= number_format($profile['next_xp']) ?> XP <i class="fa-solid fa-flag text-white"></i></span>
            </div>
            
            <div class="xp-bar-container">
                <div class="xp-bar-fill" id="xpFillBar" data-progress="<?= $profile['progress_pct'] ?>"></div>
            </div>
            
            <div class="mt-2 text-end text-white-50" style="font-size: 0.8rem;">
                <?= number_format($profile['next_xp'] - $profile['xp']) ?> XP متبقية للترقية القادمة
            </div>
        </div>
    </div>
</div>

<h3 class="fw-bold text-white mb-4"><i class="fa-solid fa-award text-warning me-2"></i> سجل الأوسمة (Badges Vault)</h3>

<div class="row g-4 mb-5">
    <?php foreach($badges as $badge): ?>
        <?php $unlocked = !empty($badge->earned_at); ?>
        <div class="col-6 col-md-3">
            <div class="badge-card <?= $unlocked ? 'unlocked' : '' ?> h-100">
                <div class="badge-icon-wrapper">
                    <i class="<?= htmlspecialchars($badge->icon) ?>"></i>
                </div>
                <div class="badge-name"><?= htmlspecialchars($badge->name) ?></div>
                <?php if($unlocked): ?>
                    <div class="badge-date fw-bold text-success"><i class="fa-solid fa-unlock-keyhole"></i> <?= date('Y-m-d', strtotime($badge->earned_at)) ?></div>
                <?php else: ?>
                    <div class="badge-date"><i class="fa-solid fa-lock text-secondary"></i> مغلق</div>
                <?php endif; ?>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Smooth filling animation upon loading the page
    setTimeout(() => {
        const bar = document.getElementById('xpFillBar');
        if(bar) {
            bar.style.width = bar.getAttribute('data-progress') + '%';
        }
    }, 100);
});
</script>
