<?php
/**
 * Free vs Pro Comparison Page
 *
 * @package EasyInvoice
 * @since 2.0.0
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}
?>

<section id="free-vs-pro" class="py-20 bg-gradient-to-br from-indigo-50 via-white to-purple-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
        Free vs Pro: <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">Choose What's Right for You</span>
      </h2>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
        Choose the perfect plan for your business needs. All plans include annual billing with monthly pricing shown.
      </p>
    </div>

    <div class="max-w-7xl mx-auto overflow-x-auto">
      <table class="w-full bg-white rounded-lg shadow-lg">
        <thead>
          <tr class="border-b">
            <th class="text-left p-6 text-lg font-semibold text-gray-900">Feature</th>
            <th class="text-center p-6 text-lg font-semibold text-gray-900">
              <div class="flex flex-col items-center">
                <span class="text-lg font-bold">Free</span>
              </div>
            </th>
            <th class="text-center p-6 text-lg font-semibold text-gray-900">
              <div class="flex flex-col items-center">
                <span class="text-lg font-bold text-indigo-600">Personal</span>
              </div>
            </th>
            <th class="text-center p-6 text-lg font-semibold text-indigo-600">
              <div class="flex flex-col items-center">
                <span class="text-lg font-bold">Professional</span>
              </div>
            </th>
            <th class="text-center p-6 text-lg font-semibold text-purple-600">
              <div class="flex flex-col items-center">
                <span class="text-lg font-bold">Agency</span>
              </div>
            </th>
          </tr>
          <!-- Top Action Buttons Row -->
          <tr class="border-b bg-gray-50">
            <td class="p-6">
              <div class="font-bold text-lg text-gray-900">Quick Start</div>
              <div class="text-sm text-gray-600 mt-1">Choose your plan now</div>
            </td>
            <td class="p-6 text-center">
              <span class="text-gray-500 text-sm">Already installed</span>
            </td>
            <td class="p-6 text-center">
              <a href="https://store.mantrabrain.com/checkout/?edd_action=add_to_cart&download_id=37777&edd_options[price_id]=1" class="inline-block bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white hover:text-white font-bold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg">
                Get Personal
              </a>
            </td>
            <td class="p-6 text-center">
              <a href="https://store.mantrabrain.com/checkout/?edd_action=add_to_cart&download_id=37777&edd_options[price_id]=2" class="inline-block bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white hover:text-white font-bold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg">
                Get Professional
              </a>
            </td>
            <td class="p-6 text-center">
              <a href="https://store.mantrabrain.com/checkout/?edd_action=add_to_cart&download_id=37777&edd_options[price_id]=3" class="inline-block bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white hover:text-white font-bold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg">
                Get Agency
              </a>
            </td>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Unlimited Invoices &amp; Quotes</div>
              <div class="text-sm text-gray-500 mt-1">Create as many invoices and quotes as you need</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">PDF Generation</div>
              <div class="text-sm text-gray-500 mt-1">Generate professional PDF invoices</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">PayPal Payment Gateway</div>
              <div class="text-sm text-gray-500 mt-1">Accept online payments via PayPal</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Tax &amp; Discount Options</div>
              <div class="text-sm text-gray-500 mt-1">Add taxes, discounts, and fees to invoices</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Email Notifications</div>
              <div class="text-sm text-gray-500 mt-1">Automatically send invoices to clients</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Client Management</div>
              <div class="text-sm text-gray-500 mt-1">Store and manage client information</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Professional Templates</div>
              <div class="text-sm text-gray-500 mt-1">Beautiful, customizable invoice designs</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-primary-50">
            <td class="p-6">
              <div class="font-medium text-gray-900">Recurring Invoices</div>
              <div class="text-sm text-gray-500 mt-1">Set up automatic recurring billing</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-primary-50">
            <td class="p-6">
              <div class="font-medium text-gray-900">Invoice & Quote Builder</div>
              <div class="text-sm text-gray-500 mt-1">Advanced drag-and-drop builder for invoices and quotes</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-primary-50">
            <td class="p-6">
              <div class="font-medium text-gray-900">Invoice and Quote Template Builder</div>
              <div class="text-sm text-gray-500 mt-1">Create custom invoice and quote templates with drag-and-drop builder</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-primary-50">
            <td class="p-6">
              <div class="font-medium text-gray-900">Multiple Payment Gateways</div>
              <div class="text-sm text-gray-500 mt-1">Stripe, PayPal, and more payment options</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">PDF Customization &amp; Watermarks</div>
              <div class="text-sm text-gray-500 mt-1">Customize PDFs with your branding</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Custom Invoice Permalinks</div>
              <div class="text-sm text-gray-500 mt-1">Create custom URLs for invoices</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">CSV Export &amp; Reports</div>
              <div class="text-sm text-gray-500 mt-1">Export data and generate reports</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Client Portal &amp; Shortcodes</div>
              <div class="text-sm text-gray-500 mt-1">Client login area and shortcode support</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Payment Reminder Emails</div>
              <div class="text-sm text-gray-500 mt-1">Automated payment reminders</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Partial Payments</div>
              <div class="text-sm text-gray-500 mt-1">Accept partial payments from clients</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Advanced Tax Options</div>
              <div class="text-sm text-gray-500 mt-1">Complex tax calculations and rules</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Priority Support</div>
              <div class="text-sm text-gray-500 mt-1">Faster response times for support</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-primary-50">
            <td class="p-6">
              <div class="font-medium text-gray-900">Client Portal</div>
              <div class="text-sm text-gray-500 mt-1">Client login area and shortcode support</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="p-6">
              <div class="font-medium text-gray-900">Email Support</div>
              <div class="text-sm text-gray-500 mt-1">Get help when you need it</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-primary-50">
            <td class="p-6">
              <div class="font-medium text-gray-900">White Label</div>
              <div class="text-sm text-gray-500 mt-1">Remove branding and customize appearance</div>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </td>
            <td class="p-6 text-center">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </td>
          </tr>
          <!-- Action Buttons Row -->
          <tr class="border-t-2 border-gray-200 bg-gray-50">
            <td class="p-6">
              <div class="font-bold text-lg text-gray-900">Ready to Get Started?</div>
              <div class="text-sm text-gray-600 mt-1">Choose your plan and start invoicing today</div>
            </td>
            <td class="p-6 text-center">
              <span class="text-gray-500 text-sm">Already installed</span>
            </td>
            <td class="p-6 text-center">
              <a href="https://store.mantrabrain.com/checkout/?edd_action=add_to_cart&download_id=37777&edd_options[price_id]=1" class="inline-block bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white hover:text-white font-bold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg">
                Get Personal
              </a>
            </td>
            <td class="p-6 text-center">
              <a href="https://store.mantrabrain.com/checkout/?edd_action=add_to_cart&download_id=37777&edd_options[price_id]=2" class="inline-block bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white hover:text-white font-bold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg">
                Get Professional
              </a>
            </td>
            <td class="p-6 text-center">
              <a href="https://store.mantrabrain.com/checkout/?edd_action=add_to_cart&download_id=37777&edd_options[price_id]=3" class="inline-block bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white hover:text-white font-bold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg">
                Get Agency
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>
