<div class="min-h-screen flex items-center justify-center pixel-grid-bg" style="background-image: url('/assets/images/background.svg'); background-size: cover;">
  <div class="w-full max-w-3xl p-8 shadow-xl">
    <div class="mx-auto max-w-lg text-center ">
      <!-- Animated inline logo -->
      <div class="mx-auto mb-4 w-24 logo-anim" aria-hidden="true">
         <img src="/assets/images/logo-amayo.svg" alt="logo" class="mx-auto mb-4 rounded-full" />
      </div>
      <h1 class="text-2xl font-bold text-white">Amayo</h1>
    </div>

    <div class="mx-auto max-w-md glass-card backdrop-blur-md rounded-xl p-4 entrance-card">
      <p class="text-sm text-slate-300 mb-6">Log in with Discord to access the dashboard.</p>

      <a id="discordLoginBtn" href="/auth/discord" class="inline-flex items-center justify-center gap-3 w-full px-4 py-3 rounded-md via-sky-500 hover:via-sky-700 text-white font-medium transition-colors relative overflow-hidden">
        <img src="/assets/images/discord.svg" alt="logo" class="w-5 h-5" />
        <span id="discordLoginText">Log in with Discord</span>
        <!-- spinner -->
        <svg id="discordSpinner" class="w-5 h-5 ml-2 hidden spinner" viewBox="0 0 50 50">
          <circle cx="25" cy="25" r="18" stroke="white" stroke-width="4" stroke-linecap="round" fill="none" stroke-dasharray="80" stroke-dashoffset="60"></circle>
        </svg>
      </a>

      <div class="mt-4 text-sm text-slate-300">
        <label class="inline-flex items-center gap-2">
          <input id="autoLogin" type="checkbox" checked class="form-checkbox h-4 w-4 text-indigo-500" />
          <span>Automatically log in next time</span>
        </label>
      </div>
    </div>
  </div>
</div>

<style>
  /* simple entrance animation */
  @keyframes floatIn { from { transform: translateY(8px) scale(0.98); opacity: 0 } to { transform: translateY(0) scale(1); opacity: 1 } }
  .entrance-card { animation: floatIn 420ms cubic-bezier(.2,.9,.3,1) both; }
  .logo-anim { animation: floatIn 520ms cubic-bezier(.2,.9,.3,1) both; }
  .logo-triangle { transform-origin: 50% 50%; animation: logo-spin 3s linear infinite; }
  @keyframes logo-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

  /* spinner */
  .spinner { animation: spinner-rot 1s linear infinite; }
  @keyframes spinner-rot { to { transform: rotate(360deg) } }

  /* button disabled look when spinner active */
  .btn-busy { pointer-events: none; opacity: 0.85; }
</style>

<script>
  (function(){
    const btn = document.getElementById('discordLoginBtn');
    const spinner = document.getElementById('discordSpinner');
    const text = document.getElementById('discordLoginText');
    if(!btn) return;

    btn.addEventListener('click', function(ev){
      // prevent default to show spinner animation briefly
      ev.preventDefault();
      if(btn.classList.contains('btn-busy')) return;
      btn.classList.add('btn-busy');
      spinner.classList.remove('hidden');
      if(text) text.textContent = 'Redirigiendo...';
      // store preference (optional) — sync to server could be added later
      const auto = document.getElementById('autoLogin');
      try { localStorage.setItem('amayo:autoLogin', auto && auto.checked ? '1' : '0'); } catch(e) {}
      // give the animation a short moment so user sees the spinner
      setTimeout(()=> {
        window.location.href = btn.getAttribute('href');
      }, 220);
    });

    // small UX: if user has previously enabled autoLogin, optionally focus/animate
    try {
      const pref = localStorage.getItem('amayo:autoLogin');
      if(pref === '1') {
        // subtle pulsing to suggest quick login
        btn.animate([{ transform: 'scale(1)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' }], { duration: 1400, iterations: 1 });
      }
    } catch(e){}
  })();
</script>
