<div class="container py-5" style="max-width: 640px;">
  <h1 class="bsfaq-title text-center">Frequently asked questions</h1>
  <div class="bsfaq-search mb-4">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    <input type="text" class="form-control" id="bsfaqSearch" placeholder="Search questions…" autocomplete="off">
  </div>
  <p class="text-muted small text-center mb-3" id="bsfaqCount">6 of 6 questions shown</p>

  <div class="accordion" id="bsfaqAccordion">
    <div class="accordion-item bsfaq-item" data-q="does this work on a free plan">
      <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bsfaq1">Does this work on the free plan?</button>
      </h2>
      <div id="bsfaq1" class="accordion-collapse collapse show" data-bs-parent="#bsfaqAccordion">
        <div class="accordion-body">Yes — every core feature is available on the free plan with no time limit. Paid plans add higher usage limits and priority support.</div>
      </div>
    </div>
    <div class="accordion-item bsfaq-item" data-q="can i cancel anytime billing">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfaq2">Can I cancel anytime?</button>
      </h2>
      <div id="bsfaq2" class="accordion-collapse collapse" data-bs-parent="#bsfaqAccordion">
        <div class="accordion-body">Yes, from your billing settings with no cancellation fee. You'll keep access through the end of your current billing period.</div>
      </div>
    </div>
    <div class="accordion-item bsfaq-item" data-q="do you offer refunds money back">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfaq3">Do you offer refunds?</button>
      </h2>
      <div id="bsfaq3" class="accordion-collapse collapse" data-bs-parent="#bsfaqAccordion">
        <div class="accordion-body">We offer a full refund within 14 days of your first payment, no questions asked. Contact support to request one.</div>
      </div>
    </div>
    <div class="accordion-item bsfaq-item" data-q="is my data secure encrypted">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfaq4">Is my data secure?</button>
      </h2>
      <div id="bsfaq4" class="accordion-collapse collapse" data-bs-parent="#bsfaqAccordion">
        <div class="accordion-body">All data is encrypted in transit and at rest. We undergo an annual third-party security audit and never sell customer data.</div>
      </div>
    </div>
    <div class="accordion-item bsfaq-item" data-q="can i invite my team members">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfaq5">Can I invite my team?</button>
      </h2>
      <div id="bsfaq5" class="accordion-collapse collapse" data-bs-parent="#bsfaqAccordion">
        <div class="accordion-body">Yes — Pro and Team plans support unlimited team members, with role-based permissions to control who can edit or just view.</div>
      </div>
    </div>
    <div class="accordion-item bsfaq-item" data-q="do you have an api integrations">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bsfaq6">Do you have an API?</button>
      </h2>
      <div id="bsfaq6" class="accordion-collapse collapse" data-bs-parent="#bsfaqAccordion">
        <div class="accordion-body">Yes, a full REST API is available on all plans, with higher rate limits on Pro and Team. See our docs for authentication and endpoints.</div>
      </div>
    </div>
  </div>
  <p class="text-center text-muted small mt-4 d-none" id="bsfaqEmpty">No questions match your search.</p>
</div>

body { background: #fff; }

.bsfaq-title { font-weight: 800; letter-spacing: -0.02em; margin-bottom: 20px; }

.bsfaq-search {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
}
.bsfaq-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.bsfaq-search input { padding-left: 34px; }

.accordion-button:not(.collapsed) {
  background: #eef0ff;
  color: #4338ca;
  box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(99,102,241,.25); }

.bsfaq-item { transition: opacity .15s, max-height .15s; }
.bsfaq-item.bsfaq-hidden { display: none; }

const searchInput = document.getElementById('bsfaqSearch');
const items = document.querySelectorAll('.bsfaq-item');
const countEl = document.getElementById('bsfaqCount');
const emptyEl = document.getElementById('bsfaqEmpty');
const TOTAL = items.length;

searchInput.addEventListener('input', () => {
  const q = searchInput.value.trim().toLowerCase();
  let visible = 0;

  items.forEach(item => {
    const isMatch = !q || item.dataset.q.includes(q);
    item.classList.toggle('bsfaq-hidden', !isMatch);
    if (isMatch) visible++;
  });

  countEl.textContent = visible + ' of ' + TOTAL + ' questions shown';
  emptyEl.classList.toggle('d-none', visible > 0);
});