<template>
  <div style="max-width: 500px; margin: 2rem auto;">
    <div class="page-header" style="text-align: center;">
      <h1>Connexion</h1>
      <p style="color: var(--color-text-muted);">Choisissez votre espace.</p>
    </div>

    <div class="grid grid-2">
      <NuxtLink to="/login/commune" class="card login-choice">
        <h3>Commune</h3>
        <p>Gérer les données et la tarification de votre commune.</p>
      </NuxtLink>
      <NuxtLink to="/login/admin" class="card login-choice">
        <h3>Super Admin</h3>
        <p>Gestion globale des communes et administrateurs.</p>
      </NuxtLink>
    </div>

    <p style="text-align: center; margin-top: 1.5rem;">
      <NuxtLink to="/">&larr; Retour à l'accueil</NuxtLink>
    </p>
  </div>
</template>

<style scoped>
.login-choice {
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.login-choice:hover {
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.login-choice h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.login-choice p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
</style>
