@extends('layouts.app')

@section('title', 'FAQs')

@section('content')
@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
<div class="fq-band">
  <div class="container">
    <nav class="pb-crumb" aria-label="Breadcrumb"><a href="{{ route('home') }}">Home</a><i>/</i><span>FAQs</span></nav>
  </div>
</div>

<main>
  <h1 class="sr-only">Frequently asked questions</h1>

  @if (count($groupA))
  <section class="container fq-sec">
    <div class="fq-media rv">
      @if ($photoA)<img src="{{ $photoA }}" alt="" loading="lazy" onerror="this.remove()">@endif
      <div class="fq-help">
        <div><h3>Still have questions?</h3><p>Feel free to ask any question you have!</p></div>
        <a href="{{ route('contact') }}" class="btn">Here to help</a>
      </div>
    </div>
    <div class="fq-list rv">
      <small>General questions</small>
      <h2>Some Frequently Asked Questions.</h2>
      <div class="fq-acc" data-acc>
        @foreach ($groupA as $i => $f)
          <div class="fq-item{{ $i === 0 ? ' open' : '' }}">
            <h3><button type="button" aria-expanded="{{ $i === 0 ? 'true' : 'false' }}" aria-controls="fqa{{ $i }}" id="fqh{{ $i }}"><span>{{ $f['q'] }}</span>{!! $plus !!}</button></h3>
            <div class="fq-a" id="fqa{{ $i }}" role="region" aria-labelledby="fqh{{ $i }}"><div>{!! $f['a'] !!}</div></div>
          </div>
        @endforeach
      </div>
    </div>
  </section>
  @else
  <section class="container fq-sec fq-empty">
    <div class="empty"><h2>No questions yet</h2><p>We are still putting our answers together. Please reach out and we will help you personally.</p>
      <a href="{{ route('contact') }}" class="btn">Contact us</a></div>
  </section>
  @endif

  @include('partials.reviews-slider')

  @if (count($groupB))
  <section class="container fq-sec fq-flip">
    <div class="fq-list rv">
      <small>More questions</small>
      <h2>Some Frequently Asked Questions.</h2>
      <div class="fq-acc" data-acc>
        @foreach ($groupB as $i => $f)
          <div class="fq-item{{ $i === 0 ? ' open' : '' }}">
            <h3><button type="button" aria-expanded="{{ $i === 0 ? 'true' : 'false' }}" aria-controls="fqb{{ $i }}" id="fqbh{{ $i }}"><span>{{ $f['q'] }}</span>{!! $plus !!}</button></h3>
            <div class="fq-a" id="fqb{{ $i }}" role="region" aria-labelledby="fqbh{{ $i }}"><div>{!! $f['a'] !!}</div></div>
          </div>
        @endforeach
      </div>
    </div>
    <div class="fq-media rv">
      @if ($photoB)<img src="{{ $photoB }}" alt="" loading="lazy" onerror="this.remove()">@endif
    </div>
  </section>
  @endif
</main>
@endsection