// Global getWaiverContent function for waiver system compatibility
function getWaiverContent($pdo) {
    try {
        $stmt = $pdo->prepare("SELECT waiver_content FROM site_settings WHERE setting_name = 'current_waiver' LIMIT 1");
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($result && !empty($result['waiver_content'])) {
            return $result['waiver_content'];
        }
    } catch (Exception $e) {
        error_log("Error fetching waiver content: " . $e->getMessage());
    }
    
    // Default waiver content
    return "PARTICIPANT AGREEMENT, LIABILITY WAIVER, AND MEDIA RELEASE

In consideration of permitting the minor child named above (the 'Participant') to participate in physical education programs, sports activities, training, camps, and related events (collectively, the 'Activities') provided by SpartanMonks PE (the 'Organization'), located in or serving Gilbert, Arizona, I, the undersigned parent or legal guardian ('Parent/Guardian'), hereby acknowledge, agree, and certify as follows:

1. Description of Activities and Acknowledgment of Risks
I understand that the Activities involve physical exertion and may include, but are not limited to, running, jumping, throwing, catching, calisthenics, strength and conditioning exercises, agility drills, obstacle courses, various sports skills practice, use of equipment, and interactive games. I acknowledge that participation in these Activities involves inherent risks, dangers, and hazards. These risks include, but are not limited to:
• Minor injuries such as scratches, bruises, blisters, and muscle soreness.
• More serious injuries such as sprains, strains, fractures, dislocations, and concussions.
• Cardiovascular events, heat exhaustion, dehydration, or other conditions related to physical exertion.
• Injuries resulting from falls, collisions with other participants or objects, or equipment malfunction.
• Other unforeseen accidents or injuries that may result in significant harm, permanent disability, or even death.

I understand that the Organization will implement safety measures, but these risks cannot be entirely eliminated.

2. Assumption of Risk
I, on my own behalf and on behalf of the Participant, knowingly and voluntarily assume all risks and responsibilities associated with the Participant's participation in the Activities, including those risks described above, as well as any risks not specifically listed, whether caused by the negligence of the Released Parties (defined below) or otherwise (to the extent permitted by Arizona law).

3. Waiver and Release of Liability
To the fullest extent permitted by Arizona law, I, on my own behalf and on behalf of the Participant, and our respective heirs, assigns, administrators, and executors, hereby release, waive, discharge, and covenant not to sue SpartanMonks PE, its owners, officers, directors, employees, coaches, volunteers, agents, representatives, contractors, successors, and assigns, as well as the owners or lessors of premises used for the Activities (collectively, the 'Released Parties'), from any and all liability, claims, demands, actions, causes of action, losses, or damages of any kind whatsoever arising out of or related to any loss, damage, or injury, including death, that may be sustained by the Participant or any property belonging to us, while participating in the Activities, or while on the premises where the Activities are being conducted. This release includes claims based on the alleged negligence of the Released Parties, but does not release claims based on gross negligence or willful misconduct (as defined under Arizona law).

4. Indemnification
I agree to indemnify, defend, and hold harmless the Released Parties from and against any and all claims, liabilities, damages, losses, costs, and expenses (including reasonable attorneys' fees) arising out of or resulting from any injury, loss, or damage sustained by any third party caused by the Participant's actions or participation in the Activities.

5. Participant's Health and Medical Authorization
I certify that the Participant is in good physical health and has no known medical conditions that would prevent safe participation in the Activities, other than those conditions (if any) fully disclosed in writing during the registration process. I acknowledge my responsibility to inform the Organization in writing of any changes to the Participant's health status. In the event of a medical emergency during the Activities, if I cannot be reached, I authorize the Organization's staff or representatives to seek and consent to emergency medical treatment (including transport) for the Participant as deemed necessary by qualified medical personnel. I agree to be responsible for all costs associated with such medical treatment.

6. Photographic and Media Release
I grant the Organization the irrevocable right and permission to photograph, videotape, record, or otherwise capture the likeness and/or voice of the Participant during the Activities, and to use such images, videos, or recordings (including the Participant's name, if desired) in promotional materials, marketing efforts, websites, social media, and other publications related to the Organization, without further notice or compensation. I waive any right to inspect or approve the finished product. If I do NOT consent to this, I will notify the Organization in writing via email prior to the start of the Activities.

7. Governing Law and Severability
This Agreement shall be governed by and construed in accordance with the laws of the State of Arizona, without regard to its conflict of law principles. If any provision of this Agreement is found to be invalid or unenforceable, the remaining provisions shall continue to be valid and enforceable to the fullest extent permitted by law.

8. Acknowledgment of Understanding
I have read this Participant Agreement, Liability Waiver, and Media Release carefully and fully understand its terms. I understand that I am giving up substantial legal rights, including the right to sue the Released Parties for certain claims, on my own behalf and on behalf of the Participant listed above. I confirm my agreement to these terms by signing below, which I do freely, voluntarily, and without inducement.";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Join Our Team - Job Opportunities</title>
    <meta name="description" content="Join SpartanMonks PE as a coach and help build the next generation of confident, skilled young athletes. Discover our coaching opportunities and apply today.">

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.81.0/dist/L.Control.Locate.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-fullscreen@1.0.2/dist/leaflet.fullscreen.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-geosearch@3.11.0/dist/geosearch.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />

    <link rel="stylesheet" href="css/styles.css"> 
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.81.0/dist/L.Control.Locate.min.js" defer></script>
    <script src='https://unpkg.com/leaflet-fullscreen@1.0.2/dist/Leaflet.fullscreen.min.js' defer></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet-geosearch@3.11.0/dist/geosearch.umd.js" defer></script>
    
    <script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
    <script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>

    <!-- Main App JavaScript - contains cart functionality and other core features -->
    <script src="js/app.js" defer></script>

    <script src="/js/cart-sidebar-functions.js?v=1751433029"></script><script>
    // Global function to ensure proceedToCheckout is available
    if (typeof proceedToCheckout !== "function") {
        proceedToCheckout = function() {
            console.log("Global fallback proceedToCheckout called");
            if (typeof window.loadSidebarContent === "function") {
                window.loadSidebarContent("sidebar-checkout.php?checkout=true", "checkout");
            } else {
                window.location.href = "checkout.php";
            }
        };
    }
    </script>
    <!-- Fallback cart functionality in case app.js doesn't load properly -->
    <script>
    // Ensure cart functions are available as fallback
    window.addEventListener('DOMContentLoaded', function() {
        // Fallback cart toggle function if app.js doesn't load
        if (typeof window.toggleCart !== 'function') {
            window.toggleCart = function(event) {
                console.log("Fallback toggleCart called");
                if (event) event.preventDefault();
                
                // Try to load cart sidebar
                const sidebarContainer = document.getElementById('sidebar-container');
                const sidebarContent = document.getElementById('sidebar-content');
                
                if (sidebarContainer && sidebarContent) {
                    fetch('sidebar-b.php')
                        .then(response => response.text())
                        .then(html => {
                            sidebarContent.innerHTML = html;
                            sidebarContainer.classList.remove('translate-x-full');
                            document.body.style.overflow = 'hidden';
                        })
                        .catch(err => {
                            console.error('Error loading cart:', err);
                            // Fallback to a different page if sidebar fails
                            window.location.href = 'dashboard.php';
                        });
                } else {
                    // No sidebar available, redirect to dashboard
                    console.log("No sidebar available, redirecting to dashboard");
                    window.location.href = 'dashboard.php';
                }
            };
        }
        
        // Ensure proceedToCheckout is available
        if (typeof window.proceedToCheckout !== 'function') {
            window.proceedToCheckout = function() {
                console.log("Fallback proceedToCheckout called");
                if (typeof window.toggleCart === 'function') {
                    window.toggleCart();
                } else {
                    window.location.href = 'checkout.php';
                }
            };
        }
    });
    </script>

    <script>
      window.APP_STATE = {
        isLoggedIn: false,
        userName: "",
        userRole: ""      };
    </script>
</head><!-- Inline critical CSS for header to ensure logo appears immediately -->
<style>
.site-header {
    background: linear-gradient(to right, #111827, #1f2937);
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.header-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.site-logo {
    height: 62.5px; /* Increased by 25% from 50px */
    width: auto;
    display: block;
    object-fit: contain;
}
/* Profile image styles */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4b5563;
    border: 2px solid #a855f7;
    transition: all 0.3s ease;
    position: relative;
}
.user-avatar:hover {
    transform: scale(1.05);
    border-color: #c084fc;
}
.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

/* Mobile profile image */
.mobile-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4b5563;
    border: 2px solid #a855f7;
    margin-right: 12px;
    position: relative;
    transition: transform 0.2s ease;
}
.mobile-user-avatar:hover {
    transform: scale(1.05);
}
.mobile-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

/* Add a subtle cycling indicator */
.user-avatar::after, .mobile-user-avatar::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #8b5cf6;
    border: 2px solid white;
    border-radius: 50%;
    opacity: 0.8;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
}

/* Show cycling indicator only when multiple actual images available */
.user-avatar::after, .mobile-user-avatar::after {
    display: none;
}
</style>

<header class="site-header">
    <div class="header-container">
        <div class="logo-section">
            <a href="index.php" onclick="localStorage.setItem('activateTab', 'welcome');"" class="logo-link" aria-label="SpartanMonks PE Home">
                <!-- Fixed logo path using relative URL -->
                <img class="site-logo" src="image/logo.png" 
                     alt="SpartanMonks PE - Colorful Logo with Spartan Helmet" 
                     style="display:block; height:62.5px; width:auto; max-width:100%;" 
                     onerror="this.onerror=null; this.src='image/logo.png'; console.log('Fallback to logo.png');">
                
                <!-- Fallback text in case image doesn't load -->
                <noscript>SpartanMonks PE</noscript>
            </a>
            <div id="rotating-quote" class="site-quote hidden md:block"></div>
        </div>

        <!-- Desktop Navigation -->
        <nav class="desktop-nav">
            <a href="index.php" onclick="localStorage.setItem('activateTab', 'welcome');" class="nav-link">Welcome</a>

            <div class="nav-item dropdown">
                <button type="button" class="nav-link" aria-expanded="false">
                    Resources <i class="fas fa-chevron-down"></i>
                </button>
                <div class="dropdown-content hidden">
                    <a href="Physical Arts.php" class="dropdown-link">Physical Arts</a>
                    <a href="child-development.php" class="dropdown-link">Child Development</a>
                    <a href="job-opportunities.php" class="dropdown-link">Job Opportunities</a>
                    <a href="index.php" onclick="localStorage.setItem('activateTab', 'contact');"" class="dropdown-link">Contact Us</a>
                </div>
            </div>

            <a href="store.php" class="nav-link">Store</a>
                            <a href="#" onclick="openLoginSidebar(); return false;" class="nav-link">Dashboard</a>
                        
                            <a href="#" onclick="openLoginSidebar(); return false;" class="nav-button">Book a Class</a>
            
            <button type="button" id="cart-button-desktop" class="cart-button" aria-label="Open cart">
                <i class="fas fa-shopping-cart"></i>
                <span id="cart-item-count-desktop" class="cart-count hidden">
                    0                </span>
            </button>

            <div class="auth-section">
                                    <a href="#" id="login-link-desktop" class="nav-link">Login</a>
                            </div>
        </nav>

        <!-- Mobile Navigation Controls -->
        <div class="mobile-controls">
            <button type="button" id="cart-button-mobile-header" class="cart-button" aria-label="Open cart">
                <i class="fas fa-shopping-cart"></i>
                <span id="cart-item-count-mobile-header" class="cart-count hidden">
                    0                </span>
            </button>
            <button id="menuToggle" class="menu-toggle" aria-controls="mobileNav" aria-expanded="false">
                <i class="fas fa-bars open-icon"></i>
                <i class="fas fa-times close-icon hidden"></i>
            </button>
        </div>
    </div>

    <!-- Mobile Navigation Menu -->
    <div id="mobileNav" class="mobile-nav hidden">
        <a href="index.php" onclick="localStorage.setItem('activateTab', 'welcome');" class="mobile-nav-link">Welcome</a>
        
        <div class="mobile-nav-group">
            <span class="mobile-nav-heading">Resources:</span> 
            <a href="Physical Arts.php" class="mobile-nav-sublink">Physical Arts</a>
            <a href="child-development.php" class="mobile-nav-sublink">Child Development</a>
            <a href="job-opportunities.php" class="mobile-nav-sublink">Job Opportunities</a>
            <a href="index.php" onclick="localStorage.setItem('activateTab', 'contact');"" class="mobile-nav-sublink">Contact Us</a>
        </div>

        <a href="store.php" class="mobile-nav-link">Store</a>
                    <a href="#" onclick="openLoginSidebar(); return false;" class="mobile-nav-link">Dashboard</a>
                            <a href="#" onclick="openLoginSidebar(); return false;" class="mobile-nav-link mobile-cta">Book a Class</a>
        
        <div class="mobile-auth-section">
                            <a href="#" id="login-link-mobile" class="mobile-nav-link">Login</a>
                    </div>
        
        <div class="mobile-cart-section">
            <a href="#" id="cart-button-mobile-menu" class="mobile-nav-link">
                <i class="fas fa-shopping-cart fa-fw"></i> Cart
                <span id="cart-item-count-mobile-menu" class="mobile-cart-count hidden">
                    0                </span>
            </a>
        </div>
    </div>
</header>

<style>
/* Enhanced header styles */
.site-header {
    background: linear-gradient(to right, #111827, #1f2937);
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-logo {
    height: 50px;
    width: auto;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.site-logo:hover {
    transform: scale(1.1);
}

.site-quote {
    font-size: 0.9rem;
    color: #a1a1aa;
    font-style: italic;
    max-width: 300px;
    margin-left: 1rem;
    opacity: 0.9;
}

/* Desktop Navigation */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: #e4e4e7;
    font-weight: 500;
    padding: 0.5rem 0;
    display: inline-block;
    text-decoration: none;
    position: relative;
    transition: color 0.2s, transform 0.2s;
}

.nav-link:hover {
    color: #c084fc;
    transform: translateY(-1px);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #a855f7;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.nav-link:hover::after {
    visibility: visible;
    width: 100%;
}

.nav-button {
    background: linear-gradient(135deg, #a855f7, #8b5cf6);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 0.375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(139, 92, 246, 0.3);
}

.nav-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, #9333ea, #7c3aed);
}

/* Dropdown styling */
.dropdown {
    position: relative;
}

.dropdown button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #e4e4e7;
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    z-index: 50;
    overflow: hidden;
    display: none;
}

.dropdown-content.hidden {
    display: none;
}

.dropdown button[aria-expanded="true"] + .dropdown-content {
    display: block;
}

/* Show dropdown when not hidden */
.dropdown-content:not(.hidden) {
    display: block;
}

.dropdown-link {
    display: block;
    padding: 0.75rem 1rem;
    color: #e4e4e7;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    border-left: 3px solid transparent;
}

.dropdown-link:hover {
    background-color: #2d3748;
    color: #c084fc;
    border-left-color: #a855f7;
}

.dropdown-right {
    left: auto;
    right: 0;
}

/* User menu */
.user-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #e4e4e7;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.user-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #a855f7, #8b5cf6);
    border-radius: 50%;
    color: white;
}

.user-name {
    font-weight: 500;
}

/* Cart button */
.cart-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #e4e4e7;
    font-size: 1.15rem;
    transition: color 0.2s, transform 0.2s;
}

.cart-button:hover {
    color: #c084fc;
    transform: translateY(-1px);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #a855f7;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Mobile navigation */
.mobile-controls {
    display: none;
}

.menu-toggle {
    background: none;
    border: none;
    color: #e4e4e7;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}

.menu-toggle:hover {
    color: #c084fc;
}

.mobile-nav {
    position: fixed;
    top: 74px; /* Height of header + border */
    left: 0;
    right: 0;
    bottom: 0;
    background: #111827;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    z-index: 49;
    overflow-y: auto;
    border-top: 1px solid #2d3748;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-nav.hidden {
    pointer-events: none;
}

#mobileNav:not(.hidden) {
    transform: translateX(0);
}

.mobile-nav-link {
    display: block;
    padding: 1rem;
    color: #e4e4e7;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s, color 0.2s;
}

.mobile-nav-link:hover {
    background-color: #2d3748;
    color: #c084fc;
}

.mobile-nav-group {
    margin: 0.5rem 0 1rem;
    padding: 0.75rem;
    background-color: rgba(45, 55, 72, 0.3);
    border-radius: 0.375rem;
}

.mobile-nav-heading {
    display: block;
    font-weight: 600;
    color: #a1a1aa;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.mobile-nav-sublink {
    display: block;
    padding: 0.75rem 1rem;
    color: #e4e4e7;
    text-decoration: none;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    transition: background-color 0.2s, color 0.2s;
}

.mobile-nav-sublink:hover {
    background-color: #374151;
    color: #c084fc;
}

.mobile-cta {
    background: linear-gradient(135deg, #a855f7, #8b5cf6);
    color: white !important;
    font-weight: 600;
    text-align: center;
    margin: 1rem 0;
}

.mobile-cta:hover {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
}

.mobile-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background-color: #a855f7;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 0.5rem;
    padding: 0 6px;
}

.logout-link {
    color: #f87171 !important;
}

.logout-link:hover {
    background-color: rgba(248, 113, 113, 0.1);
}

/* Media queries */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    
    .mobile-controls {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .site-quote {
        display: none;
    }
    
    .site-logo {
        height: 50px; /* Updated for mobile - 25% larger than previous 40px */
    }
    
    .header-container {
        padding: 0 0.5rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Rotating quote functionality
    const quotes = [
        "Strength in Discipline, Freedom in Movement",
        "Life is meant to be danced, not marched.",
        "True mastery comes from joyful practice and relentless curiosity.",
        "Discipline isn't freedom—it's freedom. Freedom to grow, learn, and explore your potential.",
        "Move at Your Own Pace—Go Further",
        "Inspired by Wisdom, Fueled by Fun"
    ];

    const quoteElement = document.getElementById('rotating-quote');
    if (quoteElement) {
        let currentQuoteIndex = Math.floor(Math.random() * quotes.length);
        quoteElement.textContent = quotes[currentQuoteIndex];
        
        setInterval(() => {
            currentQuoteIndex = (currentQuoteIndex + 1) % quotes.length;
            // Add fade effect to quote changes
            quoteElement.style.opacity = '0';
            setTimeout(() => {
                quoteElement.textContent = quotes[currentQuoteIndex];
                quoteElement.style.opacity = '1';
            }, 500);
        }, 8000);
    }

    // Mobile menu toggle
    const menuToggle = document.getElementById('menuToggle');
    const mobileNav = document.getElementById('mobileNav');
    if (menuToggle && mobileNav) {
        menuToggle.addEventListener('click', function() {
            const expanded = this.getAttribute('aria-expanded') === 'true';
            this.setAttribute('aria-expanded', !expanded);
            
            if (expanded) {
                mobileNav.classList.add('hidden');
                menuToggle.querySelector('.open-icon').classList.remove('hidden');
                menuToggle.querySelector('.close-icon').classList.add('hidden');
            } else {
                mobileNav.classList.remove('hidden');
                menuToggle.querySelector('.open-icon').classList.add('hidden');
                menuToggle.querySelector('.close-icon').classList.remove('hidden');
            }
        });
    }

    // Dropdown functionality
    const dropdowns = document.querySelectorAll('.dropdown');
    dropdowns.forEach(dropdown => {
        const button = dropdown.querySelector('button');
        const content = dropdown.querySelector('.dropdown-content');
        
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Close all other dropdowns
            document.querySelectorAll('.dropdown button[aria-expanded="true"]').forEach(openButton => {
                if (openButton !== button) {
                    openButton.setAttribute('aria-expanded', 'false');
                    openButton.closest('.dropdown').querySelector('.dropdown-content').classList.add('hidden');
                }
            });
            
            // Toggle this dropdown
            const isExpanded = button.getAttribute('aria-expanded') === 'true';
            button.setAttribute('aria-expanded', !isExpanded);
            content.classList.toggle('hidden');
        });
        
        // Add click events to all links in the dropdown
        content.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', function() {
                button.setAttribute('aria-expanded', 'false');
                content.classList.add('hidden');
                
                // If the link has specific callback functions (like showTab)
                if (this.getAttribute('onclick')) {
                    closeMobileMenu();
                }
            });
        });
    });

    // Close dropdowns when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.dropdown')) {
            document.querySelectorAll('.dropdown button[aria-expanded="true"]').forEach(button => {
                button.setAttribute('aria-expanded', 'false');
                button.closest('.dropdown').querySelector('.dropdown-content').classList.add('hidden');
            });
        }
    });

    // Set up cart button event handlers
    const cartButtons = document.querySelectorAll('[id^="cart-button-"]');
    cartButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            openCartSidebar(e);
            closeMobileMenu();
        });
    });

    // Handle dashboard link clicks
    const dashboardLinks = document.querySelectorAll('#dashboard-link-dropdown, #dashboard-link-mobile');
    dashboardLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            if ($isLoggedIn) {
                window.location.href = 'dashboard.php';
            } else {
                openLoginSidebar();
                closeMobileMenu();
            }
        });
    });

    // Handle logout link clicks
    const logoutLinks = document.querySelectorAll('#logout-link-dropdown, #logout-link-mobile');
    logoutLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            window.location.href = 'logout.php';
        });
    });

    // Handle login link clicks
    const loginLinks = document.querySelectorAll('#login-link-desktop, #login-link-mobile');
    loginLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            if (window.openLoginSidebar && typeof window.openLoginSidebar === 'function') {
                window.openLoginSidebar(e);
                closeMobileMenu();
            } else {
                console.error('Login sidebar functionality not available. Make sure window.openLoginSidebar is defined in app.js');
                // Fallback to the standard login page if sidebar function isn't available
                window.location.href = 'login.php';
            }
        });
    });

    // Close mobile menu - utility function
    function closeMobileMenu() {
        if (menuToggle && mobileNav) {
            menuToggle.setAttribute('aria-expanded', 'false');
            mobileNav.classList.add('hidden');
            menuToggle.querySelector('.open-icon').classList.remove('hidden');
            menuToggle.querySelector('.close-icon').classList.add('hidden');
        }
    }

    // Function to open the cart sidebar - needed for cart button functionality
    function openCartSidebar(e) {
        if (e) e.preventDefault();
        
        // Use unified cart for all pages
        if (window.loadSidebarContent && typeof window.loadSidebarContent === 'function') {
            window.loadSidebarContent('sidebar-cart.php', 'cart');
            return;
        }
        
        // Fallback to regular cart functionality
        if (window.toggleCart && typeof window.toggleCart === 'function') {
            window.toggleCart(e);
        } else {
            console.error('Cart functionality not available. Make sure window.toggleCart is defined in app.js');
            // For debugging - log global functions
            console.log('Available global functions:', Object.keys(window).filter(key => typeof window[key] === 'function'));
        }
    }

    // Add page load animation
    document.querySelector('.site-header').style.opacity = '0';
    setTimeout(() => {
        document.querySelector('.site-header').style.transition = 'opacity 0.5s ease';
        document.querySelector('.site-header').style.opacity = '1';
    }, 100);
});

// Profile Image Cycling Functionality
const profileImages = [{"path":"image\/parents\/default-parent-avatar.png","type":"fallback","id":0,"name":"Guest"}];
let currentImageIndex = 0;

function initializeProfileImageCycling() {
    // Only enable cycling if we have multiple actual profile images
    const actualImages = profileImages.filter(img => img.type !== 'fallback');
    
    if (actualImages.length <= 1) {
        console.log('Not enough actual profile images for cycling (found: ' + actualImages.length + ')');
        // Remove cycling indicators if not needed
        const indicators = document.querySelectorAll('.user-avatar::after, .mobile-user-avatar::after');
        indicators.forEach(indicator => {
            if (indicator.style) indicator.style.display = 'none';
        });
        return;
    }
    
    console.log('Initializing profile image cycling with', actualImages.length, 'actual images');
    
    // Add cycling functionality to both desktop and mobile profile images
    const desktopContainer = document.getElementById('profile-image-container');
    const mobileContainer = document.getElementById('mobile-profile-image-container');
    
    // Add click handlers for manual cycling
    if (desktopContainer) {
        desktopContainer.style.cursor = 'pointer';
        desktopContainer.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            cycleProfileImage();
        });
    }
    
    if (mobileContainer) {
        mobileContainer.style.cursor = 'pointer';
        mobileContainer.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            cycleProfileImage();
        });
    }
    
    // Start automatic cycling every 5 seconds
    setInterval(cycleProfileImage, 5000);
}

function cycleProfileImage() {
    // Only cycle through actual images, skip fallbacks
    const actualImages = profileImages.filter(img => img.type !== 'fallback');
    
    if (actualImages.length <= 1) {
        console.log('No cycling - insufficient actual images');
        return;
    }
    
    // Find current image index in actual images array
    let currentActualIndex = actualImages.findIndex(img => 
        img.path === profileImages[currentImageIndex].path
    );
    
    // Move to next actual image
    currentActualIndex = (currentActualIndex + 1) % actualImages.length;
    
    // Find this image's index in the full profileImages array
    currentImageIndex = profileImages.findIndex(img => 
        img.path === actualImages[currentActualIndex].path
    );
    
    const currentImage = profileImages[currentImageIndex];
    updateProfileImageContainers(currentImage);
}

function updateProfileImageContainers(imageData) {
    const desktopImg = document.querySelector('#profile-image-container img');
    const mobileImg = document.querySelector('#mobile-profile-image-container img');
    const desktopContainer = document.getElementById('profile-image-container');
    
    // Add fade transition
    if (desktopImg) {
        desktopImg.style.transition = 'opacity 0.3s ease';
        desktopImg.style.opacity = '0';
        
        setTimeout(() => {
            desktopImg.src = imageData.path;
            desktopImg.alt = imageData.name + "'s avatar";
            desktopImg.style.opacity = '1';
        }, 150);
    }
    
    if (mobileImg) {
        mobileImg.style.transition = 'opacity 0.3s ease';
        mobileImg.style.opacity = '0';
        
        setTimeout(() => {
            mobileImg.src = imageData.path;
            mobileImg.alt = imageData.name + "'s avatar";
            mobileImg.style.opacity = '1';
        }, 150);
    }
    
    // Update tooltip
    if (desktopContainer) {
        desktopContainer.title = imageData.name;
    }
    
    console.log('Cycling to:', imageData.name, '(' + imageData.type + ')');
}

// Initialize profile cycling when page loads
if (profileImages && profileImages.length > 1) {
    document.addEventListener('DOMContentLoaded', function() {
        initializeProfileImageCycling();
    });
}

// Handle localStorage-based tab activation for cross-page navigation
document.addEventListener('DOMContentLoaded', function() {
    const tabToActivate = localStorage.getItem('activateTab');
    if (tabToActivate) {
        localStorage.removeItem('activateTab'); // Clean up
        
        // Only activate tab if showTab function is available (i.e., we're on index.php)
        if (typeof window.showTab === 'function') {
            setTimeout(() => {
                window.showTab(tabToActivate);
            }, 100); // Small delay to ensure page is fully loaded
        }
    }
});
</script> 
<main class="min-h-screen bg-gray-900 text-gray-200">
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 py-16">
        <div class="absolute inset-0 bg-black/20"></div>
        <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
                    Join Our Team
                </h1>
                <p class="mx-auto mt-6 max-w-3xl text-xl text-purple-200">
                    Shape the future of youth physical education and help build confident, skilled young athletes at SpartanMonks PE
                </p>
            </div>
        </div>
    </section>

    <!-- Success/Error Messages -->
    
    
    <!-- About SpartanMonks PE -->
    <section class="py-16">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-white mb-6">About SpartanMonks PE</h2>
                <div class="max-w-4xl mx-auto space-y-4 text-gray-300">
                    <p class="text-lg">
                        SpartanMonks PE is more than just a physical education program – we're a community dedicated to developing the whole child through innovative movement, character building, and skill development.
                    </p>
                    <p>
                        Our unique approach combines traditional martial arts principles with modern physical education, creating an environment where children develop not just physical skills, but also mental resilience, discipline, and confidence.
                    </p>
                    <p>
                        We serve children of all skill levels, ensuring every child can grow at their own pace and reach their full potential.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- What We're Looking For -->
    <section class="py-16 bg-gray-800/50">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-white mb-4">What We're Looking For</h2>
                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
                    We seek passionate educators who share our vision of developing confident, capable young people through innovative physical education.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-800 p-6 rounded-lg border border-purple-500/20">
                    <div class="text-3xl text-purple-400 mb-4">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Passion for Youth Development</h3>
                    <p class="text-gray-300">
                        Genuine enthusiasm for working with children and helping them reach their full potential through physical activity and character building.
                    </p>
                </div>

                <div class="bg-gray-800 p-6 rounded-lg border border-purple-500/20">
                    <div class="text-3xl text-purple-400 mb-4">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Educational Background</h3>
                    <p class="text-gray-300">
                        Degree in Kinesiology, Physical Education, Exercise Science, or related field preferred. Relevant certifications and experience also valued.
                    </p>
                </div>

                <div class="bg-gray-800 p-6 rounded-lg border border-purple-500/20">
                    <div class="text-3xl text-purple-400 mb-4">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Communication Skills</h3>
                    <p class="text-gray-300">
                        Excellent communication abilities to connect with children, parents, and team members. Bilingual abilities are a plus.
                    </p>
                </div>

                <div class="bg-gray-800 p-6 rounded-lg border border-purple-500/20">
                    <div class="text-3xl text-purple-400 mb-4">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Safety First</h3>
                    <p class="text-gray-300">
                        CPR/First Aid certification required (we can assist with obtaining). Strong understanding of child safety protocols.
                    </p>
                </div>

                <div class="bg-gray-800 p-6 rounded-lg border border-purple-500/20">
                    <div class="text-3xl text-purple-400 mb-4">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Innovation & Creativity</h3>
                    <p class="text-gray-300">
                        Ability to create engaging, age-appropriate activities and adapt teaching methods to different learning styles and abilities.
                    </p>
                </div>

                <div class="bg-gray-800 p-6 rounded-lg border border-purple-500/20">
                    <div class="text-3xl text-purple-400 mb-4">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Flexibility</h3>
                    <p class="text-gray-300">
                        Availability for afternoon and weekend sessions. Both part-time and full-time positions available based on program needs.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits -->
    <section class="py-16 bg-gray-800/50">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-white mb-4">Why Work With Us</h2>
                <p class="text-xl text-gray-400">Competitive benefits and a supportive work environment</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="text-center">
                    <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-dollar-sign text-white text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-white mb-2">Competitive Pay</h3>
                    <p class="text-gray-400">Above-market compensation with performance bonuses</p>
                </div>

                <div class="text-center">
                    <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-graduation-cap text-white text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-white mb-2">Professional Development</h3>
                    <p class="text-gray-400">Ongoing training and certification support</p>
                </div>

                <div class="text-center">
                    <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-calendar text-white text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-white mb-2">Flexible Schedule</h3>
                    <p class="text-gray-400">Work-life balance with flexible scheduling options</p>
                </div>

                <div class="text-center">
                    <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-heart text-white text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-white mb-2">Meaningful Work</h3>
                    <p class="text-gray-400">Make a real difference in children's lives</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Application Form -->
    <section class="py-16" id="apply">
        <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-white mb-4">Apply Today</h2>
                <p class="text-xl text-gray-400">Ready to join our team? Submit your application below.</p>
            </div>

            <form method="POST" enctype="multipart/form-data" class="bg-gray-800 p-8 rounded-lg border border-purple-500/20">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="first_name" class="block text-sm font-medium text-gray-300 mb-2">
                            First Name <span class="text-red-400">*</span>
                        </label>
                        <input type="text" id="first_name" name="first_name" required
                               value=""
                               class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    </div>

                    <div>
                        <label for="last_name" class="block text-sm font-medium text-gray-300 mb-2">
                            Last Name <span class="text-red-400">*</span>
                        </label>
                        <input type="text" id="last_name" name="last_name" required
                               value=""
                               class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-300 mb-2">
                            Email Address <span class="text-red-400">*</span>
                        </label>
                        <input type="email" id="email" name="email" required
                               value=""
                               class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    </div>

                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-300 mb-2">
                            Phone Number <span class="text-red-400">*</span>
                        </label>
                        <input type="tel" id="phone" name="phone" required
                               value=""
                               class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    </div>
                </div>

                <div class="mb-6">
                    <label for="position" class="block text-sm font-medium text-gray-300 mb-2">
                        Position of Interest <span class="text-red-400">*</span>
                    </label>
                    <select id="position" name="position" required
                            class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                        <option value="">Select a position</option>
                        <option value="lead_coach" >Lead Physical Education Coach</option>
                        <option value="assistant_coach" >Assistant Coach</option>
                        <option value="substitute" >Substitute Coach</option>
                        <option value="other" >Other (please specify in motivation)</option>
                    </select>
                </div>

                <div class="mb-6">
                    <label for="experience" class="block text-sm font-medium text-gray-300 mb-2">
                        Relevant Experience
                    </label>
                    <textarea id="experience" name="experience" rows="4"
                              placeholder="Describe your experience working with children, physical education, sports coaching, etc."
                              class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"></textarea>
                </div>

                <div class="mb-6">
                    <label for="certifications" class="block text-sm font-medium text-gray-300 mb-2">
                        Certifications & Education
                    </label>
                    <textarea id="certifications" name="certifications" rows="3"
                              placeholder="List your relevant degrees, certifications (CPR, First Aid, etc.), and educational background"
                              class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"></textarea>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-300 mb-2">
                        Availability (select all that apply)
                    </label>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                                                            <label class="flex items-center">
                                <input type="checkbox" name="availability[]" value="weekday_mornings"
                                                                              class="mr-2 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500">
                                <span class="text-gray-300 text-sm">Weekday Mornings</span>
                            </label>
                                                    <label class="flex items-center">
                                <input type="checkbox" name="availability[]" value="weekday_afternoons"
                                                                              class="mr-2 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500">
                                <span class="text-gray-300 text-sm">Weekday Afternoons</span>
                            </label>
                                                    <label class="flex items-center">
                                <input type="checkbox" name="availability[]" value="weekday_evenings"
                                                                              class="mr-2 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500">
                                <span class="text-gray-300 text-sm">Weekday Evenings</span>
                            </label>
                                                    <label class="flex items-center">
                                <input type="checkbox" name="availability[]" value="saturday_mornings"
                                                                              class="mr-2 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500">
                                <span class="text-gray-300 text-sm">Saturday Mornings</span>
                            </label>
                                                    <label class="flex items-center">
                                <input type="checkbox" name="availability[]" value="saturday_afternoons"
                                                                              class="mr-2 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500">
                                <span class="text-gray-300 text-sm">Saturday Afternoons</span>
                            </label>
                                                    <label class="flex items-center">
                                <input type="checkbox" name="availability[]" value="sunday_mornings"
                                                                              class="mr-2 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500">
                                <span class="text-gray-300 text-sm">Sunday Mornings</span>
                            </label>
                                                    <label class="flex items-center">
                                <input type="checkbox" name="availability[]" value="sunday_afternoons"
                                                                              class="mr-2 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500">
                                <span class="text-gray-300 text-sm">Sunday Afternoons</span>
                            </label>
                                                    <label class="flex items-center">
                                <input type="checkbox" name="availability[]" value="holidays"
                                                                              class="mr-2 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500">
                                <span class="text-gray-300 text-sm">Holidays/Breaks</span>
                            </label>
                                            </div>
                </div>

                <div class="mb-6">
                    <label for="motivation" class="block text-sm font-medium text-gray-300 mb-2">
                        Why do you want to work with SpartanMonks PE? <span class="text-red-400">*</span>
                    </label>
                    <textarea id="motivation" name="motivation" rows="4" required
                              placeholder="Tell us about your passion for youth development and why you're interested in joining our team"
                              class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"></textarea>
                </div>

                <div class="mb-6">
                    <label for="references" class="block text-sm font-medium text-gray-300 mb-2">
                        Professional References
                    </label>
                    <textarea id="references" name="references" rows="3"
                              placeholder="Please provide 2-3 professional references with name, relationship, and contact information"
                              class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"></textarea>
                </div>

                <div class="mb-6">
                    <label for="resume" class="block text-sm font-medium text-gray-300 mb-2">
                        Resume Upload
                    </label>
                    <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx"
                           class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-purple-600 file:text-white hover:file:bg-purple-700">
                    <p class="text-sm text-gray-500 mt-1">Accepted formats: PDF, DOC, DOCX (Max 5MB)</p>
                </div>

                <div class="mb-6">
                    <label class="flex items-start">
                        <input type="checkbox" name="background_check" value="1" required
                                                              class="mr-3 mt-1 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500">
                        <span class="text-gray-300 text-sm">
                            I understand that employment is contingent upon passing a background check and I consent to such screening. <span class="text-red-400">*</span>
                        </span>
                    </label>
                </div>

                <button type="submit" name="apply"
                        class="w-full bg-gradient-to-r from-purple-600 to-purple-700 text-white py-3 px-6 rounded-md font-semibold hover:from-purple-700 hover:to-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition duration-200">
                    <i class="fas fa-paper-plane mr-2"></i>
                    Submit Application
                </button>
            </form>
        </div>
    </section>
</main>


<footer class="bg-black mt-16 md:mt-24">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 footer-container text-gray-400 text-sm">
         <div class="text-center md:text-left mb-4 md:mb-0">
             <a href="/" class="text-lg font-bold brand-purple tracking-tight hover:opacity-80 transition-opacity mb-2 inline-block">SpartanMonks PE</a>
             <p>&copy; <script>document.write(new Date().getFullYear());</script> All Rights Reserved.</p>
             <p class="mt-1">Building Active, Confident Kids in Gilbert, AZ.</p>
         </div>
         <div class="footer-links space-x-4 mb-4 md:mb-0 text-center">
            <button onclick="showTab('welcome')" class="hover:text-purple-400">Welcome</button><span class="text-gray-600 mx-2 hidden md:inline">|</span>
             <button onclick="showTab('about')" class="hover:text-purple-400">About</button><span class="text-gray-600 mx-2 hidden md:inline">|</span>
            <a href="privacy-policy.php" class="hover:text-purple-400">Privacy Policy</a><span class="text-gray-600 mx-2 hidden md:inline">|</span>
             <a href="terms.php" class="hover:text-purple-400">Terms of Service</a>
         </div>
         <div class="text-center md:text-right">
             <p class="mb-2 font-medium">Connect With Us:</p>
             <div class="social-links">
                 <a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-square"></i></a>
                 <a href="#" aria-label="Instagram" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
                 <a href="mailto:info@spartanmonkspe.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
             </div>
         </div>
     </div>
</footer>

<div id="sidebarOverlay" class="" onclick="closeSidebar()"></div> 
<div id="detailsSidebar">
    <div class="sidebar-loading-content">
        <div class="text-center p-6">
             <svg class="animate-spin h-8 w-8 text-purple-400 mx-auto mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
             <p class="text-gray-400">Loading...</p>
        </div>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.js'></script>


<!-- Sidebar Container for sidebar.js -->
<div id="sidebar-container" class="fixed inset-y-0 right-0 w-full max-w-md bg-gray-800 shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50">
    <div id="sidebar-content" class="h-full overflow-y-auto"></div>
</div>

<!-- Traffic Analytics Tracking Script -->
<script src="/js/traffic-analytics.js"></script>

</body>
</html>
<style>
/* Custom file input styling */
input[type="file"]::-webkit-file-upload-button {
    background: #7c3aed;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 16px;
}

input[type="file"]::-webkit-file-upload-button:hover {
    background: #6d28d9;
}
</style>

<script>
// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const requiredFields = ['first_name', 'last_name', 'email', 'phone', 'position', 'motivation'];
    const backgroundCheck = document.querySelector('input[name="background_check"]');
    
    let hasErrors = false;
    
    requiredFields.forEach(function(fieldName) {
        const field = document.querySelector(`[name="${fieldName}"]`);
        if (!field.value.trim()) {
            field.classList.add('border-red-500');
            hasErrors = true;
        } else {
            field.classList.remove('border-red-500');
        }
    });
    
    if (!backgroundCheck.checked) {
        backgroundCheck.parentElement.classList.add('text-red-400');
        hasErrors = true;
    } else {
        backgroundCheck.parentElement.classList.remove('text-red-400');
    }
    
    if (hasErrors) {
        e.preventDefault();
        alert('Please fill in all required fields and accept the background check requirement.');
    }
});

// Email validation
document.querySelector('#email').addEventListener('blur', function() {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (this.value && !emailRegex.test(this.value)) {
        this.classList.add('border-red-500');
    } else {
        this.classList.remove('border-red-500');
    }
});

// Phone number formatting
document.querySelector('#phone').addEventListener('input', function() {
    let value = this.value.replace(/\D/g, '');
    if (value.length >= 10) {
        value = value.substring(0, 10);
        this.value = `(${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(6)}`;
    }
});

// File upload validation
document.querySelector('#resume').addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
        const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
        const maxSize = 5 * 1024 * 1024; // 5MB
        
        if (!allowedTypes.includes(file.type)) {
            alert('Please upload a PDF, DOC, or DOCX file.');
            this.value = '';
            return;
        }
        
        if (file.size > maxSize) {
            alert('File size must be less than 5MB.');
            this.value = '';
            return;
        }
    }
});
</script>