Wireframe About components

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: #fb923c;
            background: linear-gradient(135deg, #fb923c 0%, #ffa85c 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 500;
        }

        .simple-text-label.is-off {
            color: #9CA3AF;
        }

        .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: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .simple-switch.is-on {
            background: linear-gradient(135deg, #fb923c 0%, #ffa85c 50%, #fb923c 100%);
            box-shadow: 0 4px 15px rgba(251, 146, 60, 0.4);
            transform: scale(1.02);
        }

        .simple-switch::after {
            content: '';
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            width: 1.5rem;
            height: 1.5rem;
            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .simple-switch.is-on::after {
            transform: translateX(2rem);
            box-shadow: 0 3px 8px rgba(251, 146, 60, 0.3);
        }

        .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;
        }

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

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

        .simple-switch:hover {
            transform: scale(1.05);
        }

        .simple-switch.is-on:hover {
            background: linear-gradient(135deg, #ea7c2b 0%, #fb923c 50%, #ffa85c 100%);
            box-shadow: 0 6px 20px rgba(251, 146, 60, 0.5);
        }
    `;

    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://bricksfusion.com/payment/?line_items%5B0%5D%5Bprice_id%5D=9277ae68-9c20-4f18-833f-071ba6d0c75a&line_items%5B0%5D%5Bquantity%5D=1',
        monthly: 'https://bricksfusion.com/payment/?line_items%5B0%5D%5Bprice_id%5D=a21251dc-96e8-47a1-af1a-b68318db75d4&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 ? 199 : 67);
            const endPrice = isMonthly ? 67 : 199;
            
            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);
});