<div class="container py-5" style="max-width:640px;">
  <h4 class="fw-bold text-center mb-3">Frequently Asked Questions</h4>

  <input type="text" class="form-control mb-3" id="bsfqSearch" placeholder="Search questions...">

  <div class="d-flex gap-2 flex-wrap justify-content-center mb-4" id="bsfqPills">
    <button type="button" class="btn btn-sm btn-primary bsfq-pill active" data-cat="all">All</button>
    <button type="button" class="btn btn-sm btn-outline-primary bsfq-pill" data-cat="billing">Billing</button>
    <button type="button" class="btn btn-sm btn-outline-primary bsfq-pill" data-cat="account">Account</button>
    <button type="button" class="btn btn-sm btn-outline-primary bsfq-pill" data-cat="technical">Technical</button>
  </div>

  <div class="accordion" id="bsfqAccordion">
    <div class="accordion-item bsfq-item" data-cat="billing" data-question="how do i update my billing information">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfqA1">How do I update my billing information?</button>
      </h2>
      <div id="bsfqA1" class="accordion-collapse collapse" data-bs-parent="#bsfqAccordion">
        <div class="accordion-body">Go to Account Settings &gt; Billing and update your card details. Changes apply to your next invoice.</div>
      </div>
    </div>
    <div class="accordion-item bsfq-item" data-cat="billing" data-question="do you offer refunds">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfqA2">Do you offer refunds?</button>
      </h2>
      <div id="bsfqA2" class="accordion-collapse collapse" data-bs-parent="#bsfqAccordion">
        <div class="accordion-body">Yes, within 14 days of purchase. Contact support with your order number to start a refund request.</div>
      </div>
    </div>
    <div class="accordion-item bsfq-item" data-cat="account" data-question="how do i reset my password">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfqA3">How do I reset my password?</button>
      </h2>
      <div id="bsfqA3" class="accordion-collapse collapse" data-bs-parent="#bsfqAccordion">
        <div class="accordion-body">Click "Forgot password" on the login screen and follow the emailed reset link, valid for one hour.</div>
      </div>
    </div>
    <div class="accordion-item bsfq-item" data-cat="account" data-question="can i change my email address">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfqA4">Can I change my email address?</button>
      </h2>
      <div id="bsfqA4" class="accordion-collapse collapse" data-bs-parent="#bsfqAccordion">
        <div class="accordion-body">Yes, from Account Settings &gt; Profile. You will need to verify the new address before it takes effect.</div>
      </div>
    </div>
    <div class="accordion-item bsfq-item" data-cat="technical" data-question="which browsers are supported">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfqA5">Which browsers are supported?</button>
      </h2>
      <div id="bsfqA5" class="accordion-collapse collapse" data-bs-parent="#bsfqAccordion">
        <div class="accordion-body">The latest two versions of Chrome, Firefox, Safari, and Edge are fully supported.</div>
      </div>
    </div>
    <div class="accordion-item bsfq-item" data-cat="technical" data-question="is there an api available">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfqA6">Is there an API available?</button>
      </h2>
      <div id="bsfqA6" class="accordion-collapse collapse" data-bs-parent="#bsfqAccordion">
        <div class="accordion-body">Yes, a REST API is available on paid plans. Find your API key under Account Settings &gt; Developer.</div>
      </div>
    </div>
  </div>

  <p class="text-center text-muted small mt-4 d-none" id="bsfqEmpty">No questions match your search or filter.</p>
</div>

.bsfq-pill.active { pointer-events: none; }
.bsfq-item.d-none { display: none; }

const pills = Array.from(document.querySelectorAll('.bsfq-pill'));
const items = Array.from(document.querySelectorAll('.bsfq-item'));
const searchInput = document.getElementById('bsfqSearch');
const emptyMsg = document.getElementById('bsfqEmpty');

let activeCategory = 'all';

function applyFilters() {
  const query = searchInput.value.trim().toLowerCase();
  let visibleCount = 0;

  items.forEach(item => {
    const matchesCategory = activeCategory === 'all' || item.dataset.cat === activeCategory;
    const matchesSearch = !query || item.dataset.question.includes(query);
    const show = matchesCategory && matchesSearch;
    item.classList.toggle('d-none', !show);
    if (show) visibleCount += 1;
  });

  emptyMsg.classList.toggle('d-none', visibleCount !== 0);
}

pills.forEach(pill => {
  pill.addEventListener('click', () => {
    pills.forEach(p => {
      p.classList.remove('active', 'btn-primary');
      p.classList.add('btn-outline-primary');
    });
    pill.classList.add('active', 'btn-primary');
    pill.classList.remove('btn-outline-primary');
    activeCategory = pill.dataset.cat;
    applyFilters();
  });
});

searchInput.addEventListener('input', applyFilters);

applyFilters();