{% extends "base.html" %}
{% block title %}Accueil{% endblock %}

{% block content %}
<section class="hero">
  <h1>Quiz Linux <span class="hero-sub">par Alpinux</span></h1>
  <p class="hero-desc">
    Testez vos connaissances sur Linux — du premier clic sur le bureau
    jusqu'aux scripts Bash et la sécurité système.
  </p>
  <div class="hero-actions">
    <a href="{{ url_for('public.quiz_list') }}" class="btn btn-primary">Voir tous les quiz</a>
    {% if not user %}
      <a href="{{ url_for('auth.login') }}" class="btn btn-outline">
        Se connecter pour accéder aux quiz Avancé &amp; Expert
      </a>
    {% endif %}
  </div>
</section>

<section class="levels-section">
  <h2 class="section-title">Cinq niveaux progressifs</h2>
  <div class="levels-grid">
    <div class="level-card level-1">
      <span class="level-icon">🌱</span>
      <strong>Découverte</strong>
      <p>Bureau, internet, navigateur web</p>
      <span class="badge public">Public</span>
    </div>
    <div class="level-card level-2">
      <span class="level-icon">📘</span>
      <strong>Débutant</strong>
      <p>Fichiers, logiciels, Linux Mint</p>
      <span class="badge public">Public</span>
    </div>
    <div class="level-card level-3">
      <span class="level-icon">⚡</span>
      <strong>Intermédiaire</strong>
      <p>Terminal, permissions</p>
      <span class="badge public">Public</span>
    </div>
    <div class="level-card level-4">
      <span class="level-icon">🔧</span>
      <strong>Avancé</strong>
      <p>Git, administration système</p>
      <span class="badge members">Membres</span>
    </div>
    <div class="level-card level-5">
      <span class="level-icon">🏆</span>
      <strong>Expert</strong>
      <p>Sécurité, Bash scripting</p>
      <span class="badge members">Membres</span>
    </div>
  </div>
</section>

<section class="quizzes-preview">
  <h2 class="section-title">Quiz disponibles</h2>
  <div class="quiz-grid">
    {% for quiz in quizzes[:6] %}
    <a href="{{ url_for('public.quiz_intro', quiz_id=quiz.id) }}" class="quiz-card {% if quiz.members_only %}quiz-card--members{% endif %}">
      <span class="quiz-icon">{{ quiz.icon }}</span>
      <div class="quiz-card-body">
        <h3>{{ quiz.title }}</h3>
        <p>{{ quiz.description }}</p>
        <div class="quiz-meta">
          <span class="level-badge level-badge-{{ quiz.level_id }}">{{ quiz.level }}</span>
          <span class="quiz-duration">⏱ {{ quiz.duration_min }} min</span>
          {% if quiz.members_only %}
            <span class="lock-badge">🔒 Membres</span>
          {% endif %}
        </div>
      </div>
    </a>
    {% endfor %}
  </div>
  {% if quizzes|length > 6 %}
  <div style="text-align:center;margin-top:2rem">
    <a href="{{ url_for('public.quiz_list') }}" class="btn btn-outline">Voir les {{ quizzes|length }} quiz</a>
  </div>
  {% endif %}
</section>
{% endblock %}