@once
    @push('styles')
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
    @endpush
@endonce

<div
    x-data="scrollControls"
    x-init="init()"
    x-cloak
    class="fixed bottom-6 right-4 flex flex-col gap-3 z-40 pointer-events-none"
    aria-live="polite"
>
    <button
        type="button"
        x-show="showTop"
        x-transition.opacity
        @click="scrollToTop"
        class="pointer-events-auto inline-flex items-center justify-center rounded-full bg-slate-900/80 text-white shadow-lg backdrop-blur px-3 py-3 hover:bg-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 transition"
        aria-label="{{ __('app.scroll_to_top') }}"
        title="{{ __('app.scroll_to_top') }}"
    >
        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
        </svg>
    </button>

    <button
        type="button"
        x-show="showBottom"
        x-transition.opacity
        @click="scrollToBottom"
        class="pointer-events-auto inline-flex items-center justify-center rounded-full bg-slate-900/80 text-white shadow-lg backdrop-blur px-3 py-3 hover:bg-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 transition"
        aria-label="{{ __('app.scroll_to_bottom') }}"
        title="{{ __('app.scroll_to_bottom') }}"
    >
        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
    </button>
</div>

@push('scripts')
    <script>
        const registerScrollControls = () => {
            window.Alpine.data('scrollControls', () => ({
                showTop: false,
                showBottom: false,
                scrollOffset: 160,
                init() {
                    this.updateVisibility();
                    window.addEventListener('scroll', () => this.updateVisibility(), { passive: true });
                    window.addEventListener('resize', () => this.updateVisibility());
                },
                updateVisibility() {
                    const scrollY = window.pageYOffset || document.documentElement.scrollTop;
                    const viewportHeight = document.documentElement.clientHeight;
                    const docHeight = document.documentElement.scrollHeight;

                    this.showTop = scrollY > this.scrollOffset;
                    this.showBottom = scrollY + viewportHeight < docHeight - this.scrollOffset;
                },
                scrollToTop() {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                },
                scrollToBottom() {
                    window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
                },
            }));
        };

        if (window.Alpine) {
            registerScrollControls();
        } else {
            document.addEventListener('alpine:init', registerScrollControls, { once: true });
        }
    </script>
@endpush