<?php
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}
$checkout_url = 'https://www.conversios.io/pricing/?utm_source=woo_aiofree_plugin&utm_medium=pricing_page&utm_campaign=in_app_pricing';
?>

<div class="wrap" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;">
    <h1 style="text-align: center; font-size: 28px; margin-top: 30px; margin-bottom: 15px; color: #1e293b;">Choose the Right Plan for Your Business</h1>

    <div style="display: flex; justify-content: center; gap: 30px; margin-bottom: 40px; color: #334155; font-size: 15px; font-weight: 500;">
        <span style="display: flex; align-items: center;"><span style="color: #16a34a; margin-right: 8px; font-weight: bold;">&#10003;</span> 1 Active Website</span>
        <span style="display: flex; align-items: center;"><span style="color: #16a34a; margin-right: 8px; font-weight: bold;">&#10003;</span> Priority Support</span>
        <span style="display: flex; align-items: center;"><span style="color: #16a34a; margin-right: 8px; font-weight: bold;">&#10003;</span> 15-Day Money-Back Guarantee</span>
    </div>

    <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding-bottom: 50px;">
        <!-- Card 1 -->
        <div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; width: 320px; padding: 30px 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); position: relative; display: flex; flex-direction: column;">

            <h2 style="color: #ea580c; font-size: 20px; text-align: center; margin-top: 10px; margin-bottom: 5px; font-weight: 800;">All-in-One Pixel Pro</h2>
            <p style="text-align: center; color: #64748b; font-size: 13px; line-height: 1.5; min-height: 40px; margin-bottom: 15px;">Perfect for small businesses starting with conversion tracking.</p>
            
            <div style="text-align: center; margin-bottom: 25px;">
                <span style="display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #16a34a; font-size: 12px; border-radius: 6px; font-weight: 600;">
                    <span class="dashicons dashicons-shield" style="font-size: 14px; width: 14px; height: 14px; margin-top: 1px; margin-right: 4px;"></span> 15-Day Money Back
                </span>
            </div>

            <div style="text-align: center; margin: 10px 0 15px; color: #0f172a; font-weight: 800;">
                <span style="font-size: 20px; position: relative; top: -12px;">$</span><span style="font-size: 46px;">89.1</span><span style="font-size: 14px; font-weight: 500; color: #64748b;"> /year</span>
            </div>
            
            <div style="text-align: center; margin-bottom: 10px;">
                <span style="display: inline-block; background: #84cc16; color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 700;">50% + 10% OFF</span>
            </div>

            <div style="text-align: center; color: #64748b; font-size: 12px; margin-bottom: 25px;">
                Regular Price: <span style="text-decoration: line-through; color: #ef4444;">$198.00/year</span>
            </div>

            <ul style="list-style: none; padding: 0; margin: 0; margin-bottom: 30px; font-size: 13px; color: #334155; flex-grow: 1;">

                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Automated Google Tag Manager Setup</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> All Ecommerce Events and Conversion Tracking</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Enhanced Ecommerce Conversion Tracking</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Dynamic Remarketing</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> GA4 General report with the User, Page and session data</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> GA4 Ecommerce Report with the order performance and checkout funnel data</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Google Ads report with the campaign performance reports</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Meta Campaign report</li>
                <li style="margin-top: 20px; margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Up to <b>500</b> Product Sync</li>
            </ul>

            <a href="<?php echo esc_url($checkout_url); ?>" target="_blank" style="display: block; text-align: center; background: #ea580c; color: #fff; padding: 12px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 15px; transition: background 0.2s;">Get Started</a>
        </div>

        <!-- Card 2 (Most Popular) -->
        <div style="background: #fff; border: 2px solid #1d4ed8; border-radius: 12px; width: 320px; padding: 30px 20px; box-shadow: 0 10px 15px -3px rgba(29, 78, 216, 0.1); position: relative; display: flex; flex-direction: column; transform: scale(1.02);">
            <div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #3b82f6; color: #fff; font-size: 11px; font-weight: bold; padding: 4px 14px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px;">Most Popular</div>

            <h2 style="color: #ea580c; font-size: 20px; text-align: center; margin-top: 15px; margin-bottom: 5px; font-weight: 800;">All-in-One CAPI Pro</h2>
            <p style="text-align: center; color: #64748b; font-size: 13px; line-height: 1.5; min-height: 40px; margin-bottom: 15px;">Advanced CAPI tracking for FB, TikTok, Snapchat & more.</p>
            
            <div style="text-align: center; margin-bottom: 25px;">
                <span style="display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #16a34a; font-size: 12px; border-radius: 6px; font-weight: 600;">
                    <span class="dashicons dashicons-shield" style="font-size: 14px; width: 14px; height: 14px; margin-top: 1px; margin-right: 4px;"></span> 15-Day Money Back
                </span>
            </div>

            <div style="text-align: center; margin: 10px 0 15px; color: #0f172a; font-weight: 800;">
                <span style="font-size: 20px; position: relative; top: -12px;">$</span><span style="font-size: 46px;">179.1</span><span style="font-size: 14px; font-weight: 500; color: #64748b;"> /year</span>
            </div>
            
            <div style="text-align: center; margin-bottom: 10px;">
                <span style="display: inline-block; background: #84cc16; color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 700;">50% + 10% OFF</span>
            </div>

            <div style="text-align: center; color: #64748b; font-size: 12px; margin-bottom: 25px;">
                Regular Price: <span style="text-decoration: line-through; color: #ef4444;">$398.00/year</span>
            </div>

            <ul style="list-style: none; padding: 0; margin: 0; margin-bottom: 30px; font-size: 13px; color: #334155; flex-grow: 1;">

                <li style="margin-bottom: 8px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> <b>All-in-One Pixel Pro features</b></li>
                <li style="margin-bottom: 12px; display: flex; justify-content: center; width: 100%;">
                    <div style="background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 18px;">+</div>
                </li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> All Ecommerce events and Conversion Tracking with CAPI</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Facebook Conversion API</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Snapchat Conversion API</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Tiktok Events API</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Get highest Event Match Quality with event deduplication</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Includes all reports</li>
                <li style="margin-top: 20px; margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> <b>Unlimited</b> Product Sync</li>
            </ul>

            <a href="<?php echo esc_url($checkout_url); ?>" target="_blank" style="display: block; text-align: center; background: #ea580c; color: #fff; padding: 12px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 15px; transition: background 0.2s;">Get Started</a>
        </div>

        <!-- Card 3 -->
        <div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; width: 320px; padding: 30px 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); position: relative; display: flex; flex-direction: column;">

            <h2 style="color: #ea580c; font-size: 20px; text-align: center; margin-top: 10px; margin-bottom: 5px; font-weight: 800;">Server Side Tracking</h2>
            <p style="text-align: center; color: #64748b; font-size: 13px; line-height: 1.5; min-height: 40px; margin-bottom: 15px;">Ultimate performance with Server-Side GTM & Cloud Hosting.</p>
            
            <div style="text-align: center; margin-bottom: 25px;">
                <span style="display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #16a34a; font-size: 12px; border-radius: 6px; font-weight: 600;">
                    <span class="dashicons dashicons-shield" style="font-size: 14px; width: 14px; height: 14px; margin-top: 1px; margin-right: 4px;"></span> 15-Day Money Back
                </span>
            </div>

            <div style="text-align: center; margin: 10px 0 15px; color: #0f172a; font-weight: 800;">
                <span style="font-size: 20px; position: relative; top: -12px;">$</span><span style="font-size: 46px;">449.1</span><span style="font-size: 14px; font-weight: 500; color: #64748b;"> /year</span>
            </div>
            
            <div style="text-align: center; margin-bottom: 10px;">
                <span style="display: inline-block; background: #84cc16; color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 700;">50% + 10% OFF</span>
            </div>

            <div style="text-align: center; color: #64748b; font-size: 12px; margin-bottom: 25px;">
                Regular Price: <span style="text-decoration: line-through; color: #ef4444;">$998.00/year</span>
            </div>

            <ul style="list-style: none; padding: 0; margin: 0; margin-bottom: 30px; font-size: 13px; color: #334155; flex-grow: 1;">

                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Automated Google Tag Manager Setup</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> <b>Server-Side GTM Automation</b></li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> <b>Google Cloud Hosting Included</b></li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Data Layer Integration</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> All Ecommerce events and Conversion Tracking using server</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Highest event and conversion tracking accuracy</li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;">
                    <span style="color: #16a34a; margin-right: 8px; flex-shrink: 0;">&#10003;</span> 
                    <div>
                        <b>Order Recovery Engine (ORE)</b> :<br>
                        Recovers abandoned conversions & events <a href="https://www.conversios.io/blog/woocommerce-conversion-tracking-server-side-recovery-guide/" target="_blank" style="color: #2563eb; text-decoration: underline; font-size: 12px; margin-left: 2px;">Learn more</a>
                    </div>
                </li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;">
                    <span style="color: #16a34a; margin-right: 8px; flex-shrink: 0;">&#10003;</span> 
                    <div>
                        <b>Universal Commerce Protocol</b> :<br>
                        Enable product purchase directly from the Google Gemini <a href="https://www.conversios.io/blog/google-universal-commerce-protocol-ucp/" target="_blank" style="color: #2563eb; text-decoration: underline; font-size: 12px; margin-left: 2px;">Learn more</a>
                    </div>
                </li>
                <li style="margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> Includes all reports</li>
                <li style="margin-top: 20px; margin-bottom: 12px; display: flex; align-items: flex-start;"><span style="color: #16a34a; margin-right: 8px;">&#10003;</span> <b>Unlimited</b> Product Sync</li>
            </ul>

            <a href="<?php echo esc_url($checkout_url); ?>" target="_blank" style="display: block; text-align: center; background: #ea580c; color: #fff; padding: 12px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 15px; transition: background 0.2s;">Get Started</a>
        </div>
    </div>
</div>
