<?php 
if (!defined('ABSPATH')) exit;

// Get current user data
$current_user_id = get_current_user_id();
$current_plan = get_user_meta($current_user_id, 'vmo_subscription_status', true) ?: 'free';
$recommended_plan = sanitize_key(
  (string) (
    $_GET['recommended_plan']
    ?? get_user_meta($current_user_id, 'vmo_quicklaunch_selected_plan', true)
    ?? get_option('vmo_quicklaunch_selected_plan', '')
  )
);
$recommended_billing_cycle = sanitize_key(
  (string) (
    $_GET['billing_cycle']
    ?? get_user_meta($current_user_id, 'vmo_quicklaunch_selected_billing_cycle', true)
    ?? get_option('vmo_quicklaunch_selected_billing_cycle', 'monthly')
  )
);

// Get usage data
if (class_exists('VMO_Usage_Calculator')) {
    $usage_data = VMO_Usage_Calculator::get_usage_data();
} else {
    $usage_data = [
        'plan_name' => ucfirst($current_plan),
        'usage_percent' => 0,
        'days_remaining' => 30
    ];
}

    if (!function_exists('vmo_my_plan_uses_hosted_pricing')) {
      function vmo_my_plan_uses_hosted_pricing($user_id) {
        $hosted_markers = array('quicklaunch', 'quicklaunch_hosted', 'vultr', 'vultr_hosted', 'hosted');
        $channel = strtolower((string) get_option('vmo_client_distribution_channel', ''));

        if (defined('VMO_CLIENT_DISTRIBUTION_CHANNEL')) {
          $channel = strtolower((string) VMO_CLIENT_DISTRIBUTION_CHANNEL);
        }

        if (in_array($channel, $hosted_markers, true)) {
          return true;
        }

        if (get_option('vmo_quicklaunch_hosted_client', '0') === '1') {
          return true;
        }

        $installation_id = strtolower((string) get_option('vmo_installation_id', ''));
        if (strpos($installation_id, 'ql_') === 0) {
          return true;
        }

        if (get_option('vmo_quicklaunch_domain', '') !== '') {
          return true;
        }

        if ($user_id > 0 && get_user_meta($user_id, 'vmo_quicklaunch_session', true) !== '') {
          return true;
        }

        $license_key = '';
        if ($user_id > 0) {
          $license_key = (string) get_user_meta($user_id, 'vmo_license_key', true);
        }
        if ($license_key === '') {
          $license_key = (string) get_option('vmo_license_key', '');
        }

        if ($license_key !== '') {
          global $wpdb;
          $licenses_table = $wpdb->prefix . 'vmo_licenses';
          $table_exists = $wpdb->get_var($wpdb->prepare('SHOW TABLES LIKE %s', $licenses_table));
          $has_source = $table_exists ? ($wpdb->get_var($wpdb->prepare("SHOW COLUMNS FROM {$licenses_table} LIKE %s", 'source')) === 'source') : false;
          $source = $has_source ? $wpdb->get_var($wpdb->prepare(
            "SELECT source FROM {$licenses_table} WHERE license_key = %s LIMIT 1",
            $license_key
          )) : '';
          if (strtolower((string) $source) === 'quicklaunch') {
            return true;
          }
        }

        return false;
      }
    }

    if (!function_exists('vmo_my_plan_pricing')) {
      function vmo_my_plan_pricing($hosted = false) {
        $direct = array(
          'tester' => 49.99,
          'starter' => 99.99,
          'pro' => 199.99,
          'elite' => 499.99,
          'enterprise' => 999.99,
        );

        if (class_exists('VMO_Plan_Policy')) {
          foreach (array_keys($direct) as $plan_key) {
            $policy = VMO_Plan_Policy::get_plan($plan_key);
            if (!empty($policy['price'])) {
              $direct[$plan_key] = (float) $policy['price'];
            }
          }
        }

        $uplift = defined('VMO_QUICKLAUNCH_HOSTED_MONTHLY_UPLIFT') ? (float) VMO_QUICKLAUNCH_HOSTED_MONTHLY_UPLIFT : 25.00;
        $prices = array();

        foreach ($direct as $plan_key => $monthly) {
          $plan_monthly = $hosted ? round($monthly + $uplift, 2) : round($monthly, 2);
          $prices[$plan_key] = array(
            'monthly' => $plan_monthly,
            'annual' => round($plan_monthly * 11, 2),
          );
        }

        return $prices;
      }
    }

    $vmo_my_plan_prices = vmo_my_plan_pricing(vmo_my_plan_uses_hosted_pricing($current_user_id));
    $vmo_my_plan_price = function ($plan, $cycle = 'monthly') use ($vmo_my_plan_prices) {
      return number_format((float) ($vmo_my_plan_prices[$plan][$cycle] ?? 0), 2, '.', '');
    };
?>

<div class="wrap vmo-pricing-interface">
  <style>
    :root {
      --vmo-bg: #0a0f16;
      --vmo-cyan: #0fe1ff;
      --vmo-cyan-soft: #65f1ff;
      --vmo-violet: #7c5cff;
      --vmo-border: rgba(15,225,255,.28);
      --vmo-card-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.55));
      --vmo-glow: 0 0 20px rgba(15,225,255,.3);
    }
    
    .vmo-pricing-interface {
      background: radial-gradient(1200px 700px at 20% -10%, rgba(15,225,255,.06), transparent 60%),
                  radial-gradient(1100px 650px at 100% 0%, rgba(124,92,255,.06), transparent 60%),
                  linear-gradient(#07121a, #09131b 35%, #070d14);
      min-height: 100vh;
      padding: 40px 20px;
      color: #e6f3ff;
    }
    
    .vmo-pricing-header {
      text-align: center;
      margin-bottom: 48px;
    }
    
    .vmo-pricing-header h1 {
      font-size: 42px;
      font-weight: 800;
      color: var(--vmo-cyan-soft);
      text-shadow: var(--vmo-glow);
      margin-bottom: 12px;
    }
    
    .vmo-pricing-header .current-plan-badge {
      display: inline-block;
      padding: 8px 20px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(15,225,255,.22), rgba(0,0,0,.65));
      border: 1px solid var(--vmo-border);
      font-size: 14px;
      margin-bottom: 8px;
    }
    
    .vmo-pricing-header .usage-summary {
      font-size: 16px;
      opacity: 0.85;
    }
    
    .vmo-plans-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 24px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    .vmo-plan-card {
      position: relative;
      background: var(--vmo-card-bg);
      border: 2px solid var(--vmo-border);
      border-radius: 22px;
      padding: 32px 24px;
      transition: all 0.3s ease;
      box-shadow: 0 10px 40px rgba(0,0,0,.4),
                  inset 0 1px 0 rgba(255,255,255,.08);
    }
    
    .vmo-plan-card:hover {
      transform: translateY(-4px);
      border-color: var(--vmo-cyan);
      box-shadow: 0 20px 60px rgba(15,225,255,.25),
                  inset 0 0 40px rgba(15,225,255,.1);
    }
    
    .vmo-plan-card.current {
      border-color: #10b981;
      background: linear-gradient(180deg, rgba(16,185,129,.15), rgba(0,0,0,.55));
    }
    
    .vmo-plan-card.featured {
      border-color: var(--vmo-violet);
      background: linear-gradient(180deg, rgba(124,92,255,.15), rgba(0,0,0,.55));
    }

    .vmo-plan-card.recommended-plan {
      border-color: #f59e0b;
      box-shadow: 0 18px 55px rgba(245,158,11,.18),
                  inset 0 0 24px rgba(245,158,11,.08);
    }
    
    .vmo-plan-badge {
      position: absolute;
      top: -12px;
      right: 24px;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .vmo-plan-badge.current {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
    }
    
    .vmo-plan-badge.popular {
      background: linear-gradient(135deg, var(--vmo-violet), #6366f1);
      color: white;
    }

    .vmo-plan-badge.recommended {
      background: linear-gradient(135deg, #f59e0b, #f97316);
      color: white;
    }
    
    .vmo-plan-icon {
      font-size: 32px;
      margin-bottom: 12px;
      display: block;
    }
    
    .vmo-plan-name {
      font-size: 24px;
      font-weight: 700;
      color: var(--vmo-cyan-soft);
      margin: 0 0 8px 0;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .vmo-plan-price {
      font-size: 48px;
      font-weight: 800;
      color: #fff;
      margin: 0;
      line-height: 1;
    }
    
    .vmo-plan-price small {
      font-size: 18px;
      opacity: 0.7;
      font-weight: 400;
    }
    
    .vmo-plan-tagline {
      color: rgba(230,243,255,.7);
      font-size: 14px;
      margin: 12px 0 24px 0;
      min-height: 40px;
    }
    
    .vmo-plan-features {
      list-style: none;
      padding: 0;
      margin: 24px 0;
      border-top: 1px solid rgba(15,225,255,.2);
      padding-top: 20px;
    }
    
    .vmo-plan-features li {
      padding: 10px 0;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 15px;
      line-height: 1.5;
    }
    
    .vmo-plan-features li::before {
      content: '✓';
      color: var(--vmo-cyan);
      font-weight: 700;
      font-size: 18px;
      flex-shrink: 0;
    }
    
    .vmo-plan-cta {
      width: 100%;
      padding: 16px 12px; /* Reduced padding to prevent overflow */
      border-radius: 14px;
      border: 2px solid var(--vmo-border);
      background: linear-gradient(180deg, rgba(15,225,255,.28), rgba(0,0,0,.6));
      color: white;
      font-size: 15px; /* Slightly smaller font */
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: block;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box; /* Ensure padding is included in width */
    }
    
    .vmo-plan-cta:hover {
      background: linear-gradient(180deg, var(--vmo-cyan), rgba(0,0,0,.7));
      box-shadow: 0 0 30px rgba(15,225,255,.5);
      transform: scale(1.02);
      color: white;
    }
    
    .vmo-plan-cta.current-plan {
      background: linear-gradient(180deg, rgba(107,114,128,.3), rgba(0,0,0,.6));
      border-color: rgba(156,163,175,.4);
      cursor: default;
    }
    
    .vmo-plan-cta.current-plan:hover {
      transform: none;
      box-shadow: none;
    }
    
    .token-usage-meter {
      height: 8px;
      background: rgba(255,255,255,0.1);
      border-radius: 10px;
      overflow: hidden;
    }
    
    .token-usage-meter .meter-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981 0%, #10b981 74%, #f59e0b 75%, #f59e0b 89%, #ef4444 90%, #ef4444 100%);
      transition: width 0.5s ease;
      border-radius: 10px;
    }

    /* Toggle Switch */
    .vmo-billing-toggle-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40px;
      gap: 15px;
    }
    
    .vmo-billing-label {
      font-size: 16px;
      font-weight: 600;
      color: rgba(255,255,255,0.6);
      transition: color 0.3s;
      cursor: pointer;
    }
    
    .vmo-billing-label.active {
      color: #fff;
    }
    
    .vmo-billing-toggle {
      position: relative;
      width: 60px;
      height: 32px;
      background: rgba(255,255,255,0.1);
      border-radius: 32px;
      cursor: pointer;
      border: 1px solid var(--vmo-border);
    }
    
    .vmo-billing-toggle::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 26px;
      height: 26px;
      background: var(--vmo-cyan);
      border-radius: 50%;
      transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
      box-shadow: 0 0 10px rgba(15,225,255,0.5);
    }
    
    .vmo-billing-toggle.annual::after {
      transform: translateX(28px);
    }
    
    .vmo-save-badge {
      background: var(--vmo-violet);
      color: white;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 10px;
      font-weight: 700;
      margin-left: 5px;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    @media (max-width: 768px) {
      .vmo-plans-grid {
        grid-template-columns: 1fr;
      }
      .vmo-pricing-header h1 {
        font-size: 32px;
      }
    }
  </style>

  <div class="vmo-pricing-header">
    <h1>Choose Your Plan</h1>
    <div class="current-plan-badge">
      Current: <?php echo esc_html($usage_data['plan_name']); ?> • 
      <?php echo esc_html($usage_data['usage_percent']); ?>% Used •
      <?php echo esc_html($usage_data['days_remaining']); ?> days left
    </div>
    <div class="token-usage-meter" style="max-width: 600px; margin: 16px auto 8px;">
      <div class="meter-fill" style="width: <?php echo min(100, round($usage_data['usage_percent'])); ?>%;"></div>
    </div>
    <div class="usage-summary">
      Select the plan that fits your business needs
    </div>
    <?php if ($current_plan === 'free' && $recommended_plan !== ''): ?>
      <div class="usage-summary" style="margin-top:10px;color:#ffd98d;">
        QuickLaunch recommendation: <?php echo esc_html(ucfirst($recommended_plan)); ?> plan • <?php echo esc_html(ucfirst($recommended_billing_cycle)); ?> billing
      </div>
    <?php endif; ?>
  </div>

  <!-- Billing Toggle -->
  <div class="vmo-billing-toggle-container">
    <span class="vmo-billing-label <?php echo $recommended_billing_cycle === 'annual' ? '' : 'active'; ?>" data-period="monthly">Monthly</span>
    <div class="vmo-billing-toggle <?php echo $recommended_billing_cycle === 'annual' ? 'annual' : ''; ?>" id="billingToggle" data-initial-billing="<?php echo esc_attr($recommended_billing_cycle === 'annual' ? 'annual' : 'monthly'); ?>"></div>
    <span class="vmo-billing-label <?php echo $recommended_billing_cycle === 'annual' ? 'active' : ''; ?>" data-period="annual">Annual <span class="vmo-save-badge">1 Month Free</span></span>
  </div>

  <div class="vmo-plans-grid">
    
    <!-- TESTER PLAN -->
    <div class="vmo-plan-card <?php echo ($current_plan === 'tester') ? 'current' : ''; ?> <?php echo ($current_plan === 'free' && $recommended_plan === 'tester') ? 'recommended-plan' : ''; ?>">
      <?php if ($current_plan === 'tester'): ?>
        <div class="vmo-plan-badge current">Current Plan</div>
      <?php elseif ($current_plan === 'free' && $recommended_plan === 'tester'): ?>
        <div class="vmo-plan-badge recommended">Recommended</div>
      <?php endif; ?>
      <span class="vmo-plan-icon">💎</span>
      <h2 class="vmo-plan-name">Tester</h2>
      <p class="vmo-plan-price" data-monthly="<?php echo esc_attr($vmo_my_plan_price('tester', 'monthly')); ?>" data-annual="<?php echo esc_attr($vmo_my_plan_price('tester', 'annual')); ?>">
        <span class="amount">$<?php echo esc_html($vmo_my_plan_price('tester', 'monthly')); ?></span><small class="period">/month</small>
      </p>
      <p class="vmo-plan-tagline">
        Low-automation entry plan • Same high-quality onboarding with a smaller operating buffer
      </p>
      <ul class="vmo-plan-features">
        <li>Same high-quality consultation, website build, images, and initial setup as higher plans</li>
        <li>Enhanced Month 1 setup bonus to cover onboarding-heavy usage</li>
        <li>No automated background operations on this tier</li>
        <li>Designed for low-volume calls, transactional email, and light refinements</li>
        <li>Best fit for evaluation, churches, charities, campaigns, and low-automation organizations</li>
        <li>Top-ups and dialer packs handle heavier operational volume</li>
      </ul>
      <?php if ($current_plan === 'tester'): ?>
        <button class="vmo-plan-cta current-plan">Your Current Plan</button>
      <?php else: ?>
        <a href="#" class="vmo-plan-cta vmo-plan-btn" data-plan="tester">Subscribe to Tester</a>
      <?php endif; ?>
    </div>

    <!-- STARTER PLAN -->
    <div class="vmo-plan-card featured <?php echo ($current_plan === 'starter') ? 'current' : ''; ?> <?php echo ($current_plan === 'free' && $recommended_plan === 'starter') ? 'recommended-plan' : ''; ?>">
      <?php if ($current_plan === 'starter'): ?>
        <div class="vmo-plan-badge current">Current Plan</div>
      <?php elseif ($current_plan === 'free' && $recommended_plan === 'starter'): ?>
        <div class="vmo-plan-badge recommended">Recommended</div>
      <?php else: ?>
        <div class="vmo-plan-badge popular">Most Popular</div>
      <?php endif; ?>
      <span class="vmo-plan-icon">🚀</span>
      <h2 class="vmo-plan-name">Starter</h2>
      <p class="vmo-plan-price" data-monthly="<?php echo esc_attr($vmo_my_plan_price('starter', 'monthly')); ?>" data-annual="<?php echo esc_attr($vmo_my_plan_price('starter', 'annual')); ?>">
        <span class="amount">$<?php echo esc_html($vmo_my_plan_price('starter', 'monthly')); ?></span><small class="period">/month</small>
      </p>
      <p class="vmo-plan-tagline">
        Same high-quality onboarding with a monthly automation cadence and a larger operating wallet
      </p>
      <ul class="vmo-plan-features">
        <li>Same high-quality consultation, website build, media generation, and setup as every paid plan</li>
        <li>Monthly background scans, recommendations, and business intelligence updates</li>
        <li>Larger recurring wallet for calls, email, chat, and refinements</li>
        <li>Good fit for solopreneurs, local businesses, and lighter recurring automation</li>
        <li>Phone system, email workflows, and SEO support remain available</li>
        <li>Top-ups and dialer packs extend high-usage months without changing plans</li>
      </ul>
      <?php if ($current_plan === 'starter'): ?>
        <button class="vmo-plan-cta current-plan">Your Current Plan</button>
      <?php else: ?>
        <a href="#" class="vmo-plan-cta vmo-plan-btn" data-plan="starter">Subscribe to Starter</a>
      <?php endif; ?>
    </div>

    <!-- PRO PLAN -->
    <div class="vmo-plan-card <?php echo ($current_plan === 'pro') ? 'current' : ''; ?> <?php echo ($current_plan === 'free' && $recommended_plan === 'pro') ? 'recommended-plan' : ''; ?>">
      <?php if ($current_plan === 'pro'): ?>
        <div class="vmo-plan-badge current">Current Plan</div>
      <?php elseif ($current_plan === 'free' && $recommended_plan === 'pro'): ?>
        <div class="vmo-plan-badge recommended">Recommended</div>
      <?php endif; ?>
      <span class="vmo-plan-icon">⚡</span>
      <h2 class="vmo-plan-name">Pro</h2>
      <p class="vmo-plan-price" data-monthly="<?php echo esc_attr($vmo_my_plan_price('pro', 'monthly')); ?>" data-annual="<?php echo esc_attr($vmo_my_plan_price('pro', 'annual')); ?>">
        <span class="amount">$<?php echo esc_html($vmo_my_plan_price('pro', 'monthly')); ?></span><small class="period">/month</small>
      </p>
      <p class="vmo-plan-tagline">
        Same high-quality onboarding with twice-monthly automation and a stronger recurring operating buffer
      </p>
      <ul class="vmo-plan-features">
        <li>Same high-quality consultation, website build, media generation, and setup as every paid plan</li>
        <li>Twice-monthly background scans and strategic recommendation cycles</li>
        <li>Stronger recurring wallet for ongoing operations, approvals, and refinements</li>
        <li>Better fit for growing companies, agencies, and more active communication volume</li>
        <li>Marketing, SEO, phone, and content systems have more room to run comfortably</li>
        <li>Top-ups and dialer packs still cover exceptional volume spikes</li>
      </ul>
      <?php if ($current_plan === 'pro'): ?>
        <button class="vmo-plan-cta current-plan">Your Current Plan</button>
      <?php else: ?>
        <a href="#" class="vmo-plan-cta vmo-plan-btn" data-plan="pro">Subscribe to Pro</a>
      <?php endif; ?>
    </div>

    <!-- ELITE PLAN -->
    <div class="vmo-plan-card <?php echo ($current_plan === 'elite' || $current_plan === 'business') ? 'current' : ''; ?> <?php echo ($current_plan === 'free' && $recommended_plan === 'elite') ? 'recommended-plan' : ''; ?>">
      <?php if ($current_plan === 'elite' || $current_plan === 'business'): ?>
        <div class="vmo-plan-badge current">Current Plan</div>
      <?php elseif ($current_plan === 'free' && $recommended_plan === 'elite'): ?>
        <div class="vmo-plan-badge recommended">Recommended</div>
      <?php endif; ?>
      <span class="vmo-plan-icon">👑</span>
      <h2 class="vmo-plan-name">Elite</h2>
      <p class="vmo-plan-price" data-monthly="<?php echo esc_attr($vmo_my_plan_price('elite', 'monthly')); ?>" data-annual="<?php echo esc_attr($vmo_my_plan_price('elite', 'annual')); ?>">
        <span class="amount">$<?php echo esc_html($vmo_my_plan_price('elite', 'monthly')); ?></span><small class="period">/month</small>
      </p>
      <p class="vmo-plan-tagline">
        Same high-quality onboarding with weekly automation and a high-capacity recurring wallet
      </p>
      <ul class="vmo-plan-features">
        <li>Same high-quality consultation, website build, media generation, and setup as every paid plan</li>
        <li>Weekly background scans, recommendations, and operating intelligence</li>
        <li>High-capacity recurring wallet for sustained phone, chat, email, and refinement usage</li>
        <li>Best for large operations that need recurring automation every week</li>
        <li>Priority handling for complex execution and heavier operational throughput</li>
        <li>Dedicated support and enterprise-style service expectations</li>
      </ul>
      <?php if ($current_plan === 'elite' || $current_plan === 'business'): ?>
        <button class="vmo-plan-cta current-plan">Your Current Plan</button>
      <?php else: ?>
        <a href="#" class="vmo-plan-cta vmo-plan-btn" data-plan="elite">Subscribe to Elite</a>
      <?php endif; ?>
    </div>

    <!-- ENTERPRISE PLAN -->
    <div class="vmo-plan-card disabled-plan <?php echo ($current_plan === 'enterprise') ? 'current' : ''; ?>" style="opacity:0.7; pointer-events:none;">
      <?php if ($current_plan === 'enterprise'): ?>
        <div class="vmo-plan-badge current">Current Plan</div>
      <?php endif; ?>
      <span class="vmo-plan-icon">🏢</span>
      <h2 class="vmo-plan-name">Enterprise</h2>
      <p class="vmo-plan-price" data-monthly="<?php echo esc_attr($vmo_my_plan_price('enterprise', 'monthly')); ?>" data-annual="<?php echo esc_attr($vmo_my_plan_price('enterprise', 'annual')); ?>">
        <span class="amount">$<?php echo esc_html($vmo_my_plan_price('enterprise', 'monthly')); ?></span><small class="period">/month</small>
      </p>
      <p class="vmo-plan-tagline">
        Same high-quality onboarding with weekly automation, enterprise compute priority, and custom scale support
      </p>
      <ul class="vmo-plan-features">
        <li>Same high-quality consultation, website build, media generation, and setup as every paid plan</li>
        <li>Weekly background scans with enterprise priority compute enabled</li>
        <li>Largest recurring wallet in the core plan lineup</li>
        <li>Designed for custom integrations, complex operations, and dedicated infrastructure needs</li>
        <li>Priority support, custom scale planning, and long-run capacity headroom</li>
        <li>Best fit when standard plan buffers are no longer sufficient</li>
      </ul>
      <?php if ($current_plan === 'enterprise'): ?>
        <button class="vmo-plan-cta current-plan">Your Current Plan</button>
      <?php else: ?>
        <button class="vmo-plan-cta" disabled style="background:#555;cursor:not-allowed;">Locked (Coming Soon)</button>
      <?php endif; ?>
    </div>

  </div>

  <!-- 1-YEAR POWER PACKS -->
  <div style="margin-top: 60px; padding-top: 40px; border-top: 2px solid rgba(15,225,255,0.2);">
    <div class="vmo-pricing-header">
      <h2 style="font-size: 32px; font-weight: 700; color: #10b981; margin-bottom: 12px;">📞 Power Dialer & Phone Packs</h2>
      <div class="usage-summary" style="margin-bottom: 24px;">
        High-volume calling packs valid for 1 full year (Requires Active Monthly Plan)
      </div>
    </div>

    <div class="vmo-plans-grid">
      
      <!-- Pack M -->
      <div class="vmo-plan-card" style="border-color: rgba(16, 185, 129, 0.4);">
        <span class="vmo-plan-icon">📞</span>
        <h2 class="vmo-plan-name">Phone Pack M</h2>
        <p class="vmo-plan-price">$99.99<small> /year</small></p>
        <p class="vmo-plan-tagline">Starter calling capacity</p>
        <ul class="vmo-plan-features">
          <li><strong>252,000 Tokens</strong> (~252 mins)</li>
          <li>Valid for 1 Year</li>
          <li>Requires Active Monthly Plan</li>
        </ul>
        <a href="#" class="vmo-plan-cta vmo-plan-btn" data-plan="phone_m">Get Pack M</a>
      </div>

      <!-- Pack L -->
      <div class="vmo-plan-card featured" style="border-color: rgba(16, 185, 129, 0.8);">
        <div class="vmo-plan-badge popular" style="background: #10b981;">Best Value</div>
        <span class="vmo-plan-icon">📞</span>
        <h2 class="vmo-plan-name">Phone Pack L</h2>
        <p class="vmo-plan-price">$249.99<small> /year</small></p>
        <p class="vmo-plan-tagline">Pro calling capacity</p>
        <ul class="vmo-plan-features">
          <li><strong>630,000 Tokens</strong> (~630 mins)</li>
          <li>Valid for 1 Year</li>
          <li>Requires Active Monthly Plan</li>
        </ul>
        <a href="#" class="vmo-plan-cta vmo-plan-btn" data-plan="phone_l">Get Pack L</a>
      </div>

      <!-- Power Dialer -->
      <div class="vmo-plan-card" style="border-color: #f59e0b; background: linear-gradient(180deg, rgba(245,158,11,.15), rgba(0,0,0,.55));">
        <span class="vmo-plan-icon">⚡</span>
        <h2 class="vmo-plan-name" style="color: #f59e0b;">Power Dialer</h2>
        <p class="vmo-plan-price">$499.99<small> /year</small></p>
        <p class="vmo-plan-tagline">Ultimate calling machine</p>
        <ul class="vmo-plan-features">
          <li><strong>1,417,500 Tokens</strong> (~1,417 mins)</li>
          <li>Valid for 1 Year</li>
          <li>Requires Active Monthly Plan</li>
        </ul>
        <a href="#" class="vmo-plan-cta vmo-plan-btn" data-plan="power_dialer">Get Power Dialer</a>
      </div>

      <!-- Pro Call Center (NEW) -->
      <div class="vmo-plan-card" style="border-color: #ef4444; background: linear-gradient(180deg, rgba(239,68,68,.15), rgba(0,0,0,.55));">
        <span class="vmo-plan-icon">🏢</span>
        <h2 class="vmo-plan-name" style="color: #ef4444;">Pro Call Center</h2>
        <p class="vmo-plan-price">$699.99<small> /year</small></p>
        <p class="vmo-plan-tagline">Maximum High-Volume Capacity</p>
        <ul class="vmo-plan-features">
          <li><strong>2,000,000 Tokens</strong> (~2,000 mins)</li>
          <li><strong>~500 Calls</strong> (4 mins each)</li>
          <li>Valid for 1 Year</li>
          <li>Requires Active Monthly Plan</li>
        </ul>
        <a href="#" class="vmo-plan-cta vmo-plan-btn" data-plan="phone_xl">Get Call Center Pack</a>
      </div>

    </div>
  </div>

  <!-- ONE-TIME ADD-ONS -->
  <div style="margin-top: 60px; padding-top: 40px; border-top: 2px solid rgba(15,225,255,0.2);">
    <div class="vmo-pricing-header">
      <h2 style="font-size: 32px; font-weight: 700; color: var(--vmo-cyan-soft); margin-bottom: 12px;">Need a One‑Time Add‑On?</h2>
      <div class="usage-summary" style="margin-bottom: 24px;">
        One-time purchases to supplement your current plan
      </div>
    </div>

    <div class="vmo-plans-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 900px; margin: 0 auto;">
      
      <!-- SMALL ADD-ON -->
      <div class="vmo-plan-card" style="background: linear-gradient(180deg, rgba(124,92,255,.12), rgba(0,0,0,.55)); border-color: rgba(124,92,255,0.4);">
        <span class="vmo-plan-icon">💎</span>
        <h2 class="vmo-plan-name">Small Add‑On</h2>
        <p class="vmo-plan-price">$19.99<small> one-time</small></p>
        <p class="vmo-plan-tagline">
          Quick boost for occasional needs
        </p>
        <ul class="vmo-plan-features">
          <li>Immediate account boost</li>
          <li>Never expires</li>
          <li>Use anytime</li>
          <li>Perfect for emergency needs</li>
        </ul>
        <a href="#" class="vmo-plan-cta" data-topup="small" data-price="19.99">Buy Add‑On</a>
      </div>

      <!-- MEDIUM ADD-ON -->
      <div class="vmo-plan-card" style="background: linear-gradient(180deg, rgba(124,92,255,.15), rgba(0,0,0,.55)); border-color: rgba(124,92,255,0.5);">
        <div class="vmo-plan-badge" style="background: linear-gradient(180deg, rgba(124,92,255,.3), rgba(0,0,0,.7)); border-color: rgba(124,92,255,0.6);">Best Value</div>
        <span class="vmo-plan-icon">💰</span>
        <h2 class="vmo-plan-name">Medium Add‑On</h2>
        <p class="vmo-plan-price">$49.99<small> one-time</small></p>
        <p class="vmo-plan-tagline">
          Popular choice for growing businesses
        </p>
        <ul class="vmo-plan-features">
          <li>Immediate account boost</li>
          <li>Best value</li>
          <li>Never expires</li>
          <li>Use anytime</li>
        </ul>
        <a href="#" class="vmo-plan-cta" data-topup="medium" data-price="49.99">Buy Add‑On</a>
      </div>

      <!-- LARGE ADD-ON -->
      <div class="vmo-plan-card" style="background: linear-gradient(180deg, rgba(124,92,255,.18), rgba(0,0,0,.55)); border-color: rgba(124,92,255,0.6);">
        <span class="vmo-plan-icon">🚀</span>
        <h2 class="vmo-plan-name">Large Add‑On</h2>
        <p class="vmo-plan-price">$99.99<small> one-time</small></p>
        <p class="vmo-plan-tagline">
          Maximum boost for heavy campaigns
        </p>
        <ul class="vmo-plan-features">
          <li>Immediate account boost</li>
          <li>Maximum boost</li>
          <li>Never expires</li>
          <li>Perfect for big projects</li>
        </ul>
        <a href="#" class="vmo-plan-cta" data-topup="large" data-price="99.99">Buy Add‑On</a>
      </div>

    </div>
  </div>

</div>


