
            const card = document.querySelector(`.plan-card[data-plan="${plan}"]`);
            if (!card) return;

            console.log('Plan selected:', plan);
            isProcessing = true;

            // Update UI state
            const allCards = document.querySelectorAll('.plan-card');
            allCards.forEach(c => {
                c.classList.remove('ring-4', 'ring-green-700', 'ring-offset-2');
            });
            card.classList.add('ring-4', 'ring-green-700', 'ring-offset-2');

            // Disable all buttons during selection
            const allButtons = document.querySelectorAll('.plan-btn');
            allButtons.forEach(btn => {
                btn.disabled = true;
                btn.textContent = 'Processing...';
                btn.classList.add('opacity-50', 'cursor-not-allowed');
            });

            try {
                const authHeaders = getAuthHeaders();
                let data;

                if (plan === 'hobby') {
                    // Hobby plan is free, use original endpoint
                    const response = await fetch('/api/select-plan', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            ...authHeaders
                        },
                        body: JSON.stringify({ plan }),
                        credentials: 'include',
                    });

                    data = await response.json();

                    if (response.ok && data.ok) {
                        window.location.href = '/apps';
                    } else {
                        throw new Error(data.error || 'Failed to select plan');
                    }
                } else {
                    // Paid plans use inline subscription checkout
                    const response = await fetch('/api/subscription/checkout', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            ...authHeaders
                        },
                        body: JSON.stringify({
                            plan: plan,
                            billingCycle: currentBillingCycle,
                            currency: currentCurrency.toLowerCase(),
                            inline: true,
                            previousPlan: (typeof window.currentPlan !== 'undefined' ? window.currentPlan : '')
                        }),
                        credentials: 'include',
                    });

                    data = await response.json();

                    if (response.ok && data.sessionId) {
                        // Use Dodo inline checkout - prefer inlineCheckoutUrl if available, otherwise use checkoutUrl
                        const checkoutUrl = data.inlineCheckoutUrl || data.checkoutUrl;
                        if (checkoutUrl) {
                            await openInlineCheckout(checkoutUrl, data.sessionId);
                        } else {
                            throw new Error('No checkout URL provided');
                        }
                    } else {
                        throw new Error(data.error || 'Failed to start checkout');
                    }
                }
            } catch (error) {
                console.error('Error selecting plan:', error);

                alert(error.message || 'Failed to select plan. Please try again.');
                
                // Re-enable buttons
                allButtons.forEach(btn => {
                    btn.disabled = false;
                    const planType = btn.getAttribute('data-plan');
                    if (planType === 'hobby') {
                        btn.textContent = 'Start for Free';
                    } else if (planType === 'starter') {
                        btn.textContent = 'Choose Starter';
                    } else if (planType === 'professional') {
                        btn.textContent = 'Get Started';
                    } else if (planType === 'enterprise') {
                        btn.textContent = 'Choose Enterprise';
                    }
                    btn.classList.remove('opacity-50', 'cursor-not-allowed');
                });
                isProcessing = false;
            }
        }

        function setupBillingCycleToggle() {
            const monthlyBtn = document.getElementById('monthly-toggle');
            const yearlyBtn = document.getElementById('yearly-toggle');
            if (!monthlyBtn || !yearlyBtn) return;

            monthlyBtn.addEventListener('click', () => {
                currentBillingCycle = 'monthly';
                monthlyBtn.className = 'px-6 py-2 rounded-full text-sm font-medium bg-green-700 text-white shadow-sm transition-all';
                yearlyBtn.className = 'px-6 py-2 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all';
                updatePlanPrices();
            });

            yearlyBtn.addEventListener('click', () => {
                currentBillingCycle = 'yearly';
                yearlyBtn.className = 'px-6 py-2 rounded-full text-sm font-medium bg-green-700 text-white shadow-sm transition-all';
                monthlyBtn.className = 'px-6 py-2 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all';
                updatePlanPrices();
            });
        }

        function setupCurrencyDropdown() {
            const dropdown = document.getElementById('currency-dropdown');
            const btn = document.getElementById('currency-btn');
            const options = document.getElementById('currency-options');
            const chevron = document.getElementById('currency-chevron');
            if (!dropdown || !btn || !options) return;

            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const isOpen = !dropdown.classList.contains('open');
                
                if (isOpen) {
                    dropdown.classList.add('open');
                    options.classList.remove('hidden');
                    if (chevron) chevron.style.transform = 'rotate(180deg)';
                } else {
                    dropdown.classList.remove('open');
                    options.classList.add('hidden');
                    if (chevron) chevron.style.transform = 'rotate(0deg)';
                }
            });

            // Handle currency selection
            document.querySelectorAll('.currency-option').forEach(option => {
                option.addEventListener('click', (e) => {
                    e.preventDefault();
                    const currency = option.getAttribute('data-value');
                    currentCurrency = currency;
                    
                    // Update button display
                    const flags = { USD: '🇺🇸', GBP: '🇬🇧', EUR: '🇪🇺' };
                    const flagEl = document.getElementById('currency-flag');
                    const codeEl = document.getElementById('currency-code');
                    if (flagEl) flagEl.textContent = flags[currency];
                    if (codeEl) codeEl.textContent = currency;
                    
                    // Close dropdown
                    dropdown.classList.remove('open');
                    options.classList.add('hidden');
                    if (chevron) chevron.style.transform = 'rotate(0deg)';
                    
                    updatePlanPrices();
                });
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', () => {
                dropdown.classList.remove('open');
                options.classList.add('hidden');
                if (chevron) chevron.style.transform = 'rotate(0deg)';
            });
        }

        function updatePlanPrices() {
            // Update Hobby plan price
            const hobbyPrice = document.getElementById('hobby-price');
            const hobbyPeriod = document.getElementById('hobby-period');
            if (hobbyPrice) hobbyPrice.textContent = currencySymbols[currentCurrency] + '0';
            if (hobbyPeriod) hobbyPeriod.textContent = currentBillingCycle === 'monthly' ? '/mo' : '/yr';

            // Update Starter plan price
            const starterPrice = document.getElementById('starter-price');
            const starterPeriod = document.getElementById('starter-period');
            const starterAmount = planPricing.starter[currentBillingCycle][currentCurrency];
            if (starterPrice) starterPrice.textContent = currencySymbols[currentCurrency] + starterAmount.toFixed(starterAmount % 1 === 0 ? 0 : 2);
            if (starterPeriod) starterPeriod.textContent = currentBillingCycle === 'monthly' ? '/mo' : '/yr';

            // Update Professional plan price
            const proPrice = document.getElementById('pro-price');
            const proPeriod = document.getElementById('pro-period');
            const proAmount = planPricing.professional[currentBillingCycle][currentCurrency];
            if (proPrice) proPrice.textContent = currencySymbols[currentCurrency] + proAmount.toFixed(proAmount % 1 === 0 ? 0 : 2);
            if (proPeriod) proPeriod.textContent = currentBillingCycle === 'monthly' ? '/mo' : '/yr';

            // Update Enterprise plan price
            const enterprisePrice = document.getElementById('enterprise-price');
            const enterprisePeriod = document.getElementById('enterprise-period');
            const enterpriseAmount = planPricing.enterprise[currentBillingCycle][currentCurrency];
            if (enterprisePrice) enterprisePrice.textContent = currencySymbols[currentCurrency] + enterpriseAmount.toFixed(enterpriseAmount % 1 === 0 ? 0 : 2);
            if (enterprisePeriod) enterprisePeriod.textContent = currentBillingCycle === 'monthly' ? '/mo' : '/yr';
        }

        function setupPlanSelection() {
            // Only handle card clicks to avoid double-triggering
            document.querySelectorAll('.plan-card').forEach(card => {
                card.addEventListener('click', async (e) => {
                    // Let links within the card work normally
                    if (e.target.closest('a')) return;
                    
                    e.preventDefault();
                    
                    const plan = card.getAttribute('data-plan');
                    if (!plan) return;

                    // Use the shared triggerPlanSelection function
                    triggerPlanSelection(plan);
                });
            });

            // Prevent button clicks from bubbling to card (card listener handles everything)
            document.querySelectorAll('.plan-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    // Just let it bubble to the card
                });
            });
        }

        // Detect Location and Set Currency
        async function autoDetectCurrency() {
            try {
                const response = await fetch('https://ipapi.co/json/');
                const data = await response.json();
                if (data.currency && currencySymbols[data.currency]) {
                    currentCurrency = data.currency;
                    
                    // Update button display
                    const flags = { USD: '🇺🇸', GBP: '🇬🇧', EUR: '🇪🇺' };
                    const flagEl = document.getElementById('currency-flag');
                    const codeEl = document.getElementById('currency-code');
                    if (flagEl) flagEl.textContent = flags[currentCurrency];
                    if (codeEl) codeEl.textContent = currentCurrency;
                    
                    updatePlanPrices();
                }
            } catch (err) {
                console.log('Currency detection failed, defaulting to USD');
            }
        }
            const modal = document.getElementById('payment-modal');
            const container = document.getElementById('payment-frame-container');

            container.innerHTML = `<iframe src="${checkoutUrl}" allowpaymentrequest="true"></iframe>`;
            modal.classList.add('active');

            let pollCount = 0;
            const maxPolls = 180;
            const pollInterval = 1000;

            const checkPaymentStatus = async () => {
                try {
                    pollCount++;

                    const resp = await fetch(`/api/subscription/confirm?session_id=${encodeURIComponent(sessionId)}`, {
                        credentials: 'include'
                    });

                    if (resp.ok) {
                        const data = await resp.json();
                        if (data.ok) {
                            clearInterval(pollTimer);
                            closeCheckoutModal();
                            window.location.href = '/apps';
                            return;
                        }
                    }

                    if (pollCount >= maxPolls) {
                        clearInterval(pollTimer);
                        closeCheckoutModal();
                        alert('Payment confirmation timeout. Please check your account status.');
                        reenableButtons();
                        isProcessing = false;
                    }
                } catch (error) {
                    console.error('Error checking payment status:', error);
                }
            };

            const pollTimer = setInterval(checkPaymentStatus, pollInterval);

            function closeCheckoutModal() {
                clearInterval(pollTimer);
                modal.classList.remove('active');
                container.innerHTML = '';
            }

            function reenableButtons() {
                const allButtons = document.querySelectorAll('.plan-btn');
                allButtons.forEach(btn => {
                    btn.disabled = false;
                    const planType = btn.getAttribute('data-plan');
                    if (planType === 'hobby') {
                        btn.textContent = 'Start for Free';
                    } else if (planType === 'starter') {
                        btn.textContent = 'Choose Starter';
                    } else if (planType === 'professional') {
                        btn.textContent = 'Get Started';
                    } else if (planType === 'enterprise') {
                        btn.textContent = 'Choose Enterprise';
                    }
                    btn.classList.remove('opacity-50', 'cursor-not-allowed');
                });
            }

            document.getElementById('payment-modal-close').onclick = () => {
                closeCheckoutModal();
                reenableButtons();
                isProcessing = false;
            };

            modal.onclick = (e) => {
                if (e.target === modal) {
                    closeCheckoutModal();
                    reenableButtons();
                    isProcessing = false;
                }
            };

            const handleEsc = (e) => {
                if (e.key === 'Escape') {
                    closeCheckoutModal();
                    reenableButtons();
                    isProcessing = false;
                }
            };
            document.addEventListener('keydown', handleEsc);
        }

            // Email Signup Form Handler
            const signupForm = document.getElementById('footer-signup-form');
            const signupMessage = document.getElementById('signup-message');

            if (signupForm) {
                signupForm.addEventListener('submit', async (e) => {
                    e.preventDefault();
                    const email = signupForm.querySelector('input[name="email"]').value;
                    const button = signupForm.querySelector('button');
                    
                    button.disabled = true;
                    button.textContent = 'Subscribing...';
                    
                    try {
                        const response = await fetch('https://emailmarketing.modelrailway3d.co.uk/api/webhooks/incoming/wh_0Z49zi_DGj4-lKJMOPO8-g', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                email: email,
                                source: 'plugin_compass_select_plan',
                                timestamp: new Date().toISOString()
                            })
                        });

                        if (response.ok) {
                            signupMessage.textContent = 'Successfully subscribed!';
                            signupMessage.className = 'mt-2 text-xs text-green-600';
                            signupForm.reset();
                        } else {
                            throw new Error('Failed to subscribe');
                        }
                    } catch (error) {
                        signupMessage.textContent = 'Failed to subscribe. Please try again.';
                        signupMessage.className = 'mt-2 text-xs text-red-600';
                    } finally {
                        signupMessage.classList.remove('hidden');
                        button.disabled = false;
                        button.textContent = 'Subscribe';
                        
                        setTimeout(() => {
                            signupMessage.classList.add('hidden');
                        }, 5000);
            }
        });
    }
    </script>
</body>

</html>
