{% extends "base.html" %}

{% block content %}
<section class="card faq-card">
  <h1>{{ t('faq') }}</h1>
  <p class="faq-intro">{{ t('faq_intro') }}</p>

  <div class="faq-list">
    {% for question_key, answer_key in faq_items %}
    <details class="faq-item">
      <summary>
        <span>{{ t(question_key) }}</span>
        <span class="faq-toggle" aria-hidden="true"></span>
      </summary>
      <div class="faq-answer">
        <p>{{ t(answer_key) }}</p>
      </div>
    </details>
    {% endfor %}
  </div>
  <a class="btn btn-ghost faq-tour-restart" href="{{ url_for('welcome', tour=1) }}">{{ t('tour_restart') }}</a>
</section>
<script src="{{ url_for('static', filename='faq.js', v='20260724a') }}" defer></script>
{% endblock %}