<!--
 * =====================================================================
 * | VALLEYTAINMENT PRODUCTIONS - STAFF LOGIN PAGE                      |
 * | ================================================================= |
 * | FILE: valleytainment_final_working_v2/staff-login.html           |
 * | PURPOSE: Secure staff authentication page                        |
 * | AUTHOR: Valleytainment Development Team                           |
 * | VERSION: 2.0.0 - Production Ready                                |
 * | LAST UPDATED: 2025-12-08                                         |
 * | ================================================================= |
 * |                                                                   |
 * | 📋 DESCRIPTION:                                                   |
 * | Secure staff login page for Valleytainment staff members.        |
 * | Provides authentication interface with username/password login   |
 * | and visual effects. Protected with noindex/nofollow for security.  |
 * |                                                                   |
 * | 🎯 KEY FEATURES:                                                  |
 * | ✅ Secure staff authentication                                    |
 * | ✅ Username/password login form                                   |
 * | ✅ Visual effects and animations                                  |
 * | ✅ Responsive design for all devices                             |
 * | ✅ Error handling and validation                                  |
 * | ✅ Session management                                             |
 * | ✅ Security-focused design                                        |
 * |                                                                   |
 * | 🛠️ TECHNICAL DETAILS:                                            |
 * | - HTML5 with semantic markup                                      |
 * | - CSS3 with custom animations and effects                        |
 * | - Vanilla JavaScript for form handling                           |
 * | - Canvas API for background effects                               |
 * | - Form validation and error handling                             |
 * |                                                                   |
 * | 📚 DEPENDENCIES:                                                  |
 * | - No external JavaScript libraries required                        |
 * | - Canvas API for background effects (browser native)             |
 * | - Google Fonts: Typography (loaded via CDN)                      |
 * |                                                                   |
 * | 🎨 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 endpoint                                 |
 * | 5. Add additional security features                                |
 * |                                                                   |
 * | 🐛 DEBUGGING:                                                     |
 * | - Check browser console for JavaScript errors                    |
 * | - Verify form submission handling                                 |
 * | - Test authentication flow                                        |
 * | - Check network requests for API calls                            |
 * | - Verify session management                                       |
 * |                                                                   |
 * | 📖 FOR BEGINNERS:                                                 |
 * | This login page works by:                                         |
 * | 1. Displaying login form with username/password fields            |
 * | 2. Validating input on form submission                            |
 * | 3. Sending credentials to authentication endpoint                 |
 * | 4. Handling success/error responses                               |
 * | 5. Redirecting to dashboard on successful login                   |
 * |                                                                   |
 * | Security features:                                               |
 * | - Noindex/nofollow prevents search engine indexing                |
 * | - Secure form submission                                          |
 * | - Input validation                                                |
 * | - Error message handling                                          |
 * |                                                                   |
 * | 🔒 SECURITY:                                                      |
 * | - Noindex, nofollow meta tags for SEO protection                 |
 * | - Secure form submission (HTTPS)                                   |
 * | - Input validation and sanitization                               |
 * | - No sensitive data in client-side code                           |
 * | - Session management                                              |
 * | - CSRF protection (if implemented)                                |
 * |                                                                   |
 * | ⚡ PERFORMANCE:                                                   |
 * | - Minimal external dependencies                                    |
 * | - Efficient canvas animations                                     |
 * | - Optimized form handling                                          |
 * | - 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>Staff Login | VALLEYTAINMENT</title>
  <meta name="robots" content="noindex, nofollow" />
  <link rel="canonical" href="https://valleytainment.com/staff-login.html" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      font-family: 'Montserrat', Arial, sans-serif;
      background: #0a0e27;
      color: #f8f8f8;
      overflow: hidden;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Background VFX */
    #bg-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .login-container {
      width: 90%;
      max-width: 420px;
      z-index: 10;
      position: relative;
    }

    .login-card {
      background: rgba(15, 23, 42, 0.8);
      backdrop-filter: blur(10px);
      border: 2px solid rgba(0, 255, 221, 0.3);
      border-radius: 15px;
      padding: 40px;
      box-shadow: 0 8px 32px rgba(0, 255, 221, 0.1);
      transition: all 0.3s ease;
    }

    .login-card:hover {
      border-color: rgba(0, 255, 221, 0.6);
      box-shadow: 0 8px 32px rgba(0, 255, 221, 0.2);
    }

    .login-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .login-header h1 {
      font-size: 28px;
      background: linear-gradient(135deg, #00ffdd, #ff006e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .login-header p {
      color: #a0a0a0;
      font-size: 14px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #00ffdd;
    }

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

    input[type="email"]:focus,
    input[type="password"]:focus {
      outline: none;
      background: rgba(30, 41, 59, 0.9);
      border-color: rgba(0, 255, 221, 0.6);
      box-shadow: 0 0 20px rgba(0, 255, 221, 0.2);
    }

    input[type="email"]::placeholder,
    input[type="password"]::placeholder {
      color: rgba(160, 160, 160, 0.5);
    }

    .login-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, #00ffdd, #00d9ff);
      color: #0a0e27;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 10px;
      font-family: 'Montserrat', Arial, sans-serif;
    }

    .login-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 255, 221, 0.4);
    }

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

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

    .error-message {
      display: none;
      background: rgba(255, 0, 100, 0.1);
      border: 1px solid rgba(255, 0, 100, 0.5);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 20px;
      font-size: 13px;
      color: #ff6b9d;
      text-align: center;
    }

    .error-message.show {
      display: block;
      animation: shake 0.5s ease;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }

    .loading-spinner {
      display: none;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(0, 255, 221, 0.3);
      border-top: 2px solid #00ffdd;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto;
    }

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

    .demo-credentials {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid rgba(0, 255, 221, 0.2);
      text-align: center;
      font-size: 12px;
      color: #a0a0a0;
    }

    .demo-credentials p {
      margin-bottom: 8px;
    }

    .demo-credentials code {
      background: rgba(0, 255, 221, 0.1);
      padding: 3px 6px;
      border-radius: 4px;
      color: #00ffdd;
      font-family: 'Courier New', monospace;
    }

    @media (max-width: 480px) {
      .login-card {
        padding: 30px 20px;
      }

      .login-header h1 {
        font-size: 22px;
      }
    }
  </style>
</head>
<body>
  <canvas id="bg-canvas"></canvas>

  <!-- Minimal Navigation for Staff 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 style="padding: 0.75rem 1rem; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;">
      <a href="/" 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">
    <div class="login-card">
      <div class="login-header">
        <h1>🔐 Staff Access</h1>
        <p>VALLEYTAINMENT Blog Dashboard</p>
      </div>

      <form id="loginForm" novalidate>
        <div class="error-message" id="errorMessage"></div>

        <div class="form-group">
          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="you@valleytainment.com"
            required
            autocomplete="email"
          />
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="••••••••"
            required
            autocomplete="current-password"
          />
        </div>

        <button type="submit" class="login-btn" id="loginBtn">
          <span id="btnText">Log In</span>
          <div class="loading-spinner" id="spinner"></div>
        </button>
      </form>

    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/firebase@10.14.1/firebase-app-compat.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/firebase@10.14.1/firebase-auth-compat.js" crossorigin="anonymous"></script>
  <script src="/js/firebase-client.js?v=4"></script>
  <script>
    ValleyFirebase.unregisterServiceWorkers();

    // Background animation (simplified version - matches site aesthetic)
    const canvas = document.getElementById('bg-canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let particles = [];

    class Particle {
      constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 2;
        this.speedX = (Math.random() - 0.5) * 1;
        this.speedY = (Math.random() - 0.5) * 1;
        this.opacity = Math.random() * 0.5;
      }

      update() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.opacity -= 0.002;

        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;
      }

      draw() {
        ctx.fillStyle = `rgba(0, 255, 221, ${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 < 50; 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();
      });

      if (particles.length < 50) {
        particles.push(new Particle());
      }

      requestAnimationFrame(animateBackground);
    }

    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });

    initParticles();
    animateBackground();

    // Login form handler
    const loginForm = document.getElementById('loginForm');
    const errorMessage = document.getElementById('errorMessage');
    const loginBtn = document.getElementById('loginBtn');
    const spinner = document.getElementById('spinner');
    const btnText = document.getElementById('btnText');

    document.getElementById('email').addEventListener('input', function() {
      this.setCustomValidity('');
    });

    loginForm.addEventListener('submit', async (e) => {
      e.preventDefault();

      const email = document.getElementById('email').value.trim();
      const password = document.getElementById('password').value;

      // Clear previous error
      errorMessage.classList.remove('show');
      errorMessage.textContent = '';

      // Show loading state
      loginBtn.disabled = true;
      spinner.style.display = 'block';
      btnText.textContent = 'Authenticating...';

      try {
        await ValleyFirebase.signInWithEmail(email, password);
        const session = await ValleyFirebase.requireStaffOrAdmin();

        localStorage.setItem('staffUsername', session.email || email);
        localStorage.setItem('staffName', session.email || 'Staff');
        localStorage.setItem('user_role', session.role);
        localStorage.removeItem('staffToken');

        window.location.replace(ValleyFirebase.dashboardPathForRole(session.role));
      } catch (error) {
        console.error('Login error:', error);
        showError(error.message || 'Invalid email or password');
      } finally {
        loginBtn.disabled = false;
        spinner.style.display = 'none';
        btnText.textContent = 'Log In';
      }
    });

    function showError(message) {
      errorMessage.textContent = message;
      errorMessage.classList.add('show');
    }

  </script>
</body>
</html>