<?php
// Koneksi database
require_once 'admin/config.php';
$conn = connectDB();

// Check if results are allowed to be displayed
$show_results = '0'; // Default to hidden
$status_sql = "SELECT setting_value FROM settings WHERE setting_name = 'show_results'";
$status_result = $conn->query($status_sql);
if ($status_result && $status_result->num_rows > 0) {
    $show_results = $status_result->fetch_assoc()['setting_value'];
}

// Filter cabang lomba
$id_cabang_lomba = isset($_GET['cabang']) ? (int)$_GET['cabang'] : '';

// Array untuk menyimpan peserta per cabang lomba
$pesertaPerCabangLomba = [];

// Only get results if they are set to be visible
if ($show_results == '1') {
    // Query untuk mendapatkan data penilaian
    $sql_base = "SELECT 
                    p.nisn_peserta,
                    CASE 
                        WHEN p.domisili = 'kota' THEN dk.Nama_Peserta 
                        ELSE dkb.Nama_Peserta 
                    END as nama_peserta,
                    CASE 
                        WHEN p.domisili = 'kota' THEN dk.Nama_Sekolah
                        ELSE dkb.Nama_Sekolah
                    END as nama_sekolah,
                    cl.Bidang_Lomba,
                    cl.ID as id_cabang_lomba,
                    AVG(p.total_nilai) as rata_nilai,
                    COUNT(p.id) as jumlah_juri,
                    p.domisili
                FROM 
                    penilaian p
                    LEFT JOIN domisilikota dk ON p.nisn_peserta = dk.NISN AND p.domisili = 'kota'
                    LEFT JOIN domisilikabupaten dkb ON p.nisn_peserta = dkb.NISN AND p.domisili = 'kabupaten'
                    LEFT JOIN cabang_lomba cl ON p.id_cabang_lomba = cl.ID
                WHERE 
                    1=1";

    // Tambahkan filter cabang lomba jika dipilih
    if (!empty($id_cabang_lomba)) {
        $sql_base .= " AND p.id_cabang_lomba = $id_cabang_lomba";
    }

    // Kelompokkan berdasarkan peserta
    $sql_base .= " GROUP BY p.nisn_peserta, p.domisili, cl.ID
                  ORDER BY cl.ID, p.domisili, rata_nilai DESC";

    $result = $conn->query($sql_base);

    // Memasukkan data ke array berdasarkan cabang lomba dan domisili
    if ($result && $result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $cabangLombaId = $row['id_cabang_lomba'];
            $domisiliValue = $row['domisili'];
            // Membuat array cabang lomba jika belum ada
            if (!isset($pesertaPerCabangLomba[$cabangLombaId])) {
                $pesertaPerCabangLomba[$cabangLombaId] = [
                    'nama_cabang' => $row['Bidang_Lomba'],
                    'domisili' => [
                        'kota' => [],
                        'kabupaten' => []
                    ]
                ];
            }
            // Menambahkan peserta ke array berdasarkan domisilinya
            if (strpos(strtolower($domisiliValue), 'kota') !== false) {
                $pesertaPerCabangLomba[$cabangLombaId]['domisili']['kota'][] = $row;
            } else {
                $pesertaPerCabangLomba[$cabangLombaId]['domisili']['kabupaten'][] = $row;
            }
        }
    }
}

// Ambil semua cabang lomba untuk filter
$sql_cabang = "SELECT ID, Bidang_Lomba FROM cabang_lomba ORDER BY Bidang_Lomba";
$result_cabang = $conn->query($sql_cabang);
$cabang_options = [];
if ($result_cabang && $result_cabang->num_rows > 0) {
    while($row = $result_cabang->fetch_assoc()) {
        $cabang_options[] = $row;
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hasil Penilaian FLS3N 2026</title>
    <link rel="shortcut icon" href="assets\logoFLS3N.png" type="image/x-icon">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <style>
        html, body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8fafc;
            scroll-behavior: smooth;
            height: 100%;
            margin: 0;
        }

        /* Wrapper for the entire page content to enable sticky footer */
        .page-wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Minimal height of viewport */
        }

        /* Main content grows to push footer down */
        .content-wrapper {
            flex: 1 0 auto; /* Grow and don't shrink */
        }

        .main-header {
            position: fixed;
            width: 100%;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background: rgba(157, 23, 77, 0.95);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 10;
            top: 0;
            height: 80px;
            padding: 0 2rem;
            box-shadow: 0 4px 20px rgba(157, 23, 77, 0.3);
            transition: all 0.3s ease;
        }

        .main-header:hover {
            background: rgba(157, 23, 77, 1);
        }
        /* Logo styling */
        .logo-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .main-header .logo-container img {
            height: 65px;
            transition: transform 0.3s ease;
        }

        .main-header .logo-container img:hover {
            transform: scale(1.05);
        }

        .main-header .logo img {
            height: 65px;
            transition: transform 0.3s ease;
        }

        .main-header .logo img:hover {
            transform: scale(1.05);
        }

        .main-header .instansi-name {
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 1px;
            background: linear-gradient(90deg, #fff, #f0abfc);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
        }

        .page-title {
            position: relative;
            display: inline-block;
        }

        .page-title::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #8b5cf6, #a78bfa);
            border-radius: 4px;
        }

        .filter-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .result-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .result-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .result-header {
            padding: 1.5rem;
            background: linear-gradient(90deg, #8b5cf6, #a78bfa);
            color: white;
        }

        .medal {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .medal.gold {
            background: linear-gradient(45deg, #ffd700, #f59e0b);
        }

        .medal.silver {
            background: linear-gradient(45deg, #c0c0c0, #9ca3af);
        }

        .medal.bronze {
            background: linear-gradient(45deg, #cd7f32, #d97706);
        }

        .medal.top-10 {
            background: linear-gradient(45deg, #8b5cf6, #a78bfa);
        }

        .student-row {
            transition: all 0.3s ease;
        }

        .student-row:hover {
            background-color: #f8f9fa;
        }

        .student-row.gold {
            background-color: rgba(255, 215, 0, 0.1);
        }

        .student-row.gold:hover {
            background-color: rgba(255, 215, 0, 0.2);
        }

        .student-row.silver {
            background-color: rgba(192, 192, 192, 0.1);
        }

        .student-row.silver:hover {
            background-color: rgba(192, 192, 192, 0.2);
        }

        .student-row.bronze {
            background-color: rgba(205, 127, 50, 0.1);
        }

        .student-row.bronze:hover {
            background-color: rgba(205, 127, 50, 0.2);
        }

        .btn-filter {
            background: linear-gradient(90deg, #8b5cf6, #a78bfa);
            color: white;
            border-radius: 8px;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
        }

        .btn-filter:hover {
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
            transform: translateY(-2px);
        }

        .btn-back {
            background: linear-gradient(90deg, #9d174d, #db2777);
            color: white;
            border-radius: 8px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-back:hover {
            box-shadow: 0 4px 12px rgba(157, 23, 77, 0.3);
            transform: translateY(-2px);
        }

        footer {
            background: linear-gradient(90deg, #9d174d, #be185d);
            color: white;
            text-align: center;
            padding: 1.5rem 0;
            width: 100%;
            box-shadow: 0 -5px 20px rgba(157, 23, 77, 0.2);
            flex-shrink: 0; /* Don't shrink the footer */
        }

        footer p {
            margin: 0;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }

        @media (max-width: 768px) {
            .main-header {
                padding: 0 1rem;
                height: 70px;
            }
            
            .main-header .logo img {
                height: 55px;
            }
            
            .main-header .instansi-name {
                font-size: 22px;
            }
        }

        .fade-in {
            animation: fadeIn 1s ease-in-out;
        }

        .slide-up {
            animation: slideUp 0.8s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        /* For announcement not yet available */
        .not-available-container {
            min-height: 40vh; /* Provide enough space when no results */
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="page-wrapper">
        <header class="main-header">
        <div class="logo-container"> 
            <img src="assets/tutwurii.png" alt="Logo TI Unisbank">
            <img src="assets/unisbank.png" alt="Logo Unisbank">
            <img src="assets/logoFLS3N.png" alt="Logo FLS3N">    
            </div>
            <div class="instansi-name">FLS3N 2026</div>
        </header>
        
        <div class="content-wrapper">
            <div class="container mx-auto px-4 pt-28 pb-16">
                <div class="mb-10 text-center fade-in">
                    <h1 class="page-title text-purple-600 font-bold text-4xl md:text-5xl mb-4">HASIL PENILAIAN LOMBA</h1>
                    <p class="text-gray-600 max-w-2xl mx-auto mt-6">Daftar 10 pemenang terbaik untuk setiap cabang lomba FLS3N 2026. Selamat kepada para peserta yang telah menunjukkan prestasi dan bakat luar biasa!</p>
                </div>
                
                <?php if ($show_results != '1'): ?>
                <!-- Message when results are not yet available -->
                <div class="not-available-container">
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-8 rounded-lg shadow-lg max-w-3xl mx-auto mb-8 slide-up">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 mr-4">
                                <i class="fas fa-clock text-yellow-400 text-4xl"></i>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-yellow-800 mb-2">Pengumuman Belum Tersedia</h3>
                                <p class="text-yellow-700 text-lg mb-2">
                                    Hasil penilaian dan pengumuman pemenang lomba belum dirilis oleh panitia.
                                </p>
                                <p class="text-yellow-600">
                                    Silahkan periksa kembali halaman ini nanti. Terima kasih atas kesabaran Anda.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <?php else: ?>
                <!-- Filter form is only shown when results are available -->
                <div class="filter-card mb-8 slide-up">
                    <form action="" method="get" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="cabang" class="block text-sm font-medium text-gray-700 mb-1">Cabang Lomba</label>
                            <select name="cabang" id="cabang" class="w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200">
                                <option value="">Semua Cabang Lomba</option>
                                <?php foreach($cabang_options as $option): ?>
                                    <option value="<?php echo $option['ID']; ?>" <?php echo (isset($_GET['cabang']) && $_GET['cabang'] == $option['ID']) ? 'selected' : ''; ?>>
                                        <?php echo $option['Bidang_Lomba']; ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div>
                            <label for="domisili" class="block text-sm font-medium text-gray-700 mb-1">Domisili</label>
                            <select name="domisili" id="domisili" class="w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200">
                                <option value="">Semua Domisili</option>
                                <option value="kota" <?php echo (isset($_GET['domisili']) && $_GET['domisili'] == 'kota') ? 'selected' : ''; ?>>Kota</option>
                                <option value="kabupaten" <?php echo (isset($_GET['domisili']) && $_GET['domisili'] == 'kabupaten') ? 'selected' : ''; ?>>Kabupaten</option>
                            </select>
                        </div>
                        <div class="flex items-end">
                            <button type="submit" class="btn-filter">
                                <i class="fas fa-filter mr-2"></i> Filter Hasil
                            </button>
                        </div>
                    </form>
                </div>
                
                <?php if (empty($pesertaPerCabangLomba)): ?>
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-8">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-circle text-yellow-400"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-yellow-700">
                                    Tidak ada data penilaian yang tersedia untuk filter yang dipilih.
                                </p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <div class="grid grid-cols-1 gap-8 slide-up" style="animation-delay: 0.2s">
                    <?php foreach ($pesertaPerCabangLomba as $cabangId => $cabangData): ?>
                        <div class="result-card">
                            <div class="result-header">
                                <h2 class="text-2xl font-bold"><?php echo $cabangData['nama_cabang']; ?></h2>
                            </div>
                            
                            <!-- Kota Semarang Results -->
                            <div class="mt-6 p-6 bg-blue-50 border-l-4 border-blue-500 rounded">
                                <h3 class="text-lg font-semibold text-blue-700 mb-4"><i class="fas fa-city mr-2"></i>Kota Semarang</h3>
                                <div class="overflow-x-auto">
                                    <table class="min-w-full">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Peringkat</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NISN</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Peserta</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sekolah</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nilai</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Juri</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            <?php 
                                            $rank = 1;
                                            $topPesertaKota = array_slice($cabangData['domisili']['kota'] ?? [], 0, 10);
                                            if (empty($topPesertaKota)): 
                                            ?>
                                                <tr>
                                                    <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                                                        Tidak ada data peserta dari Kota Semarang
                                                    </td>
                                                </tr>
                                            <?php
                                            else:
                                                foreach ($topPesertaKota as $index => $peserta): 
                                                    $rowClass = '';
                                                    if ($rank === 1) {
                                                        $rowClass = 'gold';
                                                        $medalClass = 'gold';
                                                        $medalIcon = 'trophy';
                                                    } elseif ($rank === 2) {
                                                        $rowClass = 'silver';
                                                        $medalClass = 'silver';
                                                        $medalIcon = 'medal';
                                                    } elseif ($rank === 3) {
                                                        $rowClass = 'bronze';
                                                        $medalClass = 'bronze';
                                                        $medalIcon = 'medal';
                                                    } else {
                                                        $medalClass = 'top-10';
                                                        $medalIcon = 'award';
                                                    }
                                            ?>
                                                <tr class="student-row <?php echo $rowClass; ?>">
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        <div class="flex items-center">
                                                            <div class="medal <?php echo $medalClass; ?> mr-2">
                                                                <i class="fas fa-<?php echo $medalIcon; ?>"></i>
                                                            </div>
                                                            <span class="font-medium"><?php echo $rank; ?></span>
                                                        </div>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                        <?php echo $peserta['nisn_peserta']; ?>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        <div class="font-medium text-gray-900"><?php echo $peserta['nama_peserta']; ?></div>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                        <?php echo $peserta['nama_sekolah']; ?>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        <div class="text-sm font-semibold text-purple-600">
                                                            <?php echo number_format($peserta['rata_nilai'], 2); ?>
                                                        </div>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                        <?php echo $peserta['jumlah_juri']; ?> Juri
                                                    </td>
                                                </tr>
                                            <?php 
                                                    $rank++;
                                                endforeach;
                                            endif;
                                            ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- Kabupaten Kendal Results -->
                            <div class="mt-8 p-6 bg-amber-50 border-l-4 border-amber-500 rounded">
                                <h3 class="text-lg font-semibold text-amber-700 mb-4"><i class="fas fa-map mr-2"></i>Kabupaten Kendal</h3>
                                <div class="overflow-x-auto">
                                    <table class="min-w-full">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Peringkat</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NISN</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Peserta</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sekolah</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nilai</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Juri</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            <?php 
                                            $rank = 1;
                                            $topPesertaKab = array_slice($cabangData['domisili']['kabupaten'] ?? [], 0, 10);
                                            if (empty($topPesertaKab)): 
                                            ?>
                                                <tr>
                                                    <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                                                        Tidak ada data peserta dari Kabupaten Kendal
                                                    </td>
                                                </tr>
                                            <?php
                                            else:
                                                foreach ($topPesertaKab as $index => $peserta): 
                                                    $rowClass = '';
                                                    if ($rank === 1) {
                                                        $rowClass = 'gold';
                                                        $medalClass = 'gold';
                                                        $medalIcon = 'trophy';
                                                    } elseif ($rank === 2) {
                                                        $rowClass = 'silver';
                                                        $medalClass = 'silver';
                                                        $medalIcon = 'medal';
                                                    } elseif ($rank === 3) {
                                                        $rowClass = 'bronze';
                                                        $medalClass = 'bronze';
                                                        $medalIcon = 'medal';
                                                    } else {
                                                        $medalClass = 'top-10';
                                                        $medalIcon = 'award';
                                                    }
                                            ?>
                                                <tr class="student-row <?php echo $rowClass; ?>">
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        <div class="flex items-center">
                                                            <div class="medal <?php echo $medalClass; ?> mr-2">
                                                                <i class="fas fa-<?php echo $medalIcon; ?>"></i>
                                                            </div>
                                                            <span class="font-medium"><?php echo $rank; ?></span>
                                                        </div>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                        <?php echo $peserta['nisn_peserta']; ?>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        <div class="font-medium text-gray-900"><?php echo $peserta['nama_peserta']; ?></div>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                        <?php echo $peserta['nama_sekolah']; ?>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        <div class="text-sm font-semibold text-purple-600">
                                                            <?php echo number_format($peserta['rata_nilai'], 2); ?>
                                                        </div>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                        <?php echo $peserta['jumlah_juri']; ?> Juri
                                                    </td>
                                                </tr>
                                            <?php 
                                                    $rank++;
                                                endforeach;
                                            endif;
                                            ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
                
                <div class="mt-12 text-center">
                    <a href="index.php" class="btn-back">
                        <i class="fas fa-arrow-left mr-2"></i> Kembali ke Halaman Utama
                    </a>
                </div>
            </div>
        </div>
        
        <footer class="bg-gradient-to-r from-pink-800 to-pink-700 text-white py-8">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center md:items-start justify-between">
            <!-- Logo and Copyright Section -->
            <div class="flex flex-col items-center md:items-start mb-6 md:mb-0">
                <div class="flex items-center gap-2 mb-4">
                    <img src="assets/pkl.png" alt="Logo team" class="h-12">
                    <div class="text-xl font-bold">FTII Unisbank</div>
                </div>
                <p class="text-sm">&copy; 2026 FTII Unisbank. All rights reserved.</p>
                <a href="https://www.unisbank.ac.id/v3/pmb-unisbank/" target="_blank" class="text-white hover:text-pink-200 transition-colors mt-2 flex items-center">
                    <span class="text-sm">PKKMB Unisbank</span>
                    <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                </a>
            </div>
            
            <!-- Our Team Section -->
            <div class="text-center md:text-right">
                <h3 class="text-xl font-bold mb-4 relative inline-block pb-2 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-white after:rounded">Our Team</h3>
                <div class="flex grid-cols-1 gap-2">
                    <a href="https://www.instagram.com/fattahmaulana_" target="_blank" class="flex items-center justify-end gap-2 text-white hover:text-pink-200 transition-colors">
                        
                        <span class="text-sm">@fattahmaulana_</span>
                    </a>
                    <a href="https://www.instagram.com/fxrrel_" target="_blank" class="flex items-center justify-end gap-2 text-white hover:text-pink-200 transition-colors">
                        
                        <span class="text-sm">@fxrrel_</span>
                    </a>
                    <a href="https://instagram.com/_pradit.ya_" target="_blank" class="flex items-center justify-end gap-2 text-white hover:text-pink-200 transition-colors">
                        
                        <span class="text-sm">@pradit.ya_</span>
                    </a>
                    <a href="https://instagram.com/faikk_w" target="_blank" class="flex items-center justify-end gap-2 text-white hover:text-pink-200 transition-colors">
                        
                        <span class="text-sm">@faikk_w</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Smooth scroll animation for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>

<?php $conn->close(); ?>