{#
    Scroll To Top Component - Bouton pour remonter en haut de la page

    Apparaît après avoir scrollé de 300px
    Animation smooth scroll vers le haut
    Positionné en bas à droite de l'écran
#}

<button type="button"
        id="scroll-to-top-btn"
        class="fixed bottom-24 sm:bottom-8 right-4 sm:right-8 z-40 hidden p-3 rounded-full bg-fg-brand text-white shadow-lg hover:bg-brand-hover focus:ring-4 focus:ring-brand-soft focus:outline-none transition-all duration-300"
        aria-label="Retour en haut"
        title="Retour en haut">
   <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/>
   </svg>
</button>

{# JavaScript pour gérer l'affichage et le scroll #}
<script>
   (function() {
      const scrollToTopBtn = document.getElementById('scroll-to-top-btn');

      if (!scrollToTopBtn) return;

      // Afficher/masquer le bouton selon la position de scroll
      function toggleScrollToTopButton() {
         if (window.pageYOffset > 300) {
            scrollToTopBtn.classList.remove('hidden');
            scrollToTopBtn.classList.add('animate-fade-in');
         } else {
            scrollToTopBtn.classList.add('hidden');
            scrollToTopBtn.classList.remove('animate-fade-in');
         }
      }

      // Écouter l'événement de scroll
      window.addEventListener('scroll', function() {
         toggleScrollToTopButton();
      });

      // Action au clic - smooth scroll vers le haut
      scrollToTopBtn.addEventListener('click', function() {
         window.scrollTo({
            top: 0,
            behavior: 'smooth'
         });
      });

      // Vérifier au chargement de la page
      toggleScrollToTopButton();
   })();
</script>

<style>
   @keyframes fade-in {
      from {
         opacity: 0;
         transform: scale(0.8);
      }
      to {
         opacity: 1;
         transform: scale(1);
      }
   }

   .animate-fade-in {
      animation: fade-in 0.3s ease-in-out;
   }

   #scroll-to-top-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   }

   #scroll-to-top-btn:active {
      transform: translateY(0);
   }
</style>