{% extends "base.html" %}
{% load static %}

{% block title %}FAQ{% endblock %}
{% block meta_description %}Frequently asked questions about ViSERA by Tecvico — licensing, citation, system requirements, and more.{% endblock %}

{% block content %}

<section class="page-hero" aria-labelledby="faq-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">Help</div>
      <h1 class="page-hero-title" id="faq-heading">FAQ</h1>
      <p class="page-hero-subtitle">Frequently Asked Questions</p>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="faq-list-heading">
  <div class="container">
    <h2 class="sr-only" id="faq-list-heading">FAQ List</h2>
    {% if faq_entries %}
    <div class="faq-list">
      {% for entry in faq_entries %}
      <div class="faq-item glass-card fade-in">
        <button
          class="faq-question"
          aria-expanded="false"
          aria-controls="faq-answer-{{ entry.pk }}"
          id="faq-question-{{ entry.pk }}"
        >
          {{ entry.question }}
          <svg class="faq-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
            <path d="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <div
          class="faq-answer"
          id="faq-answer-{{ entry.pk }}"
          role="region"
          aria-labelledby="faq-question-{{ entry.pk }}"
          hidden
        >
          <p>{{ entry.answer }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="empty-state">No FAQ entries available yet.</p>
    {% endif %}

    <div class="faq-contact glass-card fade-in">
      <h2>Still Have Questions?</h2>
      <p>Can't find the answer you're looking for? Get in touch with our support team.</p>
      <a href="{% url 'pages:contact' %}" class="btn-primary">Contact Support</a>
    </div>
  </div>
</section>

{% endblock %}