<?php
/**
 * @var Johncms\Counters $counters
 * @var int $rights
 * @var $data
 */

$this->layout('system::layout/default');
?>

<!-- Animated Hero Section -->
<div class="relative bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-700 overflow-hidden">
    <!-- Animated Background -->
    <div class="absolute inset-0">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20"></div>
        <div class="absolute top-0 left-0 w-72 h-72 bg-white/5 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-white/5 rounded-full translate-x-1/2 translate-y-1/2"></div>
    </div>

    <div class="relative py-16 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="text-center animate-fade-in-up">
                <!-- Animated Logo/Badge -->
                <div class="mb-8">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 shadow-2xl mb-6 animate-bounce-subtle">
                        <span class="text-2xl font-bold text-white">JC</span>
                    </div>
                </div>

                <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold text-white mb-6 bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
                    JohnCMS <?= CMS_VERSION ?>
                </h1>
                
                <p class="text-xl text-blue-100 max-w-3xl mx-auto mb-8 leading-relaxed">
                    <?= __('Free, Open Source content management system') ?>
                </p>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12">
                    <a class="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:scale-105 hover:-translate-y-1 overflow-hidden"
                       href="https://johncms.com/downloads/">
                        <div class="absolute inset-0 bg-gradient-to-r from-green-600 to-emerald-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        <svg class="w-6 h-6 mr-3 relative z-10 transform group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                        </svg>
                        <span class="relative z-10"><?= __('Download') ?></span>
                    </a>

                    <a class="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:scale-105 hover:-translate-y-1 overflow-hidden"
                       href="https://docs.johncms.com/">
                        <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        <svg class="w-6 h-6 mr-3 relative z-10 transform group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                        </svg>
                        <span class="relative z-10"><?= __('Documentation') ?></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Interactive Quick Access Tiles -->
<div class="bg-gradient-to-br from-gray-50 to-blue-50/30 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 lg:gap-6">
            <!-- News Tile -->
            <a href="/news/" 
               class="group relative bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg hover:shadow-2xl border border-white/50 hover:border-blue-200 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 p-6 text-center animate-fade-in-up"
               style="animation-delay: 0.1s">
                <div class="relative inline-block mb-4">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-100 to-blue-200 group-hover:from-blue-200 group-hover:to-blue-300 flex items-center justify-center mx-auto transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-8 h-8 text-blue-600 group-hover:text-blue-700 transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v12m0-12a2 2 0 012-2h2a2 2 0 012 2M9 6a2 2 0 012-2h2a2 2 0 012 2m-3 9l3-3m0 0l3 3m-3-3v6"></path>
                        </svg>
                    </div>
                    <?php if ($data['counters']['news']['new'] > 0): ?>
                        <span class="absolute -top-2 -right-2 inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-gradient-to-r from-red-500 to-pink-500 rounded-full shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            <?= $tools->formatNumber($data['counters']['news']['new']) ?>
                        </span>
                    <?php endif ?>
                </div>
                <div class="text-sm font-bold text-gray-800 group-hover:text-blue-600 transition-colors duration-300"><?= __('News') ?></div>
            </a>

            <!-- Forum Tile -->
            <a href="/forum/" 
               class="group relative bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg hover:shadow-2xl border border-white/50 hover:border-green-200 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 p-6 text-center animate-fade-in-up"
               style="animation-delay: 0.2s">
                <div class="relative inline-block mb-4">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-green-100 to-green-200 group-hover:from-green-200 group-hover:to-green-300 flex items-center justify-center mx-auto transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-8 h-8 text-green-600 group-hover:text-green-700 transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                        </svg>
                    </div>
                    <?php if ($data['counters']['forum']['new_messages'] > 0): ?>
                        <span class="absolute -top-2 -right-2 inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-gradient-to-r from-red-500 to-pink-500 rounded-full shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            <?= $tools->formatNumber($data['counters']['forum']['new_messages']) ?>
                        </span>
                    <?php endif ?>
                </div>
                <div class="text-sm font-bold text-gray-800 group-hover:text-green-600 transition-colors duration-300"><?= d__('system', 'Forum') ?></div>
            </a>

            <!-- Guestbook Tile -->
            <a href="/guestbook/ga" 
               class="group relative bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg hover:shadow-2xl border border-white/50 hover:border-orange-200 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 p-6 text-center animate-fade-in-up"
               style="animation-delay: 0.3s">
                <div class="relative inline-block mb-4">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-orange-100 to-orange-200 group-hover:from-orange-200 group-hover:to-orange-300 flex items-center justify-center mx-auto transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-8 h-8 text-orange-600 group-hover:text-orange-700 transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                        </svg>
                    </div>
                    <?php if ($data['counters']['guestbook']['guestbook'] > 0): ?>
                        <span class="absolute -top-2 -right-2 inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-gradient-to-r from-red-500 to-pink-500 rounded-full shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            <?= $tools->formatNumber($data['counters']['guestbook']['guestbook']) ?>
                        </span>
                    <?php endif ?>
                </div>
                <div class="text-sm font-bold text-gray-800 group-hover:text-orange-600 transition-colors duration-300"><?= d__('system', 'Guestbook') ?></div>
            </a>

            <!-- Downloads Tile -->
            <a href="/downloads/" 
               class="group relative bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg hover:shadow-2xl border border-white/50 hover:border-purple-200 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 p-6 text-center animate-fade-in-up"
               style="animation-delay: 0.4s">
                <div class="relative inline-block mb-4">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-100 to-purple-200 group-hover:from-purple-200 group-hover:to-purple-300 flex items-center justify-center mx-auto transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-8 h-8 text-purple-600 group-hover:text-purple-700 transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                        </svg>
                    </div>
                    <?php if ($data['counters']['downloads']['new'] > 0): ?>
                        <span class="absolute -top-2 -right-2 inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-gradient-to-r from-red-500 to-pink-500 rounded-full shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            <?= $tools->formatNumber($data['counters']['downloads']['new']) ?>
                        </span>
                    <?php endif ?>
                </div>
                <div class="text-sm font-bold text-gray-800 group-hover:text-purple-600 transition-colors duration-300"><?= d__('system', 'Downloads') ?></div>
            </a>

            <!-- Library Tile -->
            <a href="/library/" 
               class="group relative bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg hover:shadow-2xl border border-white/50 hover:border-cyan-200 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 p-6 text-center animate-fade-in-up"
               style="animation-delay: 0.5s">
                <div class="relative inline-block mb-4">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-100 to-cyan-200 group-hover:from-cyan-200 group-hover:to-cyan-300 flex items-center justify-center mx-auto transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-8 h-8 text-cyan-600 group-hover:text-cyan-700 transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                    </div>
                    <?php if ($data['counters']['library']['new'] > 0): ?>
                        <span class="absolute -top-2 -right-2 inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-gradient-to-r from-red-500 to-pink-500 rounded-full shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            <?= $tools->formatNumber($data['counters']['library']['new']) ?>
                        </span>
                    <?php endif ?>
                </div>
                <div class="text-sm font-bold text-gray-800 group-hover:text-cyan-600 transition-colors duration-300"><?= d__('system', 'Library') ?></div>
            </a>

            <!-- Users Tile -->
            <a href="/community/" 
               class="group relative bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg hover:shadow-2xl border border-white/50 hover:border-pink-200 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 p-6 text-center animate-fade-in-up"
               style="animation-delay: 0.6s">
                <div class="relative inline-block mb-4">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-100 to-pink-200 group-hover:from-pink-200 group-hover:to-pink-300 flex items-center justify-center mx-auto transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-8 h-8 text-pink-600 group-hover:text-pink-700 transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                        </svg>
                    </div>
                    <?php if ($data['counters']['users']['new'] > 0): ?>
                        <span class="absolute -top-2 -right-2 inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-gradient-to-r from-red-500 to-pink-500 rounded-full shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            <?= $tools->formatNumber($data['counters']['users']['new']) ?>
                        </span>
                    <?php endif ?>
                </div>
                <div class="text-sm font-bold text-gray-800 group-hover:text-pink-600 transition-colors duration-300"><?= d__('system', 'Users') ?></div>
            </a>
        </div>
    </div>
</div>

<!-- Main Content Grid with Modern Cards -->
<div class="bg-white py-16 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            
            <!-- Latest News Section -->
            <div class="animate-fade-in-up">
                <div class="flex items-center justify-between mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 bg-gradient-to-r from-gray-900 to-blue-900 bg-clip-text text-transparent">
                        <?= __('Latest News') ?>
                    </h2>
                    <a href="/news/" class="inline-flex items-center text-blue-600 hover:text-blue-700 font-semibold transition-colors duration-200 group">
                        <span><?= __('All news') ?></span>
                        <svg class="w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>

                <div class="space-y-6">
                    <?php if (!empty($data['news']) && $data['news']->count() > 0): ?>
                        <?php foreach ($data['news'] as $index => $news_item): ?>
                            <?php /** @var News\Models\NewsArticle $news_item */ ?>
                            <div class="group bg-gradient-to-br from-white to-gray-50/50 backdrop-blur-lg rounded-2xl shadow-lg hover:shadow-xl border border-gray-200/50 hover:border-blue-200 transition-all duration-300 transform hover:scale-[1.02] overflow-hidden">
                                <div class="p-6">
                                    <a class="block mb-3" href="<?= $news_item->url ?>">
                                        <h3 class="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors duration-300 leading-tight line-clamp-2">
                                            <?= $news_item->name ?>
                                        </h3>
                                    </a>
                                    
                                    <?php if (!empty($news_item->preview_text_safe)): ?>
                                        <div class="mt-3 text-gray-600 leading-relaxed line-clamp-2 text-sm">
                                            <?= $news_item->preview_text_safe ?>
                                        </div>
                                    <?php endif; ?>

                                    <div class="mt-4 flex items-center justify-between text-sm text-gray-500">
                                        <div class="flex items-center space-x-4">
                                            <span class="flex items-center font-medium">
                                                <svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
                                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                                </svg>
                                                <?= (int) $news_item->votes_sum_vote ?>
                                            </span>
                                            
                                            <a href="<?= $news_item->url ?>#article-comments" 
                                               class="flex items-center font-medium hover:text-blue-600 transition-colors duration-200">
                                                <svg class="w-4 h-4 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                                                </svg>
                                                <?= $news_item->comments_count ?>
                                            </a>
                                        </div>
                                        
                                        <span class="text-gray-400 font-medium"><?= $news_item->display_date ?></span>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="text-center py-12">
                            <div class="w-24 h-24 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                                <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v12m0-12a2 2 0 012-2h2a2 2 0 012 2M9 6a2 2 0 012-2h2a2 2 0 012 2m-3 9l3-3m0 0l3 3m-3-3v6"></path>
                                </svg>
                            </div>
                            <p class="text-gray-500 text-lg"><?= __('No news available') ?></p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Latest Forum Topics Section -->
            <div class="animate-fade-in-up" style="animation-delay: 0.1s">
                <div class="flex items-center justify-between mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 bg-gradient-to-r from-gray-900 to-green-900 bg-clip-text text-transparent">
                        <?= __('Latest Forum Topics') ?>
                    </h2>
                    <a href="/forum/" class="inline-flex items-center text-green-600 hover:text-green-700 font-semibold transition-colors duration-200 group">
                        <span><?= __('Go to Forum') ?></span>
                        <svg class="w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>

                <div class="space-y-4">
                    <?php if (!empty($data['latestForumTopics']) && $data['latestForumTopics']->count() > 0): ?>
                        <?php foreach ($data['latestForumTopics'] as $topic): ?>
                            <div class="group bg-gradient-to-br from-white to-gray-50/50 backdrop-blur-lg rounded-xl shadow-md hover:shadow-lg border border-gray-200/50 hover:border-green-200 transition-all duration-300 transform hover:scale-[1.01] p-4">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1 min-w-0">
                                        <a href="<?= $topic->url ?>" class="block">
                                            <h4 class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors duration-300 truncate text-sm leading-tight">
                                                <?= $topic->name ?>
                                            </h4>
                                        </a>
                                        <div class="flex items-center space-x-3 text-xs text-gray-500 mt-2">
                                            <span><?= $topic->user_name ?></span>
                                            <span>•</span>
                                            <span><?= $topic->format_date ?></span>
                                        </div>
                                    </div>
                                    <div class="ml-4 flex items-center space-x-3 text-xs text-gray-500">
                                        <div class="text-center">
                                            <div class="font-semibold text-gray-700"><?= $topic->posts_count ?? 0 ?></div>
                                            <div class="text-gray-400"><?= __('posts') ?></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="text-center py-12">
                            <div class="w-24 h-24 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                                <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                                </svg>
                            </div>
                            <p class="text-gray-500 text-lg"><?= __('No forum topics available') ?></p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modern Stats Section -->
<div class="bg-gradient-to-br from-gray-50 to-blue-50/30 py-16 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-12 animate-fade-in-up">
            <h2 class="text-4xl font-bold text-gray-900 mb-4 bg-gradient-to-r from-gray-900 to-blue-900 bg-clip-text text-transparent">
                <?= __('Community Statistics') ?>
            </h2>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <!-- Total Users -->
            <div class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/50 p-6 text-center transform hover:scale-105 transition-all duration-300">
                <div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                    </svg>
                </div>
                <div class="text-2xl font-bold text-gray-900"><?= $tools->formatNumber($data['counters']['users']['total'] ?? 0) ?></div>
                <div class="text-sm text-gray-600"><?= __('Total Users') ?></div>
            </div>

            <!-- Online Users -->
            <div class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/50 p-6 text-center transform hover:scale-105 transition-all duration-300">
                <div class="w-12 h-12 bg-gradient-to-br from-green-100 to-green-200 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <div class="text-2xl font-bold text-gray-900"><?= $tools->formatNumber($data['counters']['online']['total'] ?? 0) ?></div>
                <div class="text-sm text-gray-600"><?= __('Online Now') ?></div>
            </div>

            <!-- Forum Posts -->
            <div class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/50 p-6 text-center transform hover:scale-105 transition-all duration-300">
                <div class="w-12 h-12 bg-gradient-to-br from-purple-100 to-purple-200 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                    </svg>
                </div>
                <div class="text-2xl font-bold text-gray-900"><?= $tools->formatNumber($data['counters']['forum']['total'] ?? 0) ?></div>
                <div class="text-sm text-gray-600"><?= __('Forum Posts') ?></div>
            </div>

            <!-- News Articles -->
            <div class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/50 p-6 text-center transform hover:scale-105 transition-all duration-300">
                <div class="w-12 h-12 bg-gradient-to-br from-orange-100 to-orange-200 rounded-xl flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v12m0-12a2 2 0 012-2h2a2 2 0 012 2M9 6a2 2 0 012-2h2a2 2 0 012 2m-3 9l3-3m0 0l3 3m-3-3v6"></path>
                    </svg>
                </div>
                <div class="text-2xl font-bold text-gray-900"><?= $tools->formatNumber($data['counters']['news']['total'] ?? 0) ?></div>
                <div class="text-sm text-gray-600"><?= __('News Articles') ?></div>
            </div>
        </div>
    </div>
</div>

<style>
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes bounceSubtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.animate-pulse-slow {
    animation: pulse-slow 2s ease-in-out infinite;
}

.animate-bounce-subtle {
    animation: bounceSubtle 2s ease-in-out infinite;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #2563eb, #7c3aed);
}
</style>