@extends('layouts.main')
@section('content')
<section class="py-24">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <!-- Header Section -->
    <div class="mb-16">
      <h2 class="text-4xl font-bold text-center text-gray-900 leading-[3.25rem]">
        Les questions les plus fréquentes
      </h2>
      <p class="text-center text-gray-600 mt-4">
      Voici quelques-unes des questions les plus fréquentes. Pour toute question complémentaire, n'hésitez pas à nous contacter.
      </p>
    </div>

    <!-- FAQ Accordion -->
    <div class="accordion-group space-y-6" data-accordion="default-accordion">
      <!-- FAQ Item 1 -->
      <div class="accordion border border-gray-300 p-4 rounded-xl transition duration-500 accordion-active:bg-yellow-50 accordion-active:border-yellow-600">
        <button
          class="accordion-toggle group inline-flex items-center justify-between text-left text-lg font-medium text-gray-900 w-full transition duration-500 hover:text-yellow-600 accordion-active:text-yellow-600"
          aria-controls="faq-collapse-one"
        >
          <h5>Comment accéder au tableau de bord?</h5>
          <svg
            class="w-6 h-6 text-gray-900 transition duration-500 group-hover:text-yellow-600 accordion-active:text-yellow-600"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6 12H18M12 18V6"
              stroke="currentColor"
              stroke-width="1.6"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
          </svg>
        </button>
        <div
          id="faq-collapse-one"
          class="accordion-content w-full overflow-hidden mt-4"
          style="max-height: 0;"
        >
          <p class="text-base text-gray-600">
          Vous pouvez accéder au tableau de bord en vous connectant et en allant sur /dashboard. Si vous n'êtes pas connecté, vous serez redirigé vers la page de connexion.
          </p>
        </div>
      </div>

      <!-- FAQ Item 2 -->
      <div class="accordion border border-gray-300 p-4 rounded-xl transition duration-500 accordion-active:bg-yellow-50 accordion-active:border-yellow-600">
        <button
          class="accordion-toggle group inline-flex items-center justify-between text-left text-lg font-medium text-gray-900 w-full transition duration-500 hover:text-yellow-600 accordion-active:text-yellow-600"
          aria-controls="faq-collapse-two"
        >
          <h5>Puis-je changer mon mot de passe?</h5>
          <svg
            class="w-6 h-6 text-gray-900 transition duration-500 group-hover:text-yellow-600 accordion-active:text-yellow-600"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6 12H18M12 18V6"
              stroke="currentColor"
              stroke-width="1.6"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
          </svg>
        </button>
        <div
          id="faq-collapse-two"
          class="accordion-content w-full overflow-hidden mt-4"
          style="max-height: 0;"
        >
          <p class="text-base text-gray-600">
          Oui ! Vous pouvez réinitialiser votre mot de passe en cliquant sur "Mot de passe oublié?" sur la page de connexion. Suivez les instructions dans l'e-mail que vous recevrez pour définir un nouveau mot de passe.
          </p>
        </div>
      </div>

      <!-- FAQ Item 3 -->
      <div class="accordion border border-gray-300 p-4 rounded-xl transition duration-500 accordion-active:bg-yellow-50 accordion-active:border-yellow-600">
        <button
          class="accordion-toggle group inline-flex items-center justify-between text-left text-lg font-medium text-gray-900 w-full transition duration-500 hover:text-yellow-600 accordion-active:text-yellow-600"
          aria-controls="faq-collapse-three"
        >
          <h5>Que faire si j'oublie mon adresse e-mail ou mon mot de passe?</h5>
          <svg
            class="w-6 h-6 text-gray-900 transition duration-500 group-hover:text-yellow-600 accordion-active:text-yellow-600"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6 12H18M12 18V6"
              stroke="currentColor"
              stroke-width="1.6"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
          </svg>
        </button>
        <div
          id="faq-collapse-three"
          class="accordion-content w-full overflow-hidden mt-4"
          style="max-height: 0;"
        >
          <p class="text-base text-gray-600">
          Si vous oubliez votre e-mail, contactez le support. Si vous oubliez votre mot de passe, utilisez l'option "Mot de passe oublié ?" sur la page de connexion pour le réinitialiser.
          </p>
        </div>
      </div>

      <!-- FAQ Item 4 -->
      <div class="accordion border border-gray-300 p-4 rounded-xl transition duration-500 accordion-active:bg-yellow-50 accordion-active:border-yellow-600">
        <button
          class="accordion-toggle group inline-flex items-center justify-between text-left text-lg font-medium text-gray-900 w-full transition duration-500 hover:text-yellow-600 accordion-active:text-yellow-600"
          aria-controls="faq-collapse-four"
        >
          <h5>Qui peut accéder à ce tableau de bord?</h5>
          <svg
            class="w-6 h-6 text-gray-900 transition duration-500 group-hover:text-yellow-600 accordion-active:text-yellow-600"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6 12H18M12 18V6"
              stroke="currentColor"
              stroke-width="1.6"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
          </svg>
        </button>
        <div
          id="faq-collapse-four"
          class="accordion-content w-full overflow-hidden mt-4"
          style="max-height: 0;"
        >
          <p class="text-base text-gray-600">
          Seuls les utilisateurs authentifiés peuvent y accéder. Si vous n'êtes pas connecté, vous serez automatiquement redirigé vers la page de connexion.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const accordions = document.querySelectorAll('.accordion');

    accordions.forEach((accordion) => {
      const toggleButton = accordion.querySelector('.accordion-toggle');
      const content = accordion.querySelector('.accordion-content');

      toggleButton.addEventListener('click', () => {
        const isActive = accordion.classList.contains('accordion-active');
        accordions.forEach((item) => {
          item.classList.remove('accordion-active');
          item.querySelector('.accordion-content').style.maxHeight = '0';
        });

        if (!isActive) {
          accordion.classList.add('accordion-active');
          content.style.maxHeight = content.scrollHeight + 'px';
        }
      });
    });
  });
</script>
@endsection