<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Connexion — STOA</title>
  <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@100;300;500;700;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body class="login-page">
  <main class="login-shell">
    <section class="login-card">
      <a href="/login" class="brand login-brand">
        <span class="logo" aria-label="stoa">
          <span class="logo-word">
            <span class="logo-s">s</span><span class="logo-t">t</span><span class="logo-o">o</span><span class="logo-a">a</span>
          </span>
          <span class="logo-tagline">Construction productive</span>
        </span>
      </a>

      <h1>Connexion</h1>
      <p class="muted login-lead">Accédez à votre espace promoteur.</p>

      <% if (error) { %>
        <div class="alert"><%= error %></div>
      <% } %>

      <form method="POST" action="/login" class="login-form">
        <input type="hidden" name="next" value="<%= next || '/' %>">
        <label>
          <span>Email</span>
          <input type="email" name="email" required autocomplete="username" value="<%= email || '' %>" placeholder="prenom.nom@stoa.fr">
        </label>
        <label>
          <span>Mot de passe</span>
          <input type="password" name="password" required autocomplete="current-password" placeholder="••••••••">
        </label>
        <button type="submit" class="btn btn-primary login-submit">Se connecter</button>
      </form>
    </section>
  </main>
</body>
</html>
