Showcase

document.addEventListener('DOMContentLoaded', function() {
    const fontLink = document.createElement('link');
    fontLink.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap';
    fontLink.rel = 'stylesheet';
    document.head.appendChild(fontLink);

    const styles = `
        .simple-price-box {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            font-family: 'Inter', sans-serif;
            margin: 0.5rem 0;
            width: fit-content;
        }

        .simple-text-label {
            font-size: var(--text-xs);
            font-weight: 300;
            transition: color 0.2s ease;
            user-select: none;
            white-space: nowrap;
        }

        .simple-text-label.is-on {
            color: #FACC15;
            text-shadow: 0 0 5px rgba(250, 204, 21, 0.3);
            font-weight: 500;
        }

        .simple-text-label.is-off {
            color: white;
        }

        .simple-switch {
            position: relative;
            width: 4rem;
            height: 2rem;
            background-color: #E5E7EB;
            border-radius: 9999px;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .simple-switch.is-on {
            background-color: #FACC15;
            box-shadow: 0 0 10px rgba(250, 204, 21, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2);
        }

        .simple-switch::after {
            content: '';
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            width: 1.5rem;
            height: 1.5rem;
            background-color: white;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .simple-switch.is-on::after {
            transform: translateX(2rem);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .simple-price-text {
            transition: opacity 0.3s ease;
            display: inline-flex !important;
            align-items: baseline;
            gap: 0.25rem;
            justify-content: inherit;
        }

        .simple-price-text .amount-value {
            display: inline-block;
            font-size: var(--h2);
        }

        .simple-price-text .time-period {
            font-size: var(--text-xs) !important;
            color: white;
            font-weight: 300 !important;
            opacity: 0.95;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .simple-price-box {
                gap: 0.5rem;
            }

            .simple-text-label {
                font-size: calc(var(--text-xs) * 0.9);
            }

            .simple-price-text .amount-value {
                font-size: 30px !important;
            }
        }
    `;

    const styleSheet = document.createElement('style');
    styleSheet.textContent = styles;
    document.head.appendChild(styleSheet);

    const toggleHTML = `
    <div class="simple-price-box">
        <div class="simple-switch" role="switch" aria-checked="false" tabindex="0"></div>
        <span class="simple-text-label is-off" data-mode="monthly">3 Monthly payments</span>
    </div>
    `;

    const URLS = {
        oneTime: 'https://breakfusion.com/payment/?line_items%5B0%5D%5Bprice_id%5D=49f1f80e-0466-42de-bc21-86afd0253789&line_items%5B0%5D%5Bquantity%5D=1',
        monthly: 'https://breakfusion.com/payment/?line_items%5B0%5D%5Bprice_id%5D=ebb767c8-2598-4e2f-addf-a92b1d860050&line_items%5B0%5D%5Bquantity%5D=1'
    };

    function animateValue(start, end, duration, element) {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            const currentValue = Math.round(progress * (end - start) + start);
            element.textContent = `€${currentValue}`;
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };
        window.requestAnimationFrame(step);
    }

    function updatePriceDisplay(isMonthly, animate = true) {
        if (priceElement) {
            const currentAmount = priceElement.querySelector('.amount-value');
            const startPrice = currentAmount ? parseInt(currentAmount.textContent.replace('€', '')) : (isMonthly ? 149 : 50);
            const endPrice = isMonthly ? 50 : 149;

            if (animate && currentAmount) {
                animateValue(startPrice, endPrice, 500, currentAmount);

                setTimeout(() => {
                    const periodElement = priceElement.querySelector('.time-period');
                    if (periodElement) {
                        periodElement.textContent = isMonthly ? '/mo for 3 months' : '/one-time';
                    }
                }, 250);
            } else {
                priceElement.innerHTML = `
                    <span class="amount-value">€${endPrice}</span>
                    <span class="time-period">${isMonthly ? '/mo for 3 months' : '/one-time'}</span>
                `;
            }
        }
    }

    const toggleContainer = document.querySelector('[data-toggle-container]');
    const priceElement = document.querySelector('[data-simple-price]');

    if (toggleContainer && priceElement) {
        toggleContainer.innerHTML = toggleHTML;
        priceElement.classList.add('simple-price-text');

        const toggleBox = toggleContainer.querySelector('.simple-price-box');
        const computedStyle = window.getComputedStyle(toggleContainer);

        if (computedStyle.textAlign) {
            toggleBox.style.marginLeft = computedStyle.textAlign === 'center' ? 'auto' :
                                       computedStyle.textAlign === 'right' ? 'auto' : '0';
            toggleBox.style.marginRight = computedStyle.textAlign === 'center' ? 'auto' :
                                        computedStyle.textAlign === 'right' ? '0' : 'auto';
        }
    } else if (priceElement) {
        priceElement.insertAdjacentHTML('beforebegin', toggleHTML);
        priceElement.classList.add('simple-price-text');
    }

    const toggle = document.querySelector('.simple-switch');
    const monthlyLabel = document.querySelector('[data-mode="monthly"]');
    const buyButton = document.querySelector('[data-simple-button]');

    function handleToggle() {
        const isMonthly = !toggle.classList.contains('is-on');
        toggle.classList.toggle('is-on');
        toggle.setAttribute('aria-checked', isMonthly);

        if (monthlyLabel) {
            monthlyLabel.classList.toggle('is-on');
            monthlyLabel.classList.toggle('is-off');
        }

        updatePriceDisplay(isMonthly, true);
        if (buyButton) {
            buyButton.href = isMonthly ? URLS.monthly : URLS.oneTime;
        }
    }

    if (toggle) {
        toggle.addEventListener('click', handleToggle);
        toggle.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                handleToggle();
            }
        });
    }

    updatePriceDisplay(false, false);
});