<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Membership Payment | Herbal Wellness</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://www.paypal.com/sdk/js?client-id=YOUR_PAYPAL_CLIENT_ID&currency=USD"></script>
</head>
<body class="bg-gray-100">
    <div class="min-h-screen flex items-center justify-center py-12 px-4">
        <div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8">
            <div class="text-center mb-8">
                <div class="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-star text-emerald-600 text-3xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">Premium Membership</h1>
                <p class="text-gray-600">Unlock your full wellness potential</p>
            </div>

            <div class="bg-emerald-50 p-6 rounded-lg mb-8">
                <div class="flex justify-between items-center mb-4">
                    <span class="text-lg font-semibold text-gray-900">Monthly Plan</span>
                    <div class="text-right">
                        <div class="text-3xl font-bold text-emerald-600">$29.99</div>
                        <div class="text-sm text-gray-500">per month</div>
                    </div>
                </div>
                
                <ul class="space-y-2 text-sm text-gray-700">
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check text-emerald-600"></i>
                        Unlimited coach consultations
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check text-emerald-600"></i>
                        Personalized wellness plans
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check text-emerald-600"></i>
                        Access to herbal store
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check text-emerald-600"></i>
                        Business empowerment tools
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fas fa-check text-emerald-600"></i>
                        Priority customer support
                    </li>
                </ul>
            </div>

            <div class="border-t pt-4 mb-6">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-gray-600">Subtotal</span>
                    <span class="font-semibold">$29.99</span>
                </div>
                <div class="flex justify-between items-center mb-2">
                    <span class="text-gray-600">Tax</span>
                    <span class="font-semibold">$2.40</span>
                </div>
                <div class="flex justify-between items-center text-lg font-bold">
                    <span>Total</span>
                    <span class="text-emerald-600">$32.39</span>
                </div>
            </div>

            <!-- PayPal Button Container -->
            <div id="paypal-button-container"></div>

            <div class="text-center mt-6">
                <a href="/atasteofafricanmarketplace/enhanced-dashboard.php" class="text-gray-500 hover:text-gray-700 text-sm">
                    ← Back to Dashboard
                </a>
            </div>

            <div class="flex items-center justify-center gap-4 mt-6 pt-6 border-t">
                <i class="fas fa-shield-alt text-gray-400"></i>
                <span class="text-xs text-gray-500">Secure payment powered by PayPal</span>
            </div>
        </div>
    </div>

    <script>
        paypal.Buttons({
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '32.39'
                        },
                        description: 'Herbal Wellness Premium Membership - Monthly'
                    }]
                });
            },
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    // Send payment details to server
                    fetch('/atasteofafricanmarketplace/api/membership/activate.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            orderID: data.orderID,
                            paymentID: details.id,
                            amount: '32.39'
                        })
                    })
                    .then(response => response.json())
                    .then(result => {
                        if (result.success) {
                            alert('Payment successful! Welcome to Premium Membership!');
                            window.location.href = '/atasteofafricanmarketplace/enhanced-dashboard.php';
                        } else {
                            alert('Payment processed but membership activation failed. Please contact support.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Payment successful but there was an error. Please contact support.');
                    });
                });
            },
            onError: function(err) {
                console.error('PayPal error:', err);
                alert('Payment failed. Please try again.');
            }
        }).render('#paypal-button-container');
    </script>
</body>
</html>