<div class="flex items-center justify-center min-h-[80vh]">
  <div class="bg-surface-light p-8 rounded-xl glow border border-white/5 w-full max-w-sm">
    <h1 class="text-2xl font-bold text-center mb-6 text-white">Sign In</h1>

    <div id="error" class="bg-red-500/10 text-red-400 text-sm p-3 rounded mb-4 hidden"></div>

    <form id="loginForm">
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-300 mb-1" for="email">Email</label>
        <input type="email" id="email" name="email" required
          class="w-full bg-surface border border-white/10 text-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent/50 placeholder-gray-600"
          placeholder="kai@example.com" value="kai@example.com">
      </div>
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-300 mb-1" for="password">Password</label>
        <input type="password" id="password" name="password" required
          class="w-full bg-surface border border-white/10 text-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent/50"
          value="password123">
      </div>
      <button type="submit"
        class="w-full bg-accent-dim text-white py-2.5 rounded-lg hover:bg-accent transition btn-glow font-medium">
        Sign In
      </button>
    </form>

    <p class="text-xs text-gray-400 text-center mt-4">
      Demo account — just hit Sign In
    </p>
  </div>
</div>

<script>
document.getElementById('loginForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const errorEl = document.getElementById('error');
  errorEl.classList.add('hidden');

  const res = await fetch('/login', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      email: document.getElementById('email').value,
      password: document.getElementById('password').value,
    }),
  });
  const data = await res.json();
  if (data.success)
    location.href = data.redirect;
  else {
    errorEl.textContent = data.message;
    errorEl.classList.remove('hidden');
  }
});
</script>
