@if(($config['widgets']['scroll_to_top'] ?? true))
<button id="scrollToTop" data-widget="scroll_to_top" data-scroll-to-top-btn
    class="fixed {{ ($config['widgets']['mobile_bottom_navbar'] ?? true) ? 'bottom-12' : 'bottom-6' }} md:bottom-6 right-6 z-50 p-3 rounded-full text-white shadow-lg opacity-0 pointer-events-none transition-all duration-300 hover:scale-110 bg-primary">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
    </svg>
</button>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const btn = document.getElementById('scrollToTop');
        if (!btn) return;

        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                btn.classList.remove('opacity-0', 'pointer-events-none');
                btn.classList.add('opacity-100', 'pointer-events-auto');
            } else {
                btn.classList.add('opacity-0', 'pointer-events-none');
                btn.classList.remove('opacity-100', 'pointer-events-auto');
            }
        });

        btn.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    });
</script>
@endif