
<button
    id="scroll-top-button"
    class="fixed bottom-8 right-8 z-[100] w-12 h-12 bg-[#bf9b58] text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-[#a68545] hover:cursor-pointer group"
    aria-label="Вернуться наверх"
>
    <svg 
        xmlns="http://www.w3.org/2000/svg" 
        class="w-6 h-6 transition-transform duration-300 group-hover:-translate-y-1" 
        fill="none" 
        viewBox="0 0 24 24" 
        stroke="currentColor" 
        stroke-width="2"
    >
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
    </svg>
</button>

<style>
    #scroll-top-button.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
</style>

<script>
    // Функция для обработки прокрутки
    const handleScroll = () => {
        const scrollTopButton = document.getElementById('scroll-top-button');
        
        if (!scrollTopButton) return;
        
        // Показываем кнопку, если прокрутили больше 20% высоты viewport
        const scrollPercentage = window.scrollY / window.innerHeight;
        
        if (scrollPercentage > 0.2) {
            scrollTopButton.classList.add('show');
        } else {
            scrollTopButton.classList.remove('show');
        }
    };

    // Функция для прокрутки наверх
    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    };

    // Добавляем обработчики событий
    document.addEventListener('DOMContentLoaded', () => {
        const button = document.getElementById('scroll-top-button');
        if (button) {
            button.addEventListener('click', scrollToTop);
        }
        
        window.addEventListener('scroll', handleScroll);
    });

    // Убираем обработчики при изменении страницы в Astro
    document.addEventListener('astro:before-swap', () => {
        window.removeEventListener('scroll', handleScroll);
    });
    
    document.addEventListener('astro:after-swap', () => {
        const button = document.getElementById('scroll-top-button');
        if (button) {
            button.addEventListener('click', scrollToTop);
        }
        
        window.addEventListener('scroll', handleScroll);
    });
</script>