<!--
 * =====================================================================
 * | VALLEYTAINMENT PRODUCTIONS - MEMBER LOGIN PAGE                    |
 * | ================================================================= |
 * | FILE: valleytainment_final_working_v2/member-login.html          |
 * | PURPOSE: Member authentication and registration page             |
 * | AUTHOR: Valleytainment Development Team                           |
 * | VERSION: 2.0.0 - Production Ready                                |
 * | LAST UPDATED: 2025-12-08                                         |
 * | ================================================================= |
 * |                                                                   |
 * | 📋 DESCRIPTION:                                                   |
 * | Member login and registration page for Valleytainment members.  |
 * | Provides both traditional email/password login and Google        |
 * | Sign-In integration. Allows users to create accounts, log in,     |
 * | and access exclusive content and community features.             |
 * |                                                                   |
 * | 🎯 KEY FEATURES:                                                  |
 * | ✅ Email/password login form                                     |
 * | ✅ Google Sign-In integration                                    |
 * | ✅ User registration form                                        |
 * | ✅ Form validation and error handling                            |
 * | ✅ Visual effects and animations                                 |
 * | ✅ Responsive design for all devices                            |
 * | ✅ Accessibility features (WCAG 2.1 AA)                         |
 * | ✅ SEO optimized                                                 |
 * |                                                                   |
 * | 🛠️ TECHNICAL DETAILS:                                            |
 * | - HTML5 with semantic markup                                     |
 * | - CSS3 with custom animations and effects                       |
 * | - Vanilla JavaScript for form handling                           |
 * | - Google Sign-In SDK integration                                 |
 * | - Canvas API for background effects                               |
 * | - Form validation and error handling                             |
 * |                                                                   |
 * | 📚 DEPENDENCIES:                                                  |
 * | - Google Sign-In SDK (loaded via CDN)                           |
 * | - Font Awesome: Icons (loaded via CDN)                           |
 * | - Google Fonts: Typography (loaded via CDN)                       |
 * | - navigation.css: Shared navigation styles                        |
 * | - Netlify Functions: Backend authentication                       |
 * |                                                                   |
 * | 🎨 CUSTOMIZATION:                                                 |
 * | To customize the login page:                                      |
 * | 1. Modify form structure and fields                               |
 * | 2. Adjust visual effects and animations                           |
 * | 3. Customize color scheme in CSS                                  |
 * | 4. Modify authentication endpoints                                |
 * | 5. Add additional registration fields                              |
|                                                                   |
 * | 🐛 DEBUGGING:                                                     |
 * | - Check browser console for JavaScript errors                    |
 * | - Verify Google Sign-In SDK is loading                           |
 * | - Test form submission handling                                   |
 * | - Check network requests for API calls                            |
 * | - Verify authentication flow                                      |
 * |                                                                   |
 * | 📖 FOR BEGINNERS:                                                 |
 * | This login page works by:                                         |
 * | 1. Displaying login and registration forms                       |
 * | 2. Validating input on form submission                            |
 * | 3. Sending credentials to authentication endpoint                 |
 * | 4. Handling Google Sign-In callback                               |
 * | 5. Redirecting to member area on successful login                 |
 * |                                                                   |
 * | Authentication methods:                                         |
 * | - Email/password: Traditional login form                          |
 * | - Google Sign-In: OAuth 2.0 integration                          |
 * |                                                                   |
 * | 🔒 SECURITY:                                                      |
 * | - Secure form submission (HTTPS)                                  |
 * | - Input validation and sanitization                               |
 * | - Google OAuth 2.0 for secure authentication                      |
 * | - No sensitive data in client-side code                           |
 * | - Session management                                              |
 * |                                                                   |
 * | ⚡ PERFORMANCE:                                                   |
 * | - Lazy loading for Google Sign-In SDK                            |
 * | - Efficient form handling                                         |
 * | - Optimized canvas animations                                     |
 * | - Fast page load times                                            |
 * |                                                                   |
 * | ================================================================= |
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Member Login | VALLEYTAINMENT</title>
  <meta name="description" content="Login or create an account to access exclusive VALLEYTAINMENT content, music, and community features." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://valleytainment.com/member-login.html" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="noopener" />
  <link rel="stylesheet" href="includes/navigation.css" />
  
  <!-- Google Sign-In SDK -->
  <script src="https://accounts.google.com/gsi/client" async defer></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #ff006e;
      --secondary: #8338ec;
      --accent: #00ffdd;
      --dark: #0a0e27;
      --light: #f8f8f8;
      --glass: rgba(15, 23, 42, 0.8);
    }

    html, body {
      width: 100%;
      min-height: 100vh;
      font-family: 'Montserrat', Arial, sans-serif;
      background: var(--dark);
      color: var(--light);
      overflow-x: hidden;
    }

    /* Background VFX */
    #bg-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: radial-gradient(circle at 20% 50%, rgba(255, 0, 110, 0.15), transparent 50%),
                  radial-gradient(circle at 80% 50%, rgba(131, 56, 236, 0.15), transparent 50%),
                  radial-gradient(circle at 50% 80%, rgba(0, 255, 221, 0.1), transparent 50%),
                  var(--dark);
    }

    .login-container {
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      position: relative;
      z-index: 10;
    }

    .login-card {
      width: 100%;
      max-width: 480px;
      background: var(--glass);
      backdrop-filter: blur(20px);
      border: 2px solid rgba(0, 255, 221, 0.3);
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 0 40px rgba(0, 255, 221, 0.1),
                  inset 0 0 20px rgba(255, 0, 110, 0.05);
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
    }

    .login-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(0, 255, 221, 0.1) 0%, transparent 70%);
      animation: rotate 20s linear infinite;
      pointer-events: none;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .login-card:hover {
      border-color: rgba(0, 255, 221, 0.6);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                  0 0 60px rgba(0, 255, 221, 0.2),
                  inset 0 0 30px rgba(255, 0, 110, 0.1);
      transform: translateY(-5px);
    }

    .login-header {
      text-align: center;
      margin-bottom: 2.5rem;
      position: relative;
      z-index: 1;
    }

    .login-header .logo-link {
      display: inline-block;
      margin-bottom: 1rem;
    }

    .login-header .logo-link img {
      height: 50px;
      width: auto;
      filter: drop-shadow(0 0 10px rgba(0, 255, 221, 0.5));
    }

    .login-header h1 {
      font-size: clamp(1.75rem, 4vw, 2.25rem);
      background: linear-gradient(135deg, var(--accent), var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 800;
      text-shadow: 0 0 30px rgba(0, 255, 221, 0.3);
    }

    .login-header p {
      color: rgba(248, 248, 248, 0.7);
      font-size: 0.95rem;
      font-weight: 400;
    }

    /* Form Toggle Tabs */
    .form-tabs {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 2rem;
      background: rgba(0, 0, 0, 0.3);
      padding: 0.5rem;
      border-radius: 12px;
      position: relative;
      z-index: 1;
    }

    .tab-btn {
      flex: 1;
      padding: 0.75rem 1rem;
      background: transparent;
      border: 2px solid transparent;
      border-radius: 8px;
      color: rgba(248, 248, 248, 0.6);
      font-size: 0.9rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: 'Montserrat', Arial, sans-serif;
    }

    .tab-btn:hover {
      color: var(--light);
      background: rgba(0, 255, 221, 0.1);
    }

    .tab-btn.active {
      background: linear-gradient(135deg, var(--accent), var(--primary));
      color: var(--dark);
      border-color: transparent;
      box-shadow: 0 4px 15px rgba(0, 255, 221, 0.4);
    }

    /* Form Styles */
    .form-container {
      position: relative;
      z-index: 1;
    }

    .form-panel {
      display: none;
      animation: fadeIn 0.4s ease;
    }

    .form-panel.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .form-group {
      margin-bottom: 1.5rem;
    }

    label {
      display: block;
      margin-bottom: 0.5rem;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--accent);
      font-weight: 600;
    }

    .input-wrapper {
      position: relative;
    }

    .input-wrapper i {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(248, 248, 248, 0.4);
      font-size: 1rem;
      transition: color 0.3s ease;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"] {
      width: 100%;
      padding: 1rem 1rem 1rem 3rem;
      background: rgba(30, 41, 59, 0.6);
      border: 2px solid rgba(0, 255, 221, 0.2);
      border-radius: 12px;
      color: var(--light);
      font-size: 1rem;
      transition: all 0.3s ease;
      font-family: 'Montserrat', Arial, sans-serif;
    }

    input:focus {
      outline: none;
      background: rgba(30, 41, 59, 0.9);
      border-color: var(--accent);
      box-shadow: 0 0 20px rgba(0, 255, 221, 0.3);
    }

    input:focus + i,
    .input-wrapper:focus-within i {
      color: var(--accent);
    }

    input::placeholder {
      color: rgba(160, 160, 160, 0.5);
    }

    input:invalid:not(:placeholder-shown) {
      border-color: var(--primary);
    }

    input:valid:not(:placeholder-shown) {
      border-color: rgba(0, 255, 221, 0.5);
    }

    .password-toggle {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(248, 248, 248, 0.5);
      cursor: pointer;
      font-size: 1.1rem;
      padding: 0.5rem;
      transition: color 0.3s ease;
      z-index: 2;
    }

    .password-toggle:hover {
      color: var(--accent);
    }

    .checkbox-group {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .checkbox-group input[type="checkbox"] {
      width: auto;
      margin-top: 0.25rem;
      cursor: pointer;
      accent-color: var(--accent);
    }

    .checkbox-group label {
      font-size: 0.85rem;
      text-transform: none;
      letter-spacing: 0;
      color: rgba(248, 248, 248, 0.8);
      font-weight: 400;
      cursor: pointer;
      line-height: 1.5;
    }

    .checkbox-group a {
      color: var(--accent);
      text-decoration: underline;
    }

    .submit-btn {
      width: 100%;
      padding: 1rem 2rem;
      background: linear-gradient(135deg, var(--accent), var(--primary));
      color: var(--dark);
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 1rem;
      font-family: 'Montserrat', Arial, sans-serif;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 255, 221, 0.3);
    }

    .submit-btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

    .submit-btn:hover::before {
      width: 300px;
      height: 300px;
    }

    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 255, 221, 0.5);
    }

    .submit-btn:active {
      transform: translateY(0);
    }

    .submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .submit-btn .btn-text {
      position: relative;
      z-index: 1;
    }

    .loading-spinner {
      display: none;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(10, 14, 39, 0.3);
      border-top: 3px solid var(--dark);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .submit-btn.loading .btn-text {
      opacity: 0;
    }

    .submit-btn.loading .loading-spinner {
      display: block;
    }

    @keyframes spin {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .message {
      display: none;
      padding: 1rem;
      border-radius: 12px;
      margin-bottom: 1.5rem;
      font-size: 0.9rem;
      text-align: center;
      font-weight: 500;
      animation: slideDown 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .message.show {
      display: block;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .error-message {
      background: rgba(255, 0, 110, 0.15);
      border: 2px solid rgba(255, 0, 110, 0.5);
      color: #ff6b9d;
    }

    .success-message {
      background: rgba(0, 255, 221, 0.15);
      border: 2px solid rgba(0, 255, 221, 0.5);
      color: var(--accent);
    }

    .info-message {
      background: rgba(131, 56, 236, 0.15);
      border: 2px solid rgba(131, 56, 236, 0.5);
      color: #b794f6;
    }

    .divider {
      display: flex;
      align-items: center;
      margin: 2rem 0;
      position: relative;
      z-index: 1;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(0, 255, 221, 0.2);
    }

    .divider span {
      padding: 0 1rem;
      color: rgba(248, 248, 248, 0.5);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .social-login {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .social-btn {
      flex: 1;
      padding: 0.75rem;
      background: rgba(30, 41, 59, 0.6);
      border: 2px solid rgba(0, 255, 221, 0.2);
      border-radius: 12px;
      color: var(--light);
      font-size: 1.2rem;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .social-btn:hover {
      background: rgba(30, 41, 59, 0.9);
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 255, 221, 0.2);
    }

    .social-btn-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
    }

    .social-btn-container button {
      width: 100%;
      height: 100%;
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--accent);
      text-decoration: none;
      font-size: 0.9rem;
      margin-top: 1.5rem;
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .back-link:hover {
      color: var(--light);
      transform: translateX(-5px);
    }

    @media (max-width: 768px) {
      .login-container {
        padding: 1rem;
      }

      .login-card {
        padding: 2rem 1.5rem;
      }

      .login-header h1 {
        font-size: 1.5rem;
      }

      .social-login {
        flex-direction: column;
      }
    }

    @media (max-width: 480px) {
      .login-card {
        padding: 1.5rem 1rem;
        border-radius: 15px;
      }

      .form-tabs {
        flex-direction: column;
      }

      .tab-btn {
        width: 100%;
      }
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Focus styles for keyboard navigation */
    *:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <canvas id="bg-canvas"></canvas>

  <!-- Minimal Navigation for Login Page -->
  <header role="banner" id="main-header" style="position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10, 10, 15, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
    <div class="header-container" style="padding: 0.75rem 1rem; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;">
      <a href="/" class="logo" style="display: flex; align-items: center; text-decoration: none; color: #00ffdd; font-weight: 600;">
        <img src="images/valleytainment logo 2.png" alt="Valleytainment Productions Logo" style="height: 32px; width: auto; margin-right: 0.5rem;" />
        <span style="font-size: 1.1rem;">VALLEYTAINMENT</span>
      </a>
      <a href="/" style="color: rgba(255, 255, 255, 0.8); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-home"></i>
        <span>Back to Home</span>
      </a>
    </div>
  </header>

  <div class="login-container" style="padding-top: 80px;">
    <div class="login-card">
      <div class="login-header">
        <a href="/" class="logo-link" aria-label="Return to homepage">
          <img src="images/valleytainment logo 2.png" alt="Valleytainment Logo" />
        </a>
        <h1>Welcome Back</h1>
        <p>Login to access exclusive content, or continue as a guest</p>
      </div>

      <!-- Form Tabs -->
      <div class="form-tabs" role="tablist">
        <button class="tab-btn active" data-tab="login" role="tab" aria-selected="true" aria-controls="login-panel" id="login-tab">Login</button>
        <button class="tab-btn" data-tab="register" role="tab" aria-selected="false" aria-controls="register-panel" id="register-tab">Sign Up</button>
      </div>

      <!-- Messages -->
      <div class="message error-message" id="errorMessage" role="alert" aria-live="polite"></div>
      <div class="message success-message" id="successMessage" role="alert" aria-live="polite"></div>

      <!-- Login Form -->
      <div class="form-container">
        <form id="loginForm" class="form-panel active" novalidate aria-labelledby="login-tab">
          <div class="form-group">
            <label for="loginEmail">Email Address</label>
            <div class="input-wrapper">
              <i class="fas fa-envelope"></i>
              <input
                type="email"
                id="loginEmail"
                name="email"
                placeholder="your@email.com"
                required
                autocomplete="email"
                aria-required="true"
              />
            </div>
          </div>

          <div class="form-group">
            <label for="loginPassword">Password</label>
            <div class="input-wrapper">
              <i class="fas fa-lock"></i>
              <input
                type="password"
                id="loginPassword"
                name="password"
                placeholder="••••••••"
                required
                autocomplete="current-password"
                aria-required="true"
              />
              <button type="button" class="password-toggle" aria-label="Toggle password visibility">
                <i class="fas fa-eye" id="loginPasswordToggle"></i>
              </button>
            </div>
          </div>

          <div class="checkbox-group">
            <input type="checkbox" id="rememberMe" name="rememberMe" />
            <label for="rememberMe">Remember me</label>
          </div>

          <button type="submit" class="submit-btn" id="loginBtn">
            <span class="btn-text">Sign In</span>
            <div class="loading-spinner"></div>
          </button>

          <div class="divider">
            <span>or</span>
          </div>

          <div class="social-login">
            <div id="google-signin-button" class="social-btn-container"></div>
            <button type="button" class="social-btn" aria-label="Sign in with Apple">
              <i class="fab fa-apple"></i>
            </button>
            <button type="button" class="social-btn" aria-label="Sign in with Spotify">
              <i class="fab fa-spotify"></i>
            </button>
          </div>
        </form>

        <!-- Register Form -->
        <form id="registerForm" class="form-panel" novalidate aria-labelledby="register-tab">
          <div class="form-group">
            <label for="registerName">Full Name</label>
            <div class="input-wrapper">
              <i class="fas fa-user"></i>
              <input
                type="text"
                id="registerName"
                name="name"
                placeholder="John Doe"
                required
                autocomplete="name"
                aria-required="true"
              />
            </div>
          </div>

          <div class="form-group">
            <label for="registerEmail">Email Address</label>
            <div class="input-wrapper">
              <i class="fas fa-envelope"></i>
              <input
                type="email"
                id="registerEmail"
                name="email"
                placeholder="your@email.com"
                required
                autocomplete="email"
                aria-required="true"
              />
            </div>
          </div>

          <div class="form-group">
            <label for="registerPassword">Password</label>
            <div class="input-wrapper">
              <i class="fas fa-lock"></i>
              <input
                type="password"
                id="registerPassword"
                name="password"
                placeholder="••••••••"
                required
                autocomplete="new-password"
                minlength="8"
                aria-required="true"
                aria-describedby="passwordHelp"
              />
              <button type="button" class="password-toggle" aria-label="Toggle password visibility">
                <i class="fas fa-eye" id="registerPasswordToggle"></i>
              </button>
            </div>
            <small id="passwordHelp" style="color: rgba(248, 248, 248, 0.6); font-size: 0.75rem; margin-top: 0.25rem; display: block;">
              Must be at least 8 characters
            </small>
          </div>

          <div class="form-group">
            <label for="registerPhone">Phone Number (Optional)</label>
            <div class="input-wrapper">
              <i class="fas fa-phone"></i>
              <input
                type="tel"
                id="registerPhone"
                name="phone"
                placeholder="+1 (555) 123-4567"
                autocomplete="tel"
              />
            </div>
          </div>

          <div class="checkbox-group">
            <input type="checkbox" id="newsletter" name="newsletter" checked />
            <label for="newsletter">Subscribe to our newsletter for updates, exclusive content, and special offers</label>
          </div>

          <div class="checkbox-group">
            <input type="checkbox" id="terms" name="terms" required aria-required="true" />
            <label for="terms">I agree to the <a href='/terms' target='_blank'>Terms of Service</a> and <a href='/privacy' target='_blank'>Privacy Policy</a></label>
          </div>

          <button type="submit" class="submit-btn" id="registerBtn">
            <span class="btn-text">Create Account</span>
            <div class="loading-spinner"></div>
          </button>

          <div class="divider">
            <span>or</span>
          </div>

          <div class="social-login">
            <div id="google-signin-button-register" class="social-btn-container"></div>
            <button type="button" class="social-btn" aria-label="Sign in with Apple">
              <i class="fab fa-apple"></i>
            </button>
            <button type="button" class="social-btn" aria-label="Sign in with Spotify">
              <i class="fab fa-spotify"></i>
            </button>
          </div>
        </form>
      </div>

      <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem;">
        <button type="button" id="proceed-as-guest-btn" class="back-link" style="background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.2); padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer; width: 100%; justify-content: center;">
          <i class="fas fa-user-secret"></i>
          <span>Proceed as Guest</span>
        </button>
        <a href="/" class="back-link" style="justify-content: center;">
          <i class="fas fa-arrow-left"></i>
          <span>Back to Home</span>
        </a>
      </div>
    </div>
  </div>

  <script>
    // Ensure script runs after DOM is ready
    (function() {
      try {
        // Background Animation - wait for canvas to exist
        const canvas = document.getElementById('bg-canvas');
        if (!canvas) {
          console.warn('Canvas element not found - background animation disabled');
          // Continue without canvas - page should still work
        } else {
          const ctx = canvas.getContext('2d');

          function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
          }

          resizeCanvas();
          window.addEventListener('resize', resizeCanvas);

          let particles = [];

          class Particle {
            constructor() {
              this.x = Math.random() * canvas.width;
              this.y = Math.random() * canvas.height;
              this.size = Math.random() * 2 + 1;
              this.speedX = (Math.random() - 0.5) * 0.5;
              this.speedY = (Math.random() - 0.5) * 0.5;
              this.opacity = Math.random() * 0.3 + 0.1;
              this.color = Math.random() > 0.5 ? 'rgba(0, 255, 221, ' : 'rgba(255, 0, 110, ';
            }

            update() {
              this.x += this.speedX;
              this.y += this.speedY;
              this.opacity += (Math.random() - 0.5) * 0.02;

              if (this.x > canvas.width) this.x = 0;
              if (this.x < 0) this.x = canvas.width;
              if (this.y > canvas.height) this.y = 0;
              if (this.y < 0) this.y = canvas.height;

              if (this.opacity < 0.1) this.opacity = 0.1;
              if (this.opacity > 0.4) this.opacity = 0.4;
            }

            draw() {
              ctx.fillStyle = this.color + this.opacity + ')';
              ctx.beginPath();
              ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
              ctx.fill();
            }
          }

          function initParticles() {
            particles = [];
            for (let i = 0; i < 80; i++) {
              particles.push(new Particle());
            }
          }

          function animateBackground() {
            ctx.fillStyle = 'rgba(10, 14, 39, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            particles.forEach(p => {
              p.update();
              p.draw();
            });

            requestAnimationFrame(animateBackground);
          }

          initParticles();
          animateBackground();
        }
      } catch (canvasError) {
        console.warn('Canvas initialization failed:', canvasError);
        // Continue without canvas - page should still work
      }

    // Form Toggle
    const tabButtons = document.querySelectorAll('.tab-btn');
    const formPanels = document.querySelectorAll('.form-panel');

    tabButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        const targetTab = btn.dataset.tab;

        // Update tabs
        tabButtons.forEach(b => {
          b.classList.remove('active');
          b.setAttribute('aria-selected', 'false');
        });
        btn.classList.add('active');
        btn.setAttribute('aria-selected', 'true');

        // Update panels
        formPanels.forEach(panel => {
          panel.classList.remove('active');
        });
        document.getElementById(`${targetTab}Form`).classList.add('active');

        // Clear messages
        hideMessage('errorMessage');
        hideMessage('successMessage');
      });
    });

    // Password Toggle
    function setupPasswordToggle(toggleId, inputId) {
      const toggle = document.getElementById(toggleId);
      const input = document.getElementById(inputId);
      const icon = toggle.querySelector('i');

      toggle.addEventListener('click', () => {
        const isPassword = input.type === 'password';
        input.type = isPassword ? 'text' : 'password';
        icon.classList.toggle('fa-eye');
        icon.classList.toggle('fa-eye-slash');
        toggle.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
      });
    }

    setupPasswordToggle('loginPasswordToggle', 'loginPassword');
    setupPasswordToggle('registerPasswordToggle', 'registerPassword');

    // Message Display
    function showMessage(elementId, message, type = 'error') {
      const element = document.getElementById(elementId);
      element.textContent = message;
      element.className = `message ${type}-message show`;
      element.setAttribute('role', 'alert');
      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function hideMessage(elementId) {
      const element = document.getElementById(elementId);
      element.classList.remove('show');
      element.textContent = '';
    }

    // Form Validation
    function validateEmail(email) {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }

    function validatePassword(password) {
      return password.length >= 8;
    }

    // Login Form Handler - Ensure DOM is ready
    function attachLoginHandler() {
      const loginForm = document.getElementById('loginForm');
      const loginBtn = document.getElementById('loginBtn');
      
      if (!loginForm || !loginBtn) {
        console.error('Login form or button not found');
        // Retry after a short delay if form not ready
        setTimeout(attachLoginHandler, 100);
        return;
      }

      // Check if handler already attached
      if (loginForm.dataset.handlerAttached === 'true') {
        return;
      }
      loginForm.dataset.handlerAttached = 'true';

      console.log('✅ Login form handler attached');

      loginForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        e.stopPropagation();
        
        hideMessage('errorMessage');
        hideMessage('successMessage');

      const email = document.getElementById('loginEmail').value.trim();
      const password = document.getElementById('loginPassword').value;
      const rememberMe = document.getElementById('rememberMe').checked;

      if (!validateEmail(email)) {
        showMessage('errorMessage', 'Please enter a valid email address', 'error');
        return;
      }

      if (!password) {
        showMessage('errorMessage', 'Please enter your password', 'error');
        return;
      }

      loginBtn.classList.add('loading');
      loginBtn.disabled = true;

      try {
        // Check if we're on localhost for development
        const isLocalhost = window.location.hostname === 'localhost' || 
                           window.location.hostname === '127.0.0.1' ||
                           window.location.hostname === '';
        
        console.log('🔍 Login attempt - isLocalhost:', isLocalhost, 'hostname:', window.location.hostname);
        
        let data;
        
        if (isLocalhost) {
          // Local development: Use mock authentication
          console.info('🔧 Local development mode: Using mock authentication');
          
          // Check if email exists in members.json (we'll fetch it)
          try {
            const membersResponse = await fetch('/data/members.json');
            if (membersResponse.ok) {
              const members = await membersResponse.json();
              const userExists = members.some(m => m.email.toLowerCase() === email.toLowerCase());
              
              if (userExists) {
                // User exists, generate token (in production, verify password)
                const token = btoa(`${email}:${Date.now()}:${rememberMe ? 'persist' : 'session'}`);
                data = {
                  success: true,
                  message: 'Login successful',
                  token,
                  user: { email }
                };
              } else {
                data = {
                  success: false,
                  message: 'Invalid email or password'
                };
              }
            } else {
              // If can't fetch members, allow any login for local dev
              const token = btoa(`${email}:${Date.now()}:${rememberMe ? 'persist' : 'session'}`);
              data = {
                success: true,
                message: 'Login successful (local dev mode)',
                token,
                user: { email }
              };
            }
          } catch (fetchError) {
            // If can't fetch members, allow any login for local dev
            console.warn('Could not fetch members.json, using mock auth:', fetchError);
            const token = btoa(`${email}:${Date.now()}:${rememberMe ? 'persist' : 'session'}`);
            data = {
              success: true,
              message: 'Login successful (local dev mode)',
              token,
              user: { email }
            };
          }
        } else {
          // Production: Use Netlify function
          const response = await fetch('/.netlify/functions/auth-login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email, password, rememberMe })
          });

          data = await response.json();
        }

        if (data.success) {
          // Store auth token
          if (rememberMe) {
            localStorage.setItem('auth_token', data.token);
            localStorage.setItem('user_email', email);
          } else {
            sessionStorage.setItem('auth_token', data.token);
            sessionStorage.setItem('user_email', email);
          }

          showMessage('successMessage', 'Login successful! Redirecting...', 'success');
          
          // Redirect to intended page or home
          setTimeout(() => {
            const redirectUrl = new URLSearchParams(window.location.search).get('redirect') || '/';
            window.location.href = redirectUrl;
          }, 1500);
        } else {
          showMessage('errorMessage', data.message || 'Invalid email or password', 'error');
          loginBtn.classList.remove('loading');
          loginBtn.disabled = false;
        }
      } catch (error) {
        console.error('Login error:', error);
        showMessage('errorMessage', 'Connection error. Please try again.', 'error');
        loginBtn.classList.remove('loading');
        loginBtn.disabled = false;
      }
      return false;
    }, { capture: true, passive: false });
    }

    // Attach handler immediately and also on DOM ready (double safety)
    attachLoginHandler();
    
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', attachLoginHandler);
    } else {
      // DOM already ready, attach again to be sure
      setTimeout(attachLoginHandler, 0);
    }
    
    // Also attach on window load as final fallback
    window.addEventListener('load', function() {
      setTimeout(attachLoginHandler, 100);
    });

    // Register Form Handler
    const registerForm = document.getElementById('registerForm');
    const registerBtn = document.getElementById('registerBtn');

    registerForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      hideMessage('errorMessage');
      hideMessage('successMessage');

      const name = document.getElementById('registerName').value.trim();
      const email = document.getElementById('registerEmail').value.trim();
      const password = document.getElementById('registerPassword').value;
      const phone = document.getElementById('registerPhone').value.trim();
      const newsletter = document.getElementById('newsletter').checked;
      const terms = document.getElementById('terms').checked;

      // Validation
      if (!name) {
        showMessage('errorMessage', 'Please enter your full name', 'error');
        return;
      }

      if (!validateEmail(email)) {
        showMessage('errorMessage', 'Please enter a valid email address', 'error');
        return;
      }

      if (!validatePassword(password)) {
        showMessage('errorMessage', 'Password must be at least 8 characters long', 'error');
        return;
      }

      if (!terms) {
        showMessage('errorMessage', 'Please accept the Terms of Service and Privacy Policy', 'error');
        return;
      }

      registerBtn.classList.add('loading');
      registerBtn.disabled = true;

      try {
        // Register user and add to mailing list
        const response = await fetch('/.netlify/functions/member-register', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            name,
            email,
            password,
            phone: phone || undefined,
            newsletter,
            terms,
            referrer: document.referrer || window.location.href,
            userAgent: navigator.userAgent
          })
        });

        const data = await response.json();

        if (response.ok && data.success) {
          // Store auth token
          sessionStorage.setItem('auth_token', data.token);
          sessionStorage.setItem('user_email', email);
          sessionStorage.setItem('user_name', name);

          showMessage('successMessage', 'Account created successfully! Welcome to VALLEYTAINMENT!', 'success');
          
          // Redirect after success
          setTimeout(() => {
            const redirectUrl = new URLSearchParams(window.location.search).get('redirect') || '/';
            window.location.href = redirectUrl;
          }, 2000);
        } else {
          showMessage('errorMessage', data.message || 'Registration failed. Please try again.', 'error');
          registerBtn.classList.remove('loading');
          registerBtn.disabled = false;
        }
      } catch (error) {
        console.error('Registration error:', error);
        showMessage('errorMessage', 'Connection error. Please try again.', 'error');
        registerBtn.classList.remove('loading');
        registerBtn.disabled = false;
      }
    });

    // Google Sign-In Configuration
    let googleClientId = null;
    
    // Fetch Google Client ID from server
    async function getGoogleClientId() {
      // Check if we're on localhost for development
      const isLocalhost = window.location.hostname === 'localhost' || 
                         window.location.hostname === '127.0.0.1' ||
                         window.location.hostname === '';
      
      try {
        const response = await fetch('/.netlify/functions/get-google-client-id');
        if (!response.ok) {
          // If on localhost and function not available, use test client ID for UI testing
          if (isLocalhost) {
            console.info('🔧 Local development mode: Using test Google Client ID for UI display');
            return '813796860660-7clqokfp0ch2larc48qobbivredrvtpf.apps.googleusercontent.com';
          }
          console.warn('Failed to fetch Google Client ID:', response.status, response.statusText);
          return null;
        }
        const data = await response.json();
        if (data.success && data.clientId) {
          return data.clientId;
        } else {
          // Fallback for localhost if server returns no client ID
          if (isLocalhost) {
            console.info('🔧 Local development mode: Using test Google Client ID for UI display');
            return '813796860660-7clqokfp0ch2larc48qobbivredrvtpf.apps.googleusercontent.com';
          }
          console.warn('Google Client ID not configured:', data.message || 'Unknown error');
          return null;
        }
      } catch (error) {
        // If on localhost and fetch fails, use test client ID for UI testing
        if (isLocalhost) {
          console.info('🔧 Local development mode: Using test Google Client ID for UI display');
          return '813796860660-7clqokfp0ch2larc48qobbivredrvtpf.apps.googleusercontent.com';
        }
        console.warn('Could not fetch Google Client ID:', error);
        return null;
      }
    }
    
    // Initialize Google Sign-In when SDK loads
    async function initializeGoogleSignIn() {
      if (!googleClientId) {
        googleClientId = await getGoogleClientId();
      }
      
      if (!googleClientId) {
        console.warn('Google Client ID not configured. Please set GOOGLE_CLIENT_ID in Netlify environment variables.');
        // Hide Google button containers if no client ID
        const containers = ['google-signin-button', 'google-signin-button-register'];
        containers.forEach(id => {
          const container = document.getElementById(id);
          if (container) {
            container.style.display = 'none';
          }
        });
        return;
      }
      
      google.accounts.id.initialize({
        client_id: googleClientId,
        callback: handleGoogleSignIn,
        auto_select: false,
        cancel_on_tap_outside: true
      });
      
      // Create custom Google Sign-In buttons that match the style of Apple/Spotify buttons
      const containers = ['google-signin-button', 'google-signin-button-register'];
      containers.forEach(id => {
        const container = document.getElementById(id);
        if (container) {
          // Clear any existing content
          container.innerHTML = '';
          
          // Create custom button matching other social buttons
          const googleBtn = document.createElement('button');
          googleBtn.type = 'button';
          googleBtn.className = 'social-btn';
          googleBtn.setAttribute('aria-label', 'Sign in with Google');
          googleBtn.innerHTML = '<i class="fab fa-google"></i>';
          
          // Add click handler to trigger Google Sign-In via redirect
          googleBtn.addEventListener('click', async () => {
            if (!googleClientId) {
              showMessage('errorMessage', 'Google Sign-In is not ready. Please wait a moment and try again.', 'error');
              return;
            }
            
            // Use redirect-based OAuth flow with PKCE (required for public clients)
            // Store the current page URL to redirect back after auth
            const currentUrl = window.location.href;
            sessionStorage.setItem('google_signin_redirect', currentUrl);
            
            // Generate PKCE code verifier and challenge
            function generateCodeVerifier() {
              const array = new Uint8Array(32);
              crypto.getRandomValues(array);
              return btoa(String.fromCharCode.apply(null, array))
                .replace(/\+/g, '-')
                .replace(/\//g, '_')
                .replace(/=/g, '');
            }
            
            async function generateCodeChallenge(verifier) {
              const encoder = new TextEncoder();
              const data = encoder.encode(verifier);
              const digest = await crypto.subtle.digest('SHA-256', data);
              return btoa(String.fromCharCode.apply(null, new Uint8Array(digest)))
                .replace(/\+/g, '-')
                .replace(/\//g, '_')
                .replace(/=/g, '');
            }
            
            try {
              // Generate PKCE values
              const codeVerifier = generateCodeVerifier();
              const codeChallenge = await generateCodeChallenge(codeVerifier);
              
              // Store code verifier for later use
              sessionStorage.setItem('google_oauth_code_verifier', codeVerifier);
              
              // Build Google OAuth URL with PKCE
              const redirectUri = encodeURIComponent(window.location.origin + '/member-login.html');
              const scope = encodeURIComponent('email profile openid');
              const responseType = 'code';
              // URL encode the code_challenge
              const encodedChallenge = encodeURIComponent(codeChallenge);
              const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
                `client_id=${googleClientId}&` +
                `redirect_uri=${redirectUri}&` +
                `response_type=${responseType}&` +
                `scope=${scope}&` +
                `code_challenge=${encodedChallenge}&` +
                `code_challenge_method=S256&` +
                `access_type=online&` +
                `prompt=select_account`;
              
              console.log('🔐 PKCE OAuth flow:', {
                hasCodeVerifier: !!codeVerifier,
                codeVerifierLength: codeVerifier ? codeVerifier.length : 0,
                codeChallengeLength: codeChallenge ? codeChallenge.length : 0,
                redirectUri: window.location.origin + '/member-login.html'
              });
              
              // Redirect to Google OAuth
              window.location.href = authUrl;
            } catch (error) {
              console.error('Error generating PKCE challenge:', error);
              showMessage('errorMessage', 'Failed to initialize Google Sign-In. Please try again.', 'error');
            }
          });
          
          container.appendChild(googleBtn);
          container.style.display = 'flex';
        }
      });
      
      // Check if we're returning from Google OAuth
      const urlParams = new URLSearchParams(window.location.search);
      const authCode = urlParams.get('code');
      if (authCode) {
        // We have an authorization code, exchange it for ID token
        handleGoogleAuthCode(authCode);
      }
    }

    // Handle Google OAuth authorization code
    async function handleGoogleAuthCode(code) {
      try {
        hideMessage('errorMessage');
        hideMessage('successMessage');
        
        showMessage('successMessage', 'Authenticating with Google...', 'success');
        
        // Check if we're on localhost for development
        const isLocalhost = window.location.hostname === 'localhost' || 
                           window.location.hostname === '127.0.0.1' ||
                           window.location.hostname === '';
        
        let data;
        
        if (isLocalhost) {
          // Local development: Use mock authentication
          console.info('🔧 Local development mode: Google OAuth callback - using mock authentication');
          
          // For local dev, we can't actually exchange the code, so we'll create a mock user
          // In production, this would be handled by the Netlify function
          const mockEmail = 'google-user@example.com';
          const mockName = 'Google User';
          const token = btoa(`${mockEmail}:${Date.now()}:persist`);
          
          data = {
            success: true,
            message: 'Google authentication successful (local dev mode)',
            token: token,
            user: {
              email: mockEmail,
              name: mockName,
              picture: null
            },
            rememberMe: true
          };
          
          console.warn('⚠️ Local dev: Google OAuth code exchange requires Netlify function. Using mock authentication.');
        } else {
          // Production: Send code to backend to exchange for ID token
          // Get PKCE code verifier from session storage
          const codeVerifier = sessionStorage.getItem('google_oauth_code_verifier');
          sessionStorage.removeItem('google_oauth_code_verifier'); // Clean up
          
          const authResponse = await fetch('/.netlify/functions/google-auth', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
              code: code, 
              redirect_uri: window.location.origin + '/member-login.html',
              code_verifier: codeVerifier
            })
          });

          if (!authResponse.ok) {
            const errorText = await authResponse.text();
            let errorData;
            try {
              errorData = JSON.parse(errorText);
            } catch {
              errorData = { message: `Server error (${authResponse.status})` };
            }
            
            console.error('❌ Google auth error:', errorData);
            
            // Show detailed error message
            let errorMsg = errorData.message || 'Authentication failed. Please try again.';
            if (errorData.error && errorData.error.error_description) {
              errorMsg += ` (${errorData.error.error_description})`;
            }
            
            showMessage('errorMessage', errorMsg, 'error');
            
            // Log debug info if available
            if (errorData.debug) {
              console.error('Debug info:', errorData.debug);
            }
            
            return;
          }

          data = await authResponse.json();
        }

        if (data.success && data.token && data.user) {
          // Store auth token
          if (data.rememberMe) {
            localStorage.setItem('auth_token', data.token);
            localStorage.setItem('user_email', data.user.email);
            localStorage.setItem('user_name', data.user.name || 'User');
          } else {
            sessionStorage.setItem('auth_token', data.token);
            sessionStorage.setItem('user_email', data.user.email);
            sessionStorage.setItem('user_name', data.user.name || 'User');
          }

          showMessage('successMessage', 'Login successful! Redirecting...', 'success');
          
          // Redirect to intended page or home
          setTimeout(() => {
            const redirectUrl = sessionStorage.getItem('google_signin_redirect') || 
                               new URLSearchParams(window.location.search).get('redirect') || 
                               '/';
            sessionStorage.removeItem('google_signin_redirect');
            // Clean URL
            window.history.replaceState({}, document.title, '/member-login.html');
            window.location.href = redirectUrl;
          }, 1500);
        } else {
          showMessage('errorMessage', data.message || 'Google authentication failed. Please try again.', 'error');
        }
      } catch (error) {
        console.error('Google Auth Code error:', error);
        showMessage('errorMessage', 'Connection error. Please check your internet connection and try again.', 'error');
      }
    }

    // Handle Google Sign-In response (for One Tap/popup flows)
    async function handleGoogleSignIn(response) {
      try {
        hideMessage('errorMessage');
        hideMessage('successMessage');
        
        if (!response || !response.credential) {
          showMessage('errorMessage', 'Invalid Google Sign-In response. Please try again.', 'error');
          return;
        }
        
        showMessage('successMessage', 'Authenticating with Google...', 'success');
        
        // Send credential to backend for verification
        const authResponse = await fetch('/.netlify/functions/google-auth', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ credential: response.credential })
        });

        if (!authResponse.ok) {
          const errorText = await authResponse.text();
          let errorData;
          try {
            errorData = JSON.parse(errorText);
          } catch {
            errorData = { message: `Server error (${authResponse.status})` };
          }
          showMessage('errorMessage', errorData.message || 'Authentication failed. Please try again.', 'error');
          return;
        }

        const data = await authResponse.json();

        if (data.success && data.token && data.user) {
          // Store auth token
          if (data.rememberMe) {
            localStorage.setItem('auth_token', data.token);
            localStorage.setItem('user_email', data.user.email);
            localStorage.setItem('user_name', data.user.name || 'User');
          } else {
            sessionStorage.setItem('auth_token', data.token);
            sessionStorage.setItem('user_email', data.user.email);
            sessionStorage.setItem('user_name', data.user.name || 'User');
          }

          showMessage('successMessage', 'Login successful! Redirecting...', 'success');
          
          // Redirect to intended page or home
          setTimeout(() => {
            const redirectUrl = new URLSearchParams(window.location.search).get('redirect') || '/';
            window.location.href = redirectUrl;
          }, 1500);
        } else {
          showMessage('errorMessage', data.message || 'Google authentication failed. Please try again.', 'error');
        }
      } catch (error) {
        console.error('Google Sign-In error:', error);
        showMessage('errorMessage', 'Connection error. Please check your internet connection and try again.', 'error');
      }
    }

    // Initialize Google Sign-In when SDK loads
    window.addEventListener('load', async () => {
      // Function to try initialization
      const tryInitialize = async () => {
        if (typeof google !== 'undefined' && google.accounts && google.accounts.id) {
          await initializeGoogleSignIn();
          return true;
        }
        return false;
      };

      // Try immediately
      if (await tryInitialize()) {
        return;
      }

      // Wait for Google SDK to load (check every 100ms)
      const checkGoogle = setInterval(async () => {
        if (await tryInitialize()) {
          clearInterval(checkGoogle);
        }
      }, 100);
      
      // Timeout after 10 seconds
      setTimeout(() => {
        clearInterval(checkGoogle);
        if (!googleClientId) {
          console.warn('Google Sign-In SDK failed to load. Please check your internet connection and try refreshing the page.');
          const containers = ['google-signin-button', 'google-signin-button-register'];
          containers.forEach(id => {
            const container = document.getElementById(id);
            if (container) {
              container.innerHTML = '<button type="button" class="social-btn" style="width: 100%;" onclick="alert(\'Google Sign-In is temporarily unavailable. Please use email/password registration.\')"><i class="fab fa-google"></i> Google (Unavailable)</button>';
            }
          });
        }
      }, 10000);
    });

    // Placeholder for other social login buttons
    document.querySelectorAll('.social-btn[aria-label*="Apple"], .social-btn[aria-label*="Spotify"]').forEach(btn => {
      btn.addEventListener('click', () => {
        showMessage('errorMessage', 'Apple and Spotify login coming soon!', 'error');
      });
    });

    // Check if already logged in
    function checkAuthStatus() {
      // Check for member auth token
      const memberToken = localStorage.getItem('auth_token') || sessionStorage.getItem('auth_token');
      // Check for staff token (staff members also have full user access)
      const staffToken = localStorage.getItem('staffToken');
      if (memberToken || staffToken) {
        const redirectUrl = new URLSearchParams(window.location.search).get('redirect') || '/';
        if (redirectUrl !== window.location.pathname) {
          window.location.href = redirectUrl;
        }
      }
    }

    // Proceed as guest handler
    function handleProceedAsGuest() {
      try {
        // Set guest mode flag
        localStorage.setItem('guestMode', 'true');
        
        // Get redirect URL or go to home
        const redirectUrl = new URLSearchParams(window.location.search).get('redirect') || '/';
        
        // Redirect to intended page or home
        window.location.href = redirectUrl;
      } catch(e) {
        console.error('Error proceeding as guest:', e);
        // Fallback: just go home
        window.location.href = '/';
      }
    }

    // Attach proceed as guest button handler
    document.addEventListener('DOMContentLoaded', function() {
      const proceedAsGuestBtn = document.getElementById('proceed-as-guest-btn');
      if (proceedAsGuestBtn) {
        proceedAsGuestBtn.addEventListener('click', handleProceedAsGuest);
      }
    });

    checkAuthStatus();
    })(); // End IIFE - ensure all code runs in isolated scope
    
    // Fallback: If IIFE failed, try to initialize on DOM ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM loaded, re-initializing...');
        const canvas = document.getElementById('bg-canvas');
        if (canvas && !canvas.dataset.initialized) {
          canvas.dataset.initialized = 'true';
          // Re-run initialization if needed
          const loginForm = document.getElementById('loginForm');
          if (loginForm && !loginForm.dataset.handlerAttached) {
            console.log('Re-attaching login handler...');
            // Handler will be attached by attachLoginHandler function
          }
        }
      });
    }
  </script>

  <!-- Navigation JavaScript -->
  <script src="includes/navigation.js"></script>
</body>
</html>