{{-- "You've got any questions?": CMS FAQs as an accordion next to a photo. Needs $faqs and $photoFaq; accordion logic is in arome.js. --}}
@if (count($faqs))
@php $plus = '<svg viewBox="0 0 24 24" aria-hidden="true"><path class="h" d="M5 12h14"/><path class="v" d="M12 5v14"/></svg>'; @endphp
<section class="container pdx-sec pdx-faq">
  <div class="fq-list">
    <small>Frequently asked questions</small>
    <h2>You&rsquo;ve Got Any Questions?</h2>
    <div class="fq-acc" data-acc>
      @foreach ($faqs as $i => $f)
        <div class="fq-item{{ $i === 0 ? ' open' : '' }}">
          <h3><button type="button" aria-expanded="{{ $i === 0 ? 'true' : 'false' }}" aria-controls="pq{{ $i }}" id="pqh{{ $i }}"><span>{{ $f['q'] }}</span>{!! $plus !!}</button></h3>
          <div class="fq-a" id="pq{{ $i }}" role="region" aria-labelledby="pqh{{ $i }}"><div>{!! $f['a'] !!}</div></div>
        </div>
      @endforeach
    </div>
  </div>
  <div class="fq-media">@if ($photoFaq)<img src="{{ $photoFaq }}" alt="" loading="lazy" onerror="this.remove()">@endif</div>
</section>
@endif