{% extends 'base.html' %}
{% block title %}FAQ — {{ site.site_name }}{% endblock %}
{% block content %}
<section class="page-header">
  <div class="container"><h1>Frequently Asked Questions</h1><p>Answers to common questions about our properties and services.</p></div>
</section>
<section class="section">
  <div class="container" style="max-width: 800px;">
    {% if faqs %}
    <div class="accordion" id="faqAccordion">
      {% for f in faqs %}
      <div class="accordion-item">
        <h3 class="accordion-header">
          <button class="accordion-button {% if not forloop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ f.pk }}">
            {{ f.question }}
          </button>
        </h3>
        <div id="faq{{ f.pk }}" class="accordion-collapse collapse {% if forloop.first %}show{% endif %}" data-bs-parent="#faqAccordion">
          <div class="accordion-body">{{ f.answer|linebreaks }}</div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-center text-muted">No FAQs yet. <a href="{% url 'core:contact' %}">Contact us</a> with your question.</p>
    {% endif %}
  </div>
</section>
{% endblock %}