<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
echo render_partial( 'header' );
?>

<main style="padding: 60px 0;">
    <div class="container">
        <div style="max-width: 600px; margin: 0 auto; text-align: center;">
            <h1 style="margin-bottom: 20px; color: var(--gray-800);">Choose Your Plan</h1>
            <p style="color: var(--gray-600); margin-bottom: 40px;">
                Unlock the full power of Avision and boost your local visibility
            </p>
            
            <div style="display: grid; gap: 30px;">
                <div style="background: white; border-radius: 16px; padding: 40px; box-shadow: var(--shadow-lg); border: 2px solid var(--primary-color);">
                    <div style="background: var(--primary-color); color: white; padding: 5px 15px; border-radius: 20px; display: inline-block; margin-bottom: 20px; font-size: 14px;">
                        Most Popular
                    </div>
                    <h2 style="margin-bottom: 10px;">Premium Dashboard</h2>
                    <p style="color: var(--gray-600); margin-bottom: 20px;">
                        Full access to all optimization levels and features
                    </p>
                    <div style="font-size: 48px; font-weight: 700; color: var(--primary-color); margin-bottom: 20px;">
                        <?php echo $i18n->get_price('dashboard'); ?>
                        <span style="font-size: 16px; color: var(--gray-500);">one-time</span>
                    </div>
                    
                    <ul style="text-align: left; list-style: none; margin-bottom: 30px;">
                        <li style="padding: 10px 0; border-bottom: 1px solid var(--gray-200);">
                            <span style="color: var(--secondary-color); margin-right: 10px;">✓</span>
                            Full Dashboard Access
                        </li>
                        <li style="padding: 10px 0; border-bottom: 1px solid var(--gray-200);">
                            <span style="color: var(--secondary-color); margin-right: 10px;">✓</span>
                            All 4 Optimization Levels
                        </li>
                        <li style="padding: 10px 0; border-bottom: 1px solid var(--gray-200);">
                            <span style="color: var(--secondary-color); margin-right: 10px;">✓</span>
                            AI Chatbot Assistance
                        </li>
                        <li style="padding: 10px 0; border-bottom: 1px solid var(--gray-200);">
                            <span style="color: var(--secondary-color); margin-right: 10px;">✓</span>
                            Priority Email Support
                        </li>
                        <li style="padding: 10px 0;">
                            <span style="color: var(--secondary-color); margin-right: 10px;">✓</span>
                            Lifetime Updates
                        </li>
                    </ul>
                    
                    <button class="btn btn-primary" style="width: 100%; padding: 16px;">
                        Get Premium Access
                    </button>
                </div>
                
                <div style="background: linear-gradient(135deg, #fef3c7, #fde68a); border-radius: 16px; padding: 40px; box-shadow: var(--shadow-lg); border: 2px solid #f59e0b;">
                    <h2 style="margin-bottom: 10px; color: #92400e;">Automation Add-on</h2>
                    <p style="color: #78350f; margin-bottom: 20px;">
                        Let AI handle your reviews and posts automatically
                    </p>
                    <div style="font-size: 48px; font-weight: 700; color: #d97706; margin-bottom: 20px;">
                        <?php echo $i18n->get_price('automation'); ?>
                    </div>
                    
                    <ul style="text-align: left; list-style: none; margin-bottom: 30px;">
                        <li style="padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
                            <span style="color: #059669; margin-right: 10px;">✓</span>
                            Auto-reply to Reviews
                        </li>
                        <li style="padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
                            <span style="color: #059669; margin-right: 10px;">✓</span>
                            Scheduled Google Posts
                        </li>
                        <li style="padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
                            <span style="color: #059669; margin-right: 10px;">✓</span>
                            AI Content Generation
                        </li>
                        <li style="padding: 10px 0;">
                            <span style="color: #059669; margin-right: 10px;">✓</span>
                            Performance Analytics
                        </li>
                    </ul>
                    
                    <button class="btn btn-premium" style="width: 100%; padding: 16px;">
                        Subscribe to Automation
                    </button>
                    
                    <p style="font-size: 12px; color: #78350f; margin-top: 15px;">
                        * Requires Premium Dashboard access
                    </p>
                </div>
            </div>
            
            <div style="margin-top: 40px; color: var(--gray-500); font-size: 14px;">
                <p>🔒 Secure payment powered by Stripe</p>
                <p style="margin-top: 10px;">30-day money-back guarantee</p>
            </div>
        </div>
    </div>
</main>

<?php echo render_partial('footer'); ?>
