---
const label = 'Volver arriba';
---
<button
  type="button"
  id="back-to-top"
  class="fixed bottom-24 right-6 z-30 inline-flex items-center justify-center w-11 h-11 rounded-full text-white shadow-md opacity-0 invisible transition-all"
  style="background: var(--hds-fg);"
  aria-label={label}
>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <polyline points="18 15 12 9 6 15"/>
  </svg>
</button>

<script is:inline>
  (function() {
    const btn = document.getElementById('back-to-top');
    if (!btn) return;
    let visible = false;
    function update() {
      const should = window.scrollY > 400;
      if (should !== visible) {
        visible = should;
        if (should) {
          btn.classList.remove('opacity-0', 'invisible');
          btn.classList.add('opacity-100', 'visible');
        } else {
          btn.classList.remove('opacity-100', 'visible');
          btn.classList.add('opacity-0', 'invisible');
        }
      }
    }
    window.addEventListener('scroll', update, { passive: true });
    btn.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  })();
</script>