{% extends "base.html" %}
{% block content %}
<section class="pagehead">
  <div class="container">
    <div class="breadcrumb"><a href="/">Home</a> / FAQ</div>
    <div class="eyebrow">FAQ</div>
    <h1>Frequently asked questions</h1>
    <p>General questions about AlexaMods Labs. For app-specific questions, visit any app's own FAQ page.</p>
  </div>
</section>
<section class="section--tight">
  <div class="container" style="max-width:820px;">
    {% for f in faqs %}
    <div class="accordion-item {% if loop.first %}open{% endif %}">
      <div class="accordion-q"><span>{{ f.q }}</span><span class="plus"></span></div>
      <div class="accordion-a"><div class="accordion-a-inner">{{ f.a }}</div></div>
    </div>
    {% endfor %}

    <div style="margin-top:44px;">
      <div class="eyebrow">Per-App FAQ</div>
      <div class="grid grid-3" data-stagger>
        {% for app in apps %}
        <a href="/apps/{{ app.slug }}/faq/" class="card reveal flex gap-16 center">
          <div class="app-icon sm" style="background: linear-gradient(135deg, {{ app.gradient[0] }}, {{ app.gradient[1] }});">{{ app.icon_letters }}</div>
          <span style="font-size:14px; color:var(--text-0); font-weight:600;">{{ app.name }}</span>
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
{% endblock %}