<?php
// ============================================
// GENZGATE Competitions - INDEX (DEMO GOLD)
// File: public_html/competitions-index.php
// ============================================

// اللغة من الرابط
$current_lang = isset($_GET['lang']) ? strtolower($_GET['lang']) : 'en';
$rtl_langs    = ['ar', 'fa', 'he', 'ur'];
$dir          = in_array($current_lang, $rtl_langs) ? 'rtl' : 'ltr';

// دالة ترجمة بسيطة
function t($key, $fallback = '')
{
    static $defaults = [
        'page-title'          => 'GENZGATE Competitions',
        'hero-title'          => 'Showcase Your Talent. Win Global Recognition.',
        'hero-subtitle'       => 'Join our weekly challenges and show the world what Gen Z can create.',
        'btn-get-started'     => 'Get Started',
        'btn-explore'         => 'Explore Competitions',
        'btn-submit-entry'    => 'Submit Your Entry',
        'active-competitions' => 'Active Competitions',
        'top-entries'         => 'Top Entries',
        'recent-winners'      => 'Recent Winners',
        'stats-contests'      => 'Active Contests',
        'stats-entries'       => 'Total Entries',
        'stats-countries'     => 'Countries',
        'ends-on'             => 'Ends',
        'entries'             => 'entries',
        'view-details'        => 'View Details',
        'enter-now'           => 'Enter Now',
        'view-all'            => 'View All',
        'winner'              => 'Winner',
        'from'                => 'from',
        'category'            => 'Category',
        'view-profile'        => 'View Profile',
        'global-genz'         => 'Global Gen Z Competitions',
        'section-hero-tag'    => 'Global Gen Z Competitions',
    ];

    if ($fallback !== '') {
        return htmlspecialchars($fallback, ENT_QUOTES, 'UTF-8');
    }

    $text = isset($defaults[$key]) ? $defaults[$key] : $key;
    return htmlspecialchars($text, ENT_QUOTES, 'UTF-8');
}

// بيانات تجريبية للمسابقات (يمكن تغيير الصور والنصوص لاحقاً)
$competitions = [
    [
        'id'          => 1,
        'title'       => 'Weekly Creative Challenge: Future of Gen Z',
        'theme'       => 'Future of Gen Z',
        'image'       => 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=80',
        'ends'        => 'Dec 31, 2025',
        'entries'     => 142,
        'status'      => 'active',
        'badge'       => 'Active',
        'category'    => 'Creative',
        'countries'   => 24,
    ],
    [
        'id'          => 2,
        'title'       => 'Impact in 30 Seconds',
        'theme'       => 'Change the World',
        'image'       => 'https://images.unsplash.com/photo-1512428559087-560fa5ceab42?auto=format&fit=crop&w=1200&q=80',
        'ends'        => 'Jan 15, 2026',
        'entries'     => 89,
        'status'      => 'active',
        'badge'       => 'Weekly Video Contest',
        'category'    => 'Video',
        'countries'   => 18,
    ],
    [
        'id'          => 3,
        'title'       => 'Invite & Win',
        'theme'       => 'Global Gen Z Community',
        'image'       => 'https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=1200&q=80',
        'ends'        => 'Jan 15, 2026',
        'entries'     => 256,
        'status'      => 'active',
        'badge'       => 'Featured',
        'category'    => 'Community',
        'countries'   => 32,
    ],
];

// إحصائيات بسيطة (تجريبية)
$total_contests  = count($competitions);
$total_entries   = array_sum(array_column($competitions, 'entries'));
$total_countries = max(array_column($competitions, 'countries'));

// بيانات لأفضل المشاركات
$top_entries = [
    [
        'title'   => 'The Future Is Bright',
        'author'  => 'Sara Ali',
        'country' => 'Iraq',
        'flag'    => '🇮🇶',
        'image'   => 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=900&q=80',
        'likes'   => 1342,
        'contest' => 'Future of Gen Z',
    ],
    [
        'title'   => 'Digital Dreams',
        'author'  => 'Alex Chen',
        'country' => 'USA',
        'flag'    => '🇺🇸',
        'image'   => 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=900&q=80',
        'likes'   => 978,
        'contest' => 'Creative Challenge',
    ],
];

// بيانات الفائزين
$recent_winners = [
    [
        'name'     => 'Layla Hassan',
        'country'  => 'UAE',
        'flag'     => '🇦🇪',
        'image'    => 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=900&q=80',
        'contest'  => 'Impact in 30 Seconds',
        'category' => 'Video',
        'year'     => '2025',
    ],
    [
        'name'     => 'Mohammed Khan',
        'country'  => 'Australia',
        'flag'     => '🇦🇺',
        'image'    => 'https://images.unsplash.com/photo-1542744095-fcf48d80b0fd?auto=format&fit=crop&w=900&q=80',
        'contest'  => 'Invite & Win',
        'category' => 'Community',
        'year'     => '2025',
    ],
];
?>
<!DOCTYPE html>
<html lang="<?= htmlspecialchars($current_lang) ?>" dir="<?= $dir ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= t('page-title') ?></title>

    <!-- Font Awesome -->
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
          rel="stylesheet">

    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <style>
        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --primary-light: #818cf8;
            --secondary: #10b981;
            --secondary-dark: #059669;
            --secondary-light: #34d399;
            --accent: #f59e0b;
            --accent-dark: #d97706;
            --accent-light: #fbbf24;
            --dark: #0f172a;
            --darker: #020617;
            --dark-light: #1e293b;
            --dark-lighter: #334155;
            --text: #e2e8f0;
            --text-light: #94a3b8;
            --text-lighter: #cbd5e1;
            --text-white: #ffffff;
            --border: #334155;
            --border-light: #475569;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
            --radius: 20px;
            --radius-sm: 12px;
            --radius-lg: 28px;
            --radius-full: 9999px;
            --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 35px 60px -15px rgba(0, 0, 0, 0.5);
            --shadow-sm: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, #8b5cf6 100%);
            --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 50%, #06b6d4 100%);
            --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 50%, #f97316 100%);
            --gradient-dark: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background: radial-gradient(circle at top, #1e293b 0, #020617 55%);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        body.rtl { direction: rtl; text-align: right; }
        body.ltr { direction: ltr; text-align: left; }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* HEADER */
        .main-header {
            position: fixed;
            inset-inline: 0;
            top: 0;
            z-index: 1000;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--glass-border);
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 0;
            gap: 1rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            text-decoration: none;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            box-shadow: var(--shadow-sm);
        }

        .logo-title {
            font-size: 1.4rem;
            font-weight: 900;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo-subtitle {
            font-size: 0.75rem;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: .14em;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }

        .lang-switch {
            display: inline-flex;
            padding: 0.25rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid var(--glass-border);
        }

        .lang-pill {
            border-radius: 999px;
            padding: 0.25rem 0.75rem;
            font-size: 0.8rem;
            cursor: pointer;
            color: var(--text-light);
            border: none;
            background: transparent;
            transition: var(--transition);
        }

        .lang-pill.active {
            background: var(--gradient-primary);
            color: #fff;
            box-shadow: 0 8px 18px rgba(99, 102, 241, 0.35);
        }

        .nav-btn-main {
            padding: 0.65rem 1.4rem;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--gradient-secondary);
            color: #fff;
            text-decoration: none;
            box-shadow: 0 10px 20px rgba(16, 185, 129, 0.35);
            transition: var(--transition);
            white-space: nowrap;
        }

        .nav-btn-main:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 28px rgba(16, 185, 129, 0.45);
        }

        .mobile-menu {
            display: none;
            font-size: 1.2rem;
            color: var(--text);
            border: none;
            background: transparent;
        }

        /* HERO */
        .hero {
            padding-top: 120px;
            padding-bottom: 40px;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr);
            gap: 2.5rem;
            align-items: center;
        }

        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.35rem 0.8rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            background: rgba(15, 23, 42, 0.8);
            color: var(--text-light);
            font-size: 0.8rem;
            margin-bottom: 1rem;
        }

        .hero-tag i {
            color: var(--primary-light);
        }

        .hero-title {
            font-size: 2.6rem;
            line-height: 1.2;
            font-weight: 900;
            margin-bottom: 1rem;
            background: linear-gradient(120deg, #e5e7eb 0%, #a5b4fc 40%, #38bdf8 80%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        @media (min-width: 1024px) {
            .hero-title {
                font-size: 3.1rem;
            }
        }

        .hero-subtitle {
            font-size: 1rem;
            color: var(--text-light);
            max-width: 32rem;
            margin-bottom: 1.7rem;
        }

        .hero-ctas {
            display: flex;
            flex-wrap: wrap;
            gap: 0.9rem;
            margin-bottom: 2rem;
        }

        .btn {
            padding: 0.9rem 1.8rem;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            text-decoration: none;
            transition: var(--transition);
        }

        .btn-primary {
            background: var(--gradient-primary);
            color: #fff;
            box-shadow: 0 18px 35px rgba(79, 70, 229, 0.5);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 24px 45px rgba(79, 70, 229, 0.7);
        }

        .btn-outline {
            background: rgba(15, 23, 42, 0.9);
            color: var(--text);
            border: 1px solid var(--glass-border);
        }

        .btn-outline:hover {
            background: rgba(30, 64, 175, 0.3);
            border-color: var(--primary-light);
        }

        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .stat-pill {
            min-width: 110px;
            padding: 0.85rem 1rem;
            border-radius: 18px;
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(148, 163, 184, 0.3);
        }

        .stat-number {
            display: block;
            font-weight: 800;
            font-size: 1.3rem;
            color: var(--text-white);
        }

        .stat-label {
            font-size: 0.8rem;
            color: var(--text-light);
        }

        .hero-card {
            position: relative;
            border-radius: 28px;
            overflow: hidden;
            background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.4), transparent 45%),
                        radial-gradient(circle at bottom right, rgba(45, 212, 191, 0.35), transparent 55%),
                        #020617;
            border: 1px solid rgba(148, 163, 184, 0.35);
            box-shadow: var(--shadow-lg);
        }

        .hero-card-inner {
            padding: 1.5rem;
        }

        .hero-card-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.35rem 0.9rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid rgba(148, 163, 184, 0.4);
            color: var(--text-lighter);
            font-size: 0.8rem;
            backdrop-filter: blur(10px);
        }

        .hero-card-main {
            margin-top: 1.5rem;
            padding: 1.25rem 1.1rem;
            border-radius: 22px;
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(148, 163, 184, 0.4);
        }

        .hero-card-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.4rem;
        }

        .hero-card-meta {
            font-size: 0.8rem;
            color: var(--text-light);
            margin-bottom: 1rem;
        }

        .hero-card-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.8rem;
            font-size: 0.8rem;
            color: var(--text-light);
        }

        .hero-card-cta {
            padding: 0.55rem 1.1rem;
            border-radius: 999px;
            background: var(--gradient-primary);
            color: #fff;
            font-weight: 700;
            font-size: 0.8rem;
            text-decoration: none;
            box-shadow: 0 12px 26px rgba(79, 70, 229, 0.55);
            transition: var(--transition);
            white-space: nowrap;
        }

        .hero-card-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 32px rgba(79, 70, 229, 0.7);
        }

        /* SECTIONS */
        .section {
            padding: 10px 0 40px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .section-title {
            font-size: 1.4rem;
            font-weight: 700;
        }

        .section-subtitle {
            font-size: 0.9rem;
            color: var(--text-light);
        }

        .section-actions a {
            font-size: 0.85rem;
            color: var(--primary-light);
            text-decoration: none;
        }

        /* COMPETITION CARDS */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5rem;
        }

        .competition-card {
            background: rgba(15, 23, 42, 0.9);
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.4);
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            transition: var(--transition);
            text-decoration: none;
            color: inherit;
        }

        .competition-card:hover {
            transform: translateY(-4px);
            border-color: var(--primary-light);
            box-shadow: 0 22px 40px rgba(15, 23, 42, 0.8);
        }

        .competition-image {
            position: relative;
            height: 170px;
            overflow: hidden;
        }

        .competition-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .competition-card:hover .competition-image img {
            transform: scale(1.05);
        }

        .competition-badge {
            position: absolute;
            inset-inline-start: 1rem;
            bottom: 1rem;
            padding: 0.3rem 0.9rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(148, 163, 184, 0.6);
            color: var(--text-lighter);
            font-size: 0.8rem;
            backdrop-filter: blur(10px);
        }

        .competition-body {
            padding: 1.2rem 1.2rem 1rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .competition-title {
            font-size: 1rem;
            font-weight: 700;
        }

        .competition-theme {
            font-size: 0.85rem;
            color: var(--primary-light);
        }

        .competition-meta {
            margin-top: 0.3rem;
            font-size: 0.8rem;
            color: var(--text-light);
        }

        .competition-footer {
            margin-top: 0.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.6rem;
        }

        .competition-footer span {
            font-size: 0.8rem;
            color: var(--text-light);
        }

        .competition-footer .cta-row {
            display: flex;
            gap: 0.5rem;
        }

        .small-btn {
            padding: 0.35rem 0.8rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.5);
            background: transparent;
            color: var(--text-lighter);
            font-size: 0.8rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: var(--transition);
        }

        .small-btn.primary {
            background: linear-gradient(120deg, #6366f1, #8b5cf6);
            border-color: transparent;
            color: #fff;
        }

        .small-btn:hover {
            border-color: var(--primary-light);
            background: rgba(30, 64, 175, 0.35);
        }

        .small-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 24px rgba(79, 70, 229, 0.6);
        }

        /* TOP ENTRIES & WINNERS */
        .entry-card,
        .winner-card {
            background: rgba(15, 23, 42, 0.9);
            border-radius: 18px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .entry-image,
        .winner-image {
            height: 160px;
            overflow: hidden;
        }

        .entry-image img,
        .winner-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .entry-body,
        .winner-body {
            padding: 1.1rem;
        }

        .entry-meta,
        .winner-meta {
            font-size: 0.8rem;
            color: var(--text-light);
            margin-top: 0.35rem;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.8rem;
            padding: 0.25rem 0.7rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.5);
            background: rgba(15, 23, 42, 0.9);
        }

        .badge.winner {
            border-color: rgba(234, 179, 8, 0.7);
            color: #facc15;
        }

        /* FOOTER */
        .main-footer {
            border-top: 1px solid var(--border);
            margin-top: 3rem;
            padding: 2.5rem 0 2rem;
            background: rgba(2, 6, 23, 0.95);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-title {
            font-size: 1rem;
            font-weight: 700;
        }

        .footer-links {
            margin-top: 0.8rem;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .footer-links a {
            font-size: 0.85rem;
            color: var(--text-light);
            text-decoration: none;
        }

        .footer-links a:hover {
            color: var(--text-lighter);
        }

        .copyright {
            font-size: 0.8rem;
            text-align: center;
            color: var(--text-light);
            border-top: 1px solid var(--border);
            padding-top: 1.2rem;
        }

        /* RESPONSIVE */
        @media (max-width: 960px) {
            .hero-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .navbar {
                padding-inline: 0.25rem;
            }

            .nav-right {
                display: none;
            }

            .mobile-menu {
                display: block;
            }

            .hero {
                padding-top: 100px;
            }
        }
    </style>
</head>
<body class="<?= $dir ?>">
<header class="main-header">
    <div class="container">
        <div class="navbar">
            <a href="index.html" class="logo">
                <div class="logo-icon">
                    <i class="fas fa-trophy"></i>
                </div>
                <div>
                    <div class="logo-title">GENZGATE</div>
                    <div class="logo-subtitle">Competitions</div>
                </div>
            </a>

            <div class="nav-right">
                <div class="lang-switch">
                    <button class="lang-pill <?= $current_lang === 'en' ? 'active' : '' ?>"
                            onclick="window.location.search='?lang=en'">EN</button>
                    <button class="lang-pill <?= $current_lang === 'ar' ? 'active' : '' ?>"
                            onclick="window.location.search='?lang=ar'">AR</button>
                    <button class="lang-pill <?= $current_lang === 'fa' ? 'active' : '' ?>"
                            onclick="window.location.search='?lang=fa'">FA</button>
                </div>

                <a href="competitions-submit.php?lang=<?= htmlspecialchars($current_lang) ?>"
                   class="nav-btn-main">
                    <i class="fas fa-paper-plane"></i>
                    <?= t('btn-submit-entry') ?>
                </a>
            </div>

            <button class="mobile-menu">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </div>
</header>

<main>
    <!-- HERO -->
    <section class="hero">
        <div class="container">
            <div class="hero-grid">
                <div data-aos="fade-up">
                    <div class="hero-tag">
                        <i class="fas fa-globe-americas"></i>
                        <?= t('section-hero-tag') ?>
                    </div>
                    <h1 class="hero-title"><?= t('hero-title') ?></h1>
                    <p class="hero-subtitle"><?= t('hero-subtitle') ?></p>

                    <div class="hero-ctas">
                        <a href="#active" class="btn btn-primary">
                            <i class="fas fa-rocket"></i>
                            <?= t('btn-get-started') ?>
                        </a>
                        <a href="#top-entries" class="btn btn-outline">
                            <i class="fas fa-fire"></i>
                            <?= t('btn-explore') ?>
                        </a>
                    </div>

                    <div class="hero-stats">
                        <div class="stat-pill">
                            <span class="stat-number"><?= number_format($total_contests) ?></span>
                            <span class="stat-label"><?= t('stats-contests') ?></span>
                        </div>
                        <div class="stat-pill">
                            <span class="stat-number"><?= number_format($total_entries) ?></span>
                            <span class="stat-label"><?= t('stats-entries') ?></span>
                        </div>
                        <div class="stat-pill">
                            <span class="stat-number"><?= number_format($total_countries) ?></span>
                            <span class="stat-label"><?= t('stats-countries') ?></span>
                        </div>
                    </div>
                </div>

                <div data-aos="fade-left">
                    <div class="hero-card">
                        <div class="hero-card-inner">
                            <div class="hero-card-badge">
                                <i class="fas fa-bolt"></i>
                                Weekly Featured Contest
                            </div>
                            <div class="hero-card-main">
                                <div class="hero-card-title">
                                    <?= htmlspecialchars($competitions[0]['title']) ?>
                                </div>
                                <div class="hero-card-meta">
                                    <i class="fas fa-palette"></i>
                                    <?= htmlspecialchars($competitions[0]['theme']) ?> •
                                    <i class="fas fa-clock"></i>
                                    <?= t('ends-on') ?> <?= htmlspecialchars($competitions[0]['ends']) ?>
                                </div>
                                <div class="hero-card-bottom">
                                    <div>
                                        <div style="font-size:0.8rem; color:var(--text-lighter);">
                                            <?= number_format($competitions[0]['entries']) ?> <?= t('entries') ?>
                                        </div>
                                        <div style="font-size:0.75rem; color:var(--text-light);">
                                            <?= number_format($competitions[0]['countries']) ?> <?= t('stats-countries') ?>
                                        </div>
                                    </div>
                                    <a href="competition-details.php?id=<?= $competitions[0]['id'] ?>&lang=<?= htmlspecialchars($current_lang) ?>"
                                       class="hero-card-cta">
                                        <i class="fas fa-arrow-right"></i>
                                        <?= t('enter-now') ?>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ACTIVE COMPETITIONS -->
    <section class="section" id="active">
        <div class="container">
            <div class="section-header">
                <div>
                    <h2 class="section-title"><?= t('active-competitions') ?></h2>
                    <p class="section-subtitle">
                        Weekly and monthly contests open for Gen Z creators worldwide.
                    </p>
                </div>
                <div class="section-actions">
                    <a href="competitions-submit.php?lang=<?= htmlspecialchars($current_lang) ?>">
                        <i class="fas fa-paper-plane"></i>
                        <?= t('btn-submit-entry') ?>
                    </a>
                </div>
            </div>

            <div class="cards-grid">
                <?php foreach ($competitions as $comp): ?>
                    <article class="competition-card" data-aos="fade-up">
                        <div class="competition-image">
                            <img src="<?= htmlspecialchars($comp['image']) ?>"
                                 alt="<?= htmlspecialchars($comp['title']) ?>">
                            <div class="competition-badge">
                                <?= htmlspecialchars($comp['badge']) ?>
                            </div>
                        </div>
                        <div class="competition-body">
                            <h3 class="competition-title">
                                <?= htmlspecialchars($comp['title']) ?>
                            </h3>
                            <div class="competition-theme">
                                <i class="fas fa-hashtag"></i>
                                <?= htmlspecialchars($comp['theme']) ?>
                            </div>
                            <div class="competition-meta">
                                <i class="fas fa-calendar"></i>
                                <?= t('ends-on') ?> <?= htmlspecialchars($comp['ends']) ?> •
                                <i class="fas fa-users"></i>
                                <?= number_format($comp['entries']) ?> <?= t('entries') ?>
                            </div>
                            <div class="competition-footer">
                                <span>
                                    <i class="fas fa-globe"></i>
                                    <?= number_format($comp['countries']) ?> <?= t('stats-countries') ?>
                                </span>
                                <div class="cta-row">
                                    <a href="competition-details.php?id=<?= $comp['id'] ?>&lang=<?= htmlspecialchars($current_lang) ?>"
                                       class="small-btn">
                                        <i class="fas fa-eye"></i>
                                        <?= t('view-details') ?>
                                    </a>
                                    <a href="competitions-submit.php?competition=<?= $comp['id'] ?>&lang=<?= htmlspecialchars($current_lang) ?>"
                                       class="small-btn primary">
                                        <i class="fas fa-paper-plane"></i>
                                        <?= t('enter-now') ?>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- TOP ENTRIES -->
    <section class="section" id="top-entries">
        <div class="container">
            <div class="section-header">
                <div>
                    <h2 class="section-title"><?= t('top-entries') ?></h2>
                    <p class="section-subtitle">
                        Discover the most loved entries and support your favourites.
                    </p>
                </div>
            </div>

            <div class="cards-grid">
                <?php foreach ($top_entries as $entry): ?>
                    <article class="entry-card" data-aos="fade-up">
                        <div class="entry-image">
                            <img src="<?= htmlspecialchars($entry['image']) ?>"
                                 alt="<?= htmlspecialchars($entry['title']) ?>">
                        </div>
                        <div class="entry-body">
                            <div class="badge">
                                <i class="fas fa-fire"></i>
                                <?= htmlspecialchars($entry['contest']) ?>
                            </div>
                            <h3 class="competition-title" style="margin-top:0.6rem;">
                                <?= htmlspecialchars($entry['title']) ?>
                            </h3>
                            <div class="entry-meta">
                                <?= $entry['flag'] ?>
                                <?= htmlspecialchars($entry['author']) ?> •
                                <?= htmlspecialchars($entry['country']) ?>
                                <br>
                                <i class="fas fa-heart"></i> <?= number_format($entry['likes']) ?> likes
                            </div>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- RECENT WINNERS -->
    <section class="section" id="winners">
        <div class="container">
            <div class="section-header">
                <div>
                    <h2 class="section-title"><?= t('recent-winners') ?></h2>
                    <p class="section-subtitle">
                        Congratulations to our latest winners from around the world.
                    </p>
                </div>
            </div>

            <div class="cards-grid">
                <?php foreach ($recent_winners as $winner): ?>
                    <article class="winner-card" data-aos="fade-up">
                        <div class="winner-image">
                            <img src="<?= htmlspecialchars($winner['image']) ?>"
                                 alt="<?= htmlspecialchars($winner['name']) ?>">
                        </div>
                        <div class="winner-body">
                            <div class="badge winner">
                                <i class="fas fa-trophy"></i>
                                <?= t('winner') ?> <?= htmlspecialchars($winner['year']) ?>
                            </div>
                            <h3 class="competition-title" style="margin-top:0.6rem;">
                                <?= htmlspecialchars($winner['name']) ?>
                                <?= $winner['flag'] ?>
                            </h3>
                            <div class="winner-meta">
                                <?= t('from') ?> <?= htmlspecialchars($winner['country']) ?> •
                                <?= t('category') ?>: <?= htmlspecialchars($winner['category']) ?><br>
                                <?= htmlspecialchars($winner['contest']) ?>
                            </div>
                            <div style="margin-top:0.8rem;">
                                <a href="#"
                                   class="small-btn">
                                    <i class="fas fa-user"></i>
                                    <?= t('view-profile') ?>
                                </a>
                            </div>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
</main>

<footer class="main-footer">
    <div class="container">
        <div class="footer-grid">
            <div>
                <div class="footer-title">GENZGATE Competitions</div>
                <p style="margin-top:0.6rem; font-size:0.85rem; color:var(--text-light);">
                    Global platform for Gen Z creators to showcase talent, win prizes, and build their future.
                </p>
            </div>
            <div>
                <div class="footer-title">Quick Links</div>
                <div class="footer-links">
                    <a href="index.html">Home</a>
                    <a href="#active">Competitions</a>
                    <a href="competitions-submit.php?lang=<?= htmlspecialchars($current_lang) ?>">Submit Entry</a>
                    <a href="#winners">Recent Winners</a>
                </div>
            </div>
            <div>
                <div class="footer-title">Contact</div>
                <div class="footer-links">
                    <a href="mailto:info@genzgate.com"><i class="fas fa-envelope"></i> info@genzgate.com</a>
                    <a href="mailto:admin@genzgate.com"><i class="fas fa-envelope-open"></i> admin@genzgate.com</a>
                </div>
            </div>
        </div>

        <div class="copyright">
            &copy; <?= date('Y') ?> GENZGATE Competitions. All rights reserved.
        </div>
    </div>
</footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({duration: 800, once: true});
</script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl505204'},{'dcenter':'p3'},{'cp_id':'10789539'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>