{{--
  Template Name: FAQ
--}}

@extends('layouts.app')

@push('vite-head')
  @vite(['resources/css/pages/faq.scss', 'resources/js/pages/faq.ts'])
@endpush

@section('content')
  <section>
    <x-top-content />
  </section>

  <section class="container">
    @php
      $faq_items = get_field('questions-reponses');
    @endphp

    @if (! empty($faq_items))
      <div class="faq-container mb">
        <h2 class="faq-title center">Foire aux questions</h2>
        <div class="faq-list">
          @foreach ($faq_items as $index => $item)
            <div class="faq-item" data-faq-item>
              <button
                type="button"
                class="faq-question"
                aria-expanded="false"
                aria-controls="faq-answer-{{ $index }}"
                id="faq-question-{{ $index }}"
                data-faq-trigger
              >
                <span class="faq-question-text">{{ $item['question'] }}</span>
                <span class="faq-icon" aria-hidden="true" data-faq-icon>+</span>
              </button>
              <div
                class="faq-answer-wrap"
                id="faq-answer-{{ $index }}"
                role="region"
                aria-labelledby="faq-question-{{ $index }}"
                hidden
              >
                <div class="faq-answer-inner">
                  <p class="faq-answer">
                    {{ $item['reponse'] }}
                  </p>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    @endif
  </section>

  <section class="top-wave container">
    <x-instagram-feed />
  </section>
@endsection