component BackToTop {
    props {
        label = "Back to top"
        assistiveLabel = "Return to the top of the page"
        threshold = 500
    }

    state visible = false

    functions {
        function updateBackToTopVisibility() {
            visible = window.scrollY > threshold
        }

        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            })
        }
    }

    lifecycle {
        mount {
            updateBackToTopVisibility()

            window.addEventListener(
            "scroll",
            updateBackToTopVisibility,
            { passive: true }
            )
        }

        unmount {
            window.removeEventListener(
            "scroll",
            updateBackToTopVisibility
            )
        }
    }

    watch visible {
        console.debug(
        "Back-to-top visibility:",
        value,
        previous
        )
    }

    view {
        <div
            class="group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8"
            class:pointer-events-none="!visible"
            class:translate-y-5="!visible"
            class:scale-90="!visible"
            class:opacity-0="!visible"
            class:pointer-events-auto="visible"
            class:translate-y-0="visible"
            class:scale-100="visible"
            class:opacity-100="visible"
        >
            <!-- Hover label -->
            <span
                class="pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block"
            >
                {label}
            </span>

            <!-- Gradient border wrapper -->
            <div
                class="relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30"
            >
                <!-- Glow -->
                <div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100" ></div>

                <button
                    type="button"
                    @click="scrollToTop()"
                    aria-label="{label}"
                    title="{label}"
                    class="relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13"
                >
                    <!-- Arrow -->
                    <span class="icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5" aria-hidden="true" ></span>

                    <span class="sr-only">
                        {assistiveLabel}
                    </span>
                </button>
            </div>
        </div>
    }
}