{% extends "layout/base.html" %} {% block content %}
<nav>
  <div class="container">
    <div class="d-flex py-3 justify-content-between align-items-center">
      <h1>Quizapp</h1>
      <div>
        {% if not user.is_authenticated %}
        <a href="/auth/login" class="btn btn-primary">Login</a>
        {% else %}
        <div class="d-flex gap-2 align-items-center">
          <span class="fw-bold">Welcome, {{user.username}}</span>
          <a href="/quiz" class="btn btn-outline-primary">Go to Quiz</a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</nav>

<div class="container mt-5">
  <div class="row text-center">
    <div class="col-12">
      <h1 class="display-4 text-primary mb-4">Welcome to the Quiz App!</h1>
      <p class="lead text-muted">
        Test your knowledge with fun and exciting quizzes. Are you ready to take
        on the challenge?
      </p>
    </div>
  </div>

  <!-- Main Quiz Options -->
  <div class="row justify-content-center">
    <div class="col-md-4 mb-4">
      <div class="card shadow-sm border-light">
        <div class="card-body">
          <h5 class="card-title text-center">Start a New Quiz</h5>
          <p class="card-text text-center">
            Pick a category and start your quiz adventure!
          </p>
          <a href="/quiz/start" class="btn btn-primary w-100">Start Quiz</a>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card shadow-sm border-light">
        <div class="card-body">
          <h5 class="card-title text-center">Leaderboard</h5>
          <p class="card-text text-center">
            Check out the top scorers and see how you compare!
          </p>
          <a href="/leaderboard" class="btn btn-secondary w-100"
            >View Leaderboard</a
          >
        </div>
      </div>
    </div>
  </div>

  <!-- Features Section -->
  <div class="row mt-5">
    <div class="col-12">
      <h2 class="text-center text-secondary">Features of Our Quiz App</h2>
    </div>

    <div class="col-md-4 text-center mb-4">
      <i class="bi bi-journal-bookmark" style="font-size: 3rem"></i>
      <h4 class="mt-3">Various Categories</h4>
      <p>
        Explore quizzes from various categories and challenge your expertise!
      </p>
    </div>

    <div class="col-md-4 text-center mb-4">
      <i class="bi bi-trophy" style="font-size: 3rem"></i>
      <h4 class="mt-3">Leaderboard</h4>
      <p>Track your performance and compete with players worldwide!</p>
    </div>

    <div class="col-md-4 text-center mb-4">
      <i class="bi bi-clock" style="font-size: 3rem"></i>
      <h4 class="mt-3">Timed Challenges</h4>
      <p>Race against the clock and answer as quickly as you can!</p>
    </div>
  </div>
</div>

{% endblock %}