{% extends 'base.html' %}

{% block main %}
<div x-data="{
          q: '',
          cat: 'all',
          open: null,
          items: [
            { id:'a1', cat:'account', q:'How do I create a new workspace?', a:'Open the workspace switcher in the top-left, choose “New workspace”, give it a name and pick a region. Your first three workspaces are free on every paid plan.' },
            { id:'a2', cat:'account', q:'Can I transfer ownership of my account?', a:'Yes. Go to Settings → Members, open the member you want to promote and select “Transfer ownership”. You’ll confirm by email — the change is instant once both parties accept.' },
            { id:'a3', cat:'account', q:'How do I delete my account?', a:'Account deletion lives under Settings → Danger zone. We keep a 14-day grace window during which you can restore everything, after which data is permanently purged.' },
            { id:'b1', cat:'billing', q:'When am I charged for my subscription?', a:'Monthly plans renew on the calendar day you subscribed; annual plans renew on the anniversary date. We email an invoice 3 days before every renewal.' },
            { id:'b2', cat:'billing', q:'Can I get a refund?', a:'We offer a no-questions-asked refund within 14 days of any new charge. Reach out from the billing page and the credit lands back on your card within 5–10 business days.' },
            { id:'b3', cat:'billing', q:'Do prices include tax?', a:'Listed prices are exclusive of VAT and sales tax. Applicable tax is calculated at checkout based on your billing address and shown on every invoice.' },
            { id:'s1', cat:'security', q:'Where is my data stored?', a:'Data is stored in SOC 2 Type II certified data centers in your chosen region (US, EU or AP). It is encrypted at rest with AES-256 and in transit with TLS 1.3.' },
            { id:'s2', cat:'security', q:'Do you support two-factor authentication?', a:'Yes — TOTP authenticator apps and hardware security keys (WebAuthn) are supported on all plans. Admins can enforce 2FA org-wide from Security settings.' },
            { id:'s3', cat:'security', q:'How do I report a vulnerability?', a:'Email security@vireo.io or use our responsible-disclosure form. Verified reports are eligible for a bounty and we acknowledge every submission within one business day.' },
            { id:'i1', cat:'integrations', q:'Which integrations are available?', a:'Vireo connects natively with Slack, Linear, GitHub, Stripe, Google Workspace and 40+ other tools. Anything else can be wired through our REST API and webhooks.' },
            { id:'i2', cat:'integrations', q:'Is there a public API?', a:'Pro and above include a full REST API plus signed webhooks. Generate keys under Settings → Developer, and explore every endpoint in our interactive API reference.' }
          ],
          get filtered() {
            const term = this.q.trim().toLowerCase();
            return this.items.filter(it =>
              (this.cat === 'all' || it.cat === this.cat) &&
              (term === '' || it.q.toLowerCase().includes(term) || it.a.toLowerCase().includes(term))
            );
          },
          mark(text) {
            const term = this.q.trim();
            if (!term) return text;
            const safe = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            return text.replace(new RegExp('(' + safe + ')', 'ig'), '<mark class=\'ax-mark\'>$1</mark>');
          }
        }">
        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Frequently asked questions</h1>
              <p class="ax-page-head__subtitle">Answers to the questions our customers ask most. Can't find what you need? Contact support.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--primary" href="/pages/support/">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"/></svg>
              <span class="ax-btn__label">Contact support</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid">

          <!-- search + filters -->
          <section class="ax-card ax-col--12" role="region" aria-label="Search FAQs">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <div style="position:relative;max-width:560px;width:100%;">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-text-subtle)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-inline-start:var(--ax-space-3);top:50%;transform:translateY(-50%);pointer-events:none;"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                <input type="search" class="ax-input" placeholder="Search questions…" aria-label="Search questions" x-model="q" @keydown.escape="q=''" style="padding-inline-start:var(--ax-space-9);">
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-2);flex-wrap:wrap;" role="group" aria-label="Filter by category">
                <button type="button" class="ax-btn ax-btn--pill ax-btn--sm" :class="cat==='all' ? 'ax-btn--primary' : 'ax-btn--secondary'" @click="cat='all'">All</button>
                <button type="button" class="ax-btn ax-btn--pill ax-btn--sm" :class="cat==='account' ? 'ax-btn--primary' : 'ax-btn--secondary'" @click="cat='account'">Account</button>
                <button type="button" class="ax-btn ax-btn--pill ax-btn--sm" :class="cat==='billing' ? 'ax-btn--primary' : 'ax-btn--secondary'" @click="cat='billing'">Billing</button>
                <button type="button" class="ax-btn ax-btn--pill ax-btn--sm" :class="cat==='security' ? 'ax-btn--primary' : 'ax-btn--secondary'" @click="cat='security'">Security</button>
                <button type="button" class="ax-btn ax-btn--pill ax-btn--sm" :class="cat==='integrations' ? 'ax-btn--primary' : 'ax-btn--secondary'" @click="cat='integrations'">Integrations</button>
              </div>
              <p class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-mono);" aria-live="polite" x-text="filtered.length + (filtered.length === 1 ? ' question' : ' questions')">11 questions</p>
            </div>
          </section>

          <!-- accordion list -->
          <section class="ax-card ax-col--8" role="region" aria-label="Questions">
            <div class="ax-card__body">
              <div class="ax-accordion">
                <template x-for="(it, i) in filtered" :key="it.id">
                  <div class="ax-accordion__item">
                    <button type="button" class="ax-accordion__header" :aria-expanded="(open===it.id).toString()" :aria-controls="'panel-'+it.id" @click="open = open===it.id ? null : it.id">
                      <span class="ax-accordion__title" x-html="mark(it.q)"></span>
                      <svg class="ax-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
                    </button>
                    <div class="ax-accordion__panel" :id="'panel-'+it.id" x-show="open===it.id" x-collapse x-text="it.a"></div>
                  </div>
                </template>
              </div>
              <!-- empty state -->
              <div class="ax-flex" x-show="filtered.length === 0" x-cloak style="flex-direction:column;align-items:center;text-align:center;gap:var(--ax-space-3);padding:var(--ax-space-10) var(--ax-space-5);">
                <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:var(--ax-fill-hover);color:var(--ax-text-subtle);">
                  <svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                </span>
                <div>
                  <p style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-md);">No matching questions</p>
                  <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">Try a different keyword or clear your search.</p>
                </div>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" @click="q=''; cat='all'">Clear search</button>
              </div>
            </div>
          </section>

          <!-- categories rail + contact -->
          <div class="ax-col--4" style="display:flex;flex-direction:column;gap:var(--ax-space-6);">
            <section class="ax-card" role="region" aria-label="Browse by category">
              <div class="ax-card__header">
                <div class="ax-card__titles">
                  <h2 class="ax-card__title" style="font-size:var(--ax-text-md);">Categories</h2>
                </div>
              </div>
              <div class="ax-card__body" style="padding-top:0;">
                <ul class="ax-list ax-list--compact">
                  <li class="ax-list__row" style="cursor:pointer;" @click="cat='account'; q=''">
                    <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/><path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"/></svg></span></span>
                    <span class="ax-list__content"><span class="ax-list__title">Account</span></span>
                    <span class="ax-list__trailing ax-num" style="color:var(--ax-text-subtle);">3</span>
                  </li>
                  <li class="ax-list__row" style="cursor:pointer;" @click="cat='billing'; q=''">
                    <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-violet) 18%,transparent);color:var(--ax-viz-violet);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -8"/><path d="M3 10l18 0"/><path d="M7 15l.01 0"/><path d="M11 15l2 0"/></svg></span></span>
                    <span class="ax-list__content"><span class="ax-list__title">Billing</span></span>
                    <span class="ax-list__trailing ax-num" style="color:var(--ax-text-subtle);">3</span>
                  </li>
                  <li class="ax-list__row" style="cursor:pointer;" @click="cat='security'; q=''">
                    <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"/><path d="M11 11a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M12 12l0 2.5"/></svg></span></span>
                    <span class="ax-list__content"><span class="ax-list__title">Security</span></span>
                    <span class="ax-list__trailing ax-num" style="color:var(--ax-text-subtle);">3</span>
                  </li>
                  <li class="ax-list__row" style="cursor:pointer;" @click="cat='integrations'; q=''">
                    <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-amber) 18%,transparent);color:var(--ax-viz-amber);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.785 6l8.215 8.215l-2.054 2.054a5.81 5.81 0 1 1 -8.215 -8.215l2.054 -2.054"/><path d="M4 20l3.5 -3.5"/><path d="M15 4l-3.5 3.5"/><path d="M20 9l-3.5 3.5"/></svg></span></span>
                    <span class="ax-list__content"><span class="ax-list__title">Integrations</span></span>
                    <span class="ax-list__trailing ax-num" style="color:var(--ax-text-subtle);">2</span>
                  </li>
                </ul>
              </div>
            </section>

            <section class="ax-card" role="region" aria-label="Contact support">
              <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-3);text-align:center;align-items:center;">
                <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:var(--ax-accent-wash);color:var(--ax-accent);">
                  <svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"/></svg>
                </span>
                <div>
                  <p style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Didn't find an answer?</p>
                  <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:4px;">Our team typically replies within a few hours.</p>
                </div>
                <a class="ax-btn ax-btn--primary ax-btn--block" href="/pages/support/">
                  <span class="ax-btn__label">Contact support</span>
                </a>
              </div>
            </section>
          </div>
        </div>

      
</div>
{% endblock %}