<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 40px;">
    <% if (typeof stats !== 'undefined') { %>
        <% stats.forEach(stat => { 
            let iconClass = 'fas fa-star'; 
            let iconStyle = 'font-size: 2.8rem; margin-bottom: 15px; display: block; opacity: 0.9; color: #94a3b8;';
            const labelLower = stat.label_en.toLowerCase();
            
            if (labelLower.includes('youtube') || labelLower.includes('subscriber')) {
                iconClass = 'fab fa-youtube';
                iconStyle = 'font-size: 3rem; margin-bottom: 15px; display: block; color: #FF0000;';
            } else if (labelLower.includes('tiktok')) {
                iconClass = 'fab fa-tiktok';
                iconStyle = 'font-size: 3rem; margin-bottom: 15px; display: block; color: #ffffff; text-shadow: 2px 2px 0 #00f2ea, -2px -2px 0 #ff0050;';
            } else if (labelLower.includes('facebook') || labelLower.includes('follower')) {
                iconClass = 'fab fa-facebook';
                iconStyle = 'font-size: 3rem; margin-bottom: 15px; display: block; color: #1877F2;';
            } else if (labelLower.includes('instagram')) {
                iconClass = 'fab fa-instagram';
                iconStyle = 'font-size: 3rem; margin-bottom: 15px; display: block; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;';
            } else if (labelLower.includes('view')) {
                iconClass = 'fas fa-eye';
                iconStyle = 'font-size: 2.8rem; margin-bottom: 15px; display: block; color: #f59e0b;';
            } else if (labelLower.includes('video')) {
                iconClass = 'fas fa-video';
                iconStyle = 'font-size: 2.8rem; margin-bottom: 15px; display: block; color: #f59e0b;';
            } else if (labelLower.includes('countr')) {
                iconClass = 'fas fa-globe-americas';
                iconStyle = 'font-size: 2.8rem; margin-bottom: 15px; display: block; color: #10b981;';
            }
        %>
            <div style="text-align: center; flex: 1 1 200px; max-width: 250px; padding: 20px; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <i class="<%= iconClass %>" style="<%= iconStyle %>"></i>
                <h3 style="font-size: 3.2rem; color: var(--primary-color); margin: 0 0 5px 0; font-weight: 800; letter-spacing: 1px;"><%= stat.stat_value %></h3>
                <p style="font-size: 1rem; color: #94a3b8; margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;"><%= lang==='bn' ? stat.label_bn : stat.label_en %></p>
            </div>
        <% }) %>
    <% } %>
</div>

<% if(typeof sections !== 'undefined' && sections.media_kit && sections.media_kit.file_url) { %>
    <div style="text-align: center; margin-top: 60px; fade-in">
        <a href="<%= sections.media_kit.file_url %>" download class="btn-primary" style="padding: 15px 40px; font-size: 1.15rem; font-weight: 700; border-radius: 50px; box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4);"><i class="fas fa-file-download" style="margin-right: 10px;"></i> <%= (typeof lang !== 'undefined' && lang === 'bn') ? 'মিডিয়া কিট ডাউনলোড করুন' : 'Download Media Kit' %></a>
    </div>
<% } else { %>
    <div style="text-align: center; margin-top: 60px; fade-in">
        <a href="/downloads/media-kit.pdf" download class="btn-primary" style="padding: 15px 40px; font-size: 1.15rem; font-weight: 700; border-radius: 50px; box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4);"><i class="fas fa-file-download" style="margin-right: 10px;"></i> <%= (typeof lang !== 'undefined' && lang === 'bn') ? 'মিডিয়া কিট ডাউনলোড করুন' : 'Download Media Kit' %></a>
    </div>
<% } %>
