import { ready } from '@site/js/utils/dom.js';

/**
 * Sticky payment button (vanilla, IntersectionObserver).
 *
 * Keeps `.paymentDetails` pinned (the `.fixed` class) until the user scrolls
 * far enough that the page footer is about to enter the viewport. When the
 * footer is intersecting, we drop the `.fixed` class so the button doesn't
 * overlap the footer.
 *
 * The 300px top margin reproduces the `offset: -300` from the old Waypoints
 * implementation — the trigger fires 300px earlier than the literal viewport
 * top so the transition happens before the footer actually appears.
 */
ready(() => {
    const paymentDetails = document.querySelector('.paymentDetails');
    const footer = document.querySelector('.footer');
    if (!paymentDetails || !footer) {
        return;
    }

    // Start in the pinned state — matches the original behaviour, where the
    // Waypoint only flipped to "unfixed" once the footer was reached.
    paymentDetails.classList.add('fixed');

    const observer = new IntersectionObserver(
        ([entry]) => {
            paymentDetails.classList.toggle('fixed', !entry.isIntersecting);
        },
        { rootMargin: '-300px 0px 0px 0px' }
    );
    observer.observe(footer);
});
