<?php
// Include any necessary session or database connections here
// session_start();
// include('config.php');
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>FAQ • DanceON 2025</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- Cache control meta tags -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <style>
        :root {
            --primary: #ff006e;
            --primary-dark: #c3005a;
            --secondary: #3a86ff;
            --accent: #ffbe0b;
            --accent2: #8338ec;
            --light: #f8f9fa;
            --dark: #1a1a2e;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #fff5f5 0%, #f0f9ff 100%);
            color: #333;
            overflow-x: hidden;
        }

        .bebas {
            font-family: 'Bebas Neue', cursive;
        }

        .mj-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://static01.nyt.com/images/2022/05/29/arts/29mj-dancer-2/merlin_198901542_0b8dadc5-bd9b-4ce4-b52a-f477f2608abb-mediumSquareAt3X.jpg');
            background-size: cover;
            background-position: center;
            z-index: -2;
            opacity: 0.15;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.9) 100%);
            z-index: -1;
        }

        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .glow-button {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(255, 0, 110, 0.3);
        }

        .glow-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 0, 110, 0.4);
        }

        .glow-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .glow-button:hover::before {
            left: 100%;
        }

        .feature-card {
            background: white;
            border-radius: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

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

        .floating {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.05);
                opacity: 0.8;
            }
        }

        .slide-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .slide-in.active {
            opacity: 1;
            transform: translateY(0);
        }

        .gradient-text {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .dance-bg {
            background: linear-gradient(135deg, #fff5f5 0%, #f0f9ff 50%, #fefce8 100%);
        }

        /* Mobile menu styles */
        .mobile-menu {
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }

        .mobile-menu.active {
            transform: translateX(0);
        }

        /* FAQ specific styles */
        .faq-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .faq-item:hover {
            background-color: rgba(255, 0, 110, 0.05);
        }

        .faq-question {
            cursor: pointer;
            padding: 1.25rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .faq-question:hover {
            color: var(--primary);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
            padding: 0 1.5rem;
        }

        .faq-answer.active {
            max-height: 500px;
            padding: 0 1.5rem 1.25rem;
        }

        .faq-icon {
            transition: transform 0.3s ease;
        }

        .faq-icon.active {
            transform: rotate(180deg);
        }

        .category-btn {
            transition: all 0.3s ease;
        }

        .category-btn:hover {
            transform: translateY(-2px);
        }

        .category-btn.active {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
        }

        .search-box {
            position: relative;
        }

        .search-box input {
            padding-left: 3rem;
        }

        .search-box i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }

        /* Responsive adjustments */
        @media (max-width: 640px) {
            .faq-question {
                padding: 1rem;
                font-size: 0.95rem;
            }

            .faq-answer {
                padding: 0 1rem 1rem;
                font-size: 0.9rem;
            }
        }
    </style>
</head>

<body class="min-h-screen">
    <div class="mj-bg"></div>
    <div class="overlay"></div>

    <!-- Header -->
    <header class="fixed top-0 w-full z-50 glass border-b border-gray-200 shadow-md">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <img src="uploads/images/log.png" alt="DanceON Logo" class="w-10 h-10 rounded-lg shadow-lg">
                        <span class="ml-3 bebas text-2xl text-gray-800">DANCEON</span>
                    </div>
                </div>
                <!-- Mobile menu button -->
                <div class="md:hidden">
                    <button id="mobileMenuBtn" class="text-gray-600 hover:text-pink-600 focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
                <!-- Desktop navigation -->
                <nav class="hidden md:ml-10 md:flex md:space-x-8">
                    <a href="index.html"
                        class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">Home</a>
                    <a href="competitions.php"
                        class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">Competitions</a>
                    <a href="about.php"
                        class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">About</a>
                    <a href="contact.php"
                        class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">Contact</a>
                </nav>
            </div>
        </div>
    </header>

    <!-- Mobile Menu -->
    <div id="mobileMenu" class="mobile-menu fixed top-16 left-0 w-64 h-full bg-white shadow-lg z-40 md:hidden">
        <div class="p-4">
            <nav class="flex flex-col space-y-4">
                <a href="index.html"
                    class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">Home</a>
                <a href="competitions.php"
                    class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">Competitions</a>
                <a href="about.php"
                    class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">About</a>
                <a href="contact.php"
                    class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">Contact</a>
            </nav>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="pt-24 pb-12 dance-bg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="slide-in">
                <h1 class="bebas text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 sm:mb-6">
                    FREQUENTLY ASKED<br>
                    <span class="gradient-text">QUESTIONS</span>
                </h1>
                <p class="text-lg sm:text-xl text-gray-700 mb-8 sm:mb-10 max-w-3xl mx-auto">
                    Find answers to common questions about DanceON competitions
                </p>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-12 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Search Box -->
            <div class="search-box mb-8 slide-in">
                <i class="fas fa-search"></i>
                <input type="text" id="faqSearch" placeholder="Search for questions..."
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500">
            </div>

            <!-- Category Buttons -->
            <div class="flex flex-wrap gap-3 mb-8 justify-center slide-in" style="animation-delay: 0.1s">
                <button class="category-btn px-4 py-2 rounded-full border border-gray-300 text-gray-700 font-medium active"
                    data-category="all">All</button>
                <button class="category-btn px-4 py-2 rounded-full border border-gray-300 text-gray-700 font-medium"
                    data-category="registration">Registration</button>
                <button class="category-btn px-4 py-2 rounded-full border border-gray-300 text-gray-700 font-medium"
                    data-category="competition">Competition</button>
                <button class="category-btn px-4 py-2 rounded-full border border-gray-300 text-gray-700 font-medium"
                    data-category="submission">Submission</button>
                <button class="category-btn px-4 py-2 rounded-full border border-gray-300 text-gray-700 font-medium"
                    data-category="judging">Judging</button>
                <button class="category-btn px-4 py-2 rounded-full border border-gray-300 text-gray-700 font-medium"
                    data-category="prizes">Prizes</button>
            </div>

            <!-- FAQ Items -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden slide-in" style="animation-delay: 0.2s">
                <!-- Registration Questions -->
                <div class="faq-item" data-category="registration">
                    <div class="faq-question">
                        <span>How do I register for DanceON 2025?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Registration is simple! Just click the "REGISTER NOW" button on our homepage and fill out the form. You'll need to provide your personal information, team details (if applicable), and select the competition category you wish to participate in. Once registered, you'll receive a confirmation email with further instructions.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="registration">
                    <div class="faq-question">
                        <span>Is there a registration fee?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Yes, there is a nominal registration fee to participate in DanceON 2025. The fee varies depending on the competition category and whether you're registering as an individual or a team. All fees are clearly displayed during the registration process, and we offer early bird discounts for those who register before the specified deadline.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="registration">
                    <div class="faq-question">
                        <span>Can I register as an individual and as part of a team?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Absolutely! You can register for multiple categories if you wish. Many dancers participate in both solo and team competitions. However, you'll need to complete separate registration forms for each entry and pay the corresponding fees for each category.</p>
                    </div>
                </div>

                <!-- Competition Questions -->
                <div class="faq-item" data-category="competition">
                    <div class="faq-question">
                        <span>What dance styles are accepted in the competition?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>DanceON 2025 welcomes all dance styles! Whether you specialize in hip-hop, ballet, contemporary, jazz, folk, traditional, or fusion styles, there's a place for you. We have specific categories for different styles, as well as an "open" category for fusion and experimental performances.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="competition">
                    <div class="faq-question">
                        <span>What are the age requirements for participants?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>DanceON 2025 has different age categories to ensure fair competition: Junior (under 15), Youth (15-18), Adult (19-35), and Senior (35+). Teams can have mixed ages but will compete in the category of their oldest member. For junior participants, parental consent is required during registration.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="competition">
                    <div class="faq-question">
                        <span>How many members can a team have?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Team sizes vary by category. For most team categories, we require a minimum of 3 members and a maximum of 15. Some specialized categories may have different size requirements, which are detailed in the competition rules. If you have a team outside these parameters, please contact us for special consideration.</p>
                    </div>
                </div>

                <!-- Submission Questions -->
                <div class="faq-item" data-category="submission">
                    <div class="faq-question">
                        <span>How do I submit my performance video?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>After registration, you'll receive access to your participant dashboard where you can upload your performance video. Videos should be in MP4 format, not exceed 5 minutes (unless specified for your category), and be of good quality with clear audio. You'll have a specific submission window, and late submissions may not be accepted.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="submission">
                    <div class="faq-question">
                        <span>Can I edit my submission after uploading?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Yes, you can edit or replace your submission before the submission deadline. Simply log in to your participant dashboard and make the necessary changes. Once the submission deadline passes, no further changes will be allowed, so we recommend finalizing your video well before the deadline.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="submission">
                    <div class="faq-question">
                        <span>What are the technical requirements for the video?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Videos should be recorded in landscape orientation, with good lighting and clear audio. The dancer(s) should be fully visible throughout the performance. We recommend using a stable camera or tripod to avoid shaky footage. Background music should be clear but not overpower the performance. The file size should not exceed 500MB.</p>
                    </div>
                </div>

                <!-- Judging Questions -->
                <div class="faq-item" data-category="judging">
                    <div class="faq-question">
                        <span>How are performances judged?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Performances are evaluated by a panel of experienced dance professionals based on technique, choreography, creativity, expression, and overall presentation. Each category may have specific judging criteria, which are detailed in the competition rules. The judging process is anonymous to ensure fairness.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="judging">
                    <div class="faq-question">
                        <span>When will the results be announced?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Results will be announced during our virtual awards ceremony, which typically takes place 2-3 weeks after the submission deadline. All registered participants will receive an invitation to the ceremony via email. Winners will also be notified individually and announced on our website and social media channels.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="judging">
                    <div class="faq-question">
                        <span>Can I get feedback on my performance?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Yes! All participants will receive a scorecard with general feedback from the judges. For those who want more detailed feedback, we offer a premium feedback service where you can receive personalized comments and suggestions from our judges for an additional fee. This service can be selected during registration.</p>
                    </div>
                </div>

                <!-- Prizes Questions -->
                <div class="faq-item" data-category="prizes">
                    <div class="faq-question">
                        <span>What prizes are awarded to winners?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Prizes vary by category but typically include cash awards, trophies, certificates, and recognition on our platform. The top three performers in each category receive prizes, with special awards for creativity, technique, and audience choice. Some categories also include opportunities for professional development, such as scholarships or performance opportunities.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="prizes">
                    <div class="faq-question">
                        <span>How and when are prizes distributed?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Prizes are distributed within 30 days of the announcement of results. Cash prizes are transferred via bank transfer or digital payment methods, while trophies and certificates are shipped to the winners' registered addresses. Winners will be contacted to confirm their details and preferred payment method.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="prizes">
                    <div class="faq-question">
                        <span>Are there any special recognition opportunities?</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Yes! Beyond the main prizes, we offer special recognition for outstanding performances. These include the "Audience Choice" award (voted by the public), "Rising Star" for exceptional young talent, and "Innovation in Dance" for groundbreaking choreography. Winners of these special awards receive additional recognition and sometimes unique opportunities like features in dance publications or invitations to special events.</p>
                    </div>
                </div>
            </div>

            <!-- No Results Message -->
            <div id="noResults" class="hidden text-center py-12">
                <i class="fas fa-search text-4xl text-gray-300 mb-4"></i>
                <p class="text-xl text-gray-500">No questions found matching your search.</p>
                <p class="text-gray-500 mt-2">Try different keywords or browse by category.</p>
            </div>
        </div>
    </section>

    <!-- Contact Support Section -->
    <section class="py-12 bg-gradient-to-br from-pink-50 to-blue-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="bg-white rounded-3xl p-8 shadow-xl slide-in">
                <h2 class="bebas text-3xl sm:text-4xl font-bold mb-4">STILL HAVE QUESTIONS?</h2>
                <p class="text-lg text-gray-700 mb-6">Our support team is here to help</p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="contact.php"
                        class="glow-button rounded-full px-6 py-3 text-lg font-bold">
                        <i class="fas fa-envelope mr-2"></i> CONTACT SUPPORT
                    </a>
                    <button id="startChat"
                        class="rounded-full border border-gray-300 text-gray-700 px-6 py-3 text-lg font-bold hover:bg-gray-100 transition-colors duration-300">
                        <i class="fas fa-comments mr-2"></i> START CHAT
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="py-8 sm:py-10 md:py-12 bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 sm:gap-8">
                <div class="md:col-span-1">
                    <div class="flex items-center mb-4">
                        <img src="uploads/images/log.png" alt="DanceON Logo" class="w-10 h-10 rounded-lg shadow-lg">
                        <span class="ml-3 bebas text-2xl text-white">DANCEON</span>
                    </div>
                    <p class="text-gray-400 text-sm">The ultimate online dance competition platform</p>
                </div>

                <div class="md:col-span-1">
                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition text-sm">Home</a></li>
                        <li><a href="competitions.php"
                                class="text-gray-400 hover:text-white transition text-sm">Competitions</a></li>
                        <li><a href="about.php" class="text-gray-400 hover:text-white transition text-sm">About Us</a>
                        </li>
                        <li><a href="contact.php" class="text-gray-400 hover:text-white transition text-sm">Contact</a>
                        </li>
                    </ul>
                </div>

                <div class="md:col-span-1">
                    <h3 class="text-lg font-semibold mb-4">Resources</h3>
                    <ul class="space-y-2">
                        <li><a href="faq.php" class="text-gray-400 hover:text-white transition text-sm">FAQ</a></li>
                        <li><a href="rules.php" class="text-gray-400 hover:text-white transition text-sm">Rules</a></li>
                        <li><a href="terms.php" class="text-gray-400 hover:text-white transition text-sm">Terms &
                                Conditions</a>
                        </li>
                        <li><a href="privacy.php" class="text-gray-400 hover:text-white transition text-sm">Privacy &
                                Policy</a>
                        </li>
                    </ul>
                </div>

                <div class="md:col-span-1">
                    <h3 class="text-lg font-semibold mb-4">Follow Us</h3>
                    <div class="flex space-x-4">
                        <a href="https://www.instagram.com/the_danceon/?igsh=Y25wNDZrdzQzeXdl#"
                            class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
                            <i class="fab fa-facebook-f text-white"></i>
                        </a>
                        <a href="https://www.instagram.com/the_danceon/?igsh=Y25wNDZrdzQzeXdl#"
                            class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
                            <i class="fab fa-instagram text-white"></i>
                        </a>
                        <a href="https://www.instagram.com/the_danceon/?igsh=Y25wNDZrdzQzeXdl#"
                            class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
                            <i class="fab fa-twitter text-white"></i>
                        </a>
                        <a href="#"
                            class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
                            <i class="fab fa-youtube text-white"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-500">
                <p class="text-sm">&copy; 2025 DanceON. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Competitions Popup (Toast) -->
    <div id="compsToast" class="fixed z-40 left-1/2 -translate-x-1/2 bottom-4 w-[92%] max-w-sm px-4 py-4 rounded-2xl shadow-2xl bg-white
              opacity-0 translate-y-3 pointer-events-none transition-all duration-500">
        <div class="flex items-center gap-3">
            <div
                class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-pink-600 to-purple-600 flex items-center justify-center shadow-xl">
                <i class="fas fa-trophy text-white text-2xl"></i>
            </div>
            <div class="flex-1">
                <div class="font-bold text-gray-900 text-lg mb-1">Explore Competitions</div>
                <div class="text-gray-600 mb-3">Find open events and register in seconds.</div>
                <div class="flex gap-2">
                    <a href="competitions.php" class="glow-button rounded-full px-4 py-3 text-sm font-bold">
                        <i class="fas fa-search mr-2"></i> View Competitions
                    </a>
                    <button id="dismissComps"
                        class="rounded-full border border-gray-300 text-gray-700 px-4 py-3 text-sm hover:bg-gray-100 transition-colors duration-300">Dismiss</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Floating FAB to reopen the popup -->
    <button id="fabComps" class="fixed z-30 bottom-4 right-4 w-14 h-14 sm:w-16 sm:h-16 rounded-full glow-button text-white shadow-2xl flex items-center justify-center text-2xl sm:text-3xl
                 active:scale-95 transition-all duration-300 pulse" aria-label="Open Competitions">
        <i class="fas fa-trophy"></i>
    </button>

    <script>
        // Mobile menu toggle
        document.addEventListener('DOMContentLoaded', () => {
            const mobileMenuBtn = document.getElementById('mobileMenuBtn');
            const mobileMenu = document.getElementById('mobileMenu');

            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('active');
            });

            // Close mobile menu when clicking outside
            document.addEventListener('click', (e) => {
                if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
                    mobileMenu.classList.remove('active');
                }
            });

            // Close mobile menu when clicking on a link
            mobileMenu.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', () => {
                    mobileMenu.classList.remove('active');
                });
            });
        });

        // Slide-in animations
        document.addEventListener('DOMContentLoaded', () => {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('active');
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.slide-in').forEach(el => {
                observer.observe(el);
            });
        });

        // FAQ Accordion
        document.addEventListener('DOMContentLoaded', () => {
            const faqItems = document.querySelectorAll('.faq-item');
            
            faqItems.forEach(item => {
                const question = item.querySelector('.faq-question');
                const answer = item.querySelector('.faq-answer');
                const icon = item.querySelector('.faq-icon');
                
                question.addEventListener('click', () => {
                    answer.classList.toggle('active');
                    icon.classList.toggle('active');
                });
            });
        });

        // Category Filter
        document.addEventListener('DOMContentLoaded', () => {
            const categoryBtns = document.querySelectorAll('.category-btn');
            const faqItems = document.querySelectorAll('.faq-item');
            const noResults = document.getElementById('noResults');
            
            categoryBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    // Update active button
                    categoryBtns.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    
                    const category = btn.getAttribute('data-category');
                    let hasResults = false;
                    
                    // Filter FAQ items
                    faqItems.forEach(item => {
                        if (category === 'all' || item.getAttribute('data-category') === category) {
                            item.style.display = 'block';
                            hasResults = true;
                        } else {
                            item.style.display = 'none';
                        }
                    });
                    
                    // Show/hide no results message
                    if (hasResults) {
                        noResults.classList.add('hidden');
                    } else {
                        noResults.classList.remove('hidden');
                    }
                });
            });
        });

        // Search Functionality
        document.addEventListener('DOMContentLoaded', () => {
            const searchInput = document.getElementById('faqSearch');
            const faqItems = document.querySelectorAll('.faq-item');
            const noResults = document.getElementById('noResults');
            
            searchInput.addEventListener('input', () => {
                const searchTerm = searchInput.value.toLowerCase();
                let hasResults = false;
                
                faqItems.forEach(item => {
                    const question = item.querySelector('.faq-question span').textContent.toLowerCase();
                    const answer = item.querySelector('.faq-answer p').textContent.toLowerCase();
                    
                    if (question.includes(searchTerm) || answer.includes(searchTerm)) {
                        item.style.display = 'block';
                        hasResults = true;
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                // Show/hide no results message
                if (hasResults) {
                    noResults.classList.add('hidden');
                } else {
                    noResults.classList.remove('hidden');
                }
            });
        });

        // Competitions popup show/hide + auto-fade
        const compsToast = document.getElementById('compsToast');
        const fabComps = document.getElementById('fabComps');
        const dismissBtn = document.getElementById('dismissComps');
        let toastTimer;

        function showCompsToast(autoHideMs = 4500) {
            compsToast.classList.remove('opacity-0', 'translate-y-3', 'pointer-events-none');
            compsToast.classList.add('opacity-100', 'translate-y-0');
            clearTimeout(toastTimer);
            if (autoHideMs) {
                toastTimer = setTimeout(hideCompsToast, autoHideMs);
            }
        }
        function hideCompsToast() {
            compsToast.classList.add('opacity-0', 'translate-y-3', 'pointer-events-none');
            compsToast.classList.remove('opacity-100', 'translate-y-0');
        }

        // Auto show on first load
        window.addEventListener('load', () => showCompsToast(4500));
        fabComps.addEventListener('click', () => showCompsToast(0)); // persistent until user dismisses
        dismissBtn.addEventListener('click', hideCompsToast);

        // Start Chat Button
        document.getElementById('startChat').addEventListener('click', () => {
            // This would typically open the Tawk.to chat widget
            if (typeof Tawk_API !== 'undefined') {
                Tawk_API.maximize();
            }
        });
    </script>
    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
        var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
        (function () {
            var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
            s1.async = true;
            s1.src = 'https://embed.tawk.to/68da8de9e00564194d2585f8/1j6arkmf6';
            s1.charset = 'UTF-8';
            s1.setAttribute('crossorigin', '*');
            s0.parentNode.insertBefore(s1, s0);
        })();
    </script>
    <!--End of Tawk.to Script-->
</body>

</html>