@props([])

{{-- Back-to-top control: bottom-left, subtle (semi-transparent) and smooth.
     Appears after roughly one viewport of scroll; uses Lenis when active and
     falls back to the native smooth scroll otherwise. --}}
<div x-data="{ visible: false }"
     x-init="const onScroll = () => { visible = window.scrollY > window.innerHeight * 0.8 }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true });"
     x-show="visible"
     x-transition.opacity
     x-cloak
     class="fixed bottom-24 z-40 lg:bottom-8"
     style="left: max(1.25rem, env(safe-area-inset-left, 1.25rem));">
    <button type="button"
            @click="window.__lenis ? window.__lenis.scrollTo(0, { duration: 1.2 }) : window.scrollTo({ top: 0, behavior: 'smooth' })"
            aria-label="Volver arriba"
            class="flex h-11 w-11 items-center justify-center rounded-full border border-line/60 bg-surface/70 text-on-surface-muted opacity-70 shadow-soft backdrop-blur-md transition-all duration-base ease-out-soft hover:opacity-100 hover:text-ochre-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
        <x-icon name="arrow-up" :size="20" />
    </button>
</div>