<!-- PRICING PAGE REDESIGN -->
<div class="bg-[#050816] text-white overflow-x-hidden min-h-[80vh] py-24 pt-32">
  <div class="container mx-auto max-w-7xl px-4 relative z-10">
    
    <!-- Heading Area -->
    <div class="text-center mb-12 reveal">
      <div class="inline-block px-4 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-bold uppercase tracking-wider mb-4">Price</div>
      <h1 class="text-4xl md:text-5xl font-bold mb-6">Choose your preferred plan.</h1>
      
      <!-- Toggle -->
      <div class="flex items-center justify-center mt-10">
        <div class="bg-white/5 border border-white/10 p-1.5 rounded-full inline-flex relative">
          <!-- Active Background Indicator -->
          <div id="toggleBg" class="absolute top-1.5 bottom-1.5 left-1.5 w-[calc(50%-6px)] bg-indigo-600 rounded-full transition-all duration-300"></div>
          
          <button onclick="setPricing('monthly')" id="btnMonthly" class="relative z-10 w-32 py-2.5 text-sm font-bold text-white transition-colors">Monthly</button>
          <button onclick="setPricing('yearly')" id="btnYearly" class="relative z-10 w-32 py-2.5 text-sm font-bold text-gray-400 transition-colors">Yearly</button>
        </div>
      </div>
    </div>

    <!-- Pricing Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-[1100px] mx-auto">
      <?php if (!empty($plans)) : $i = 0; foreach ($plans as $plan) : $i++; 
          $regular_price = (float)$plan['price'];
          $final_price = (float)$plan['final_price'];
          $discount_percent = 0;
          if ($regular_price > $final_price && $regular_price > 0) {
              $discount_percent = round((($regular_price - $final_price) / $regular_price) * 100);
          }
          $plan_type = ($plan['duration_type'] == 3) ? 'yearly' : 'monthly';
          $is_popular = ($i == 2);
      ?>
      
      <!-- Plan Card -->
      <div class="plan-card <?= $plan_type ?>-plan relative rounded-3xl border <?= $is_popular ? 'border-indigo-500/50 bg-[#0a0f1c]/80 shadow-2xl shadow-indigo-500/20' : 'border-white/10 bg-white/5' ?> backdrop-blur-xl p-8 flex flex-col transition-all duration-300 hover:-translate-y-2 reveal" >
        <?php if($is_popular): ?>
          <div class="absolute -top-4 inset-x-0 flex justify-center">
            <span class="bg-indigo-600 text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-lg shadow-indigo-500/30">Most Popular</span>
          </div>
        <?php endif; ?>
        
        <div class="mb-6 flex items-center justify-between">
          <h3 class="text-xl font-bold text-white"><?= $plan['name'] ?></h3>
          <?php if ($discount_percent > 0): ?>
            <span class="bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 text-xs font-bold px-2.5 py-1 rounded-full">
              <?= $discount_percent ?>% OFF
            </span>
          <?php endif; ?>
        </div>

        <div class="mb-6">
          <div class="flex items-baseline gap-2">
            <span class="text-4xl font-black text-white"><?= currency_format($final_price) ?></span>
            <span class="text-sm text-gray-500">/ <?= ($plan_type == 'yearly') ? 'year' : 'month' ?></span>
          </div>
          <?php if ($discount_percent > 0): ?>
            <div class="text-sm line-through text-gray-500 font-medium mt-1"><?= currency_format($regular_price) ?></div>
          <?php endif; ?>
          <div class="text-sm text-gray-400 mt-2"><?= duration_type($plan['name'], $plan['duration_type'], $plan['duration'], false) ?></div>
        </div>

        <div class="border-t border-white/10 pt-6 mb-8 flex-1">
          <ul class="flex flex-col gap-4">
            <li class="flex items-start gap-3">
              <i class="fas fa-check-circle text-indigo-400 mt-0.5"></i>
              <span class="text-sm text-gray-300"><?= plan_message('brand', $plan['brand']) ?></span>
            </li>
            <li class="flex items-start gap-3">
              <i class="fas fa-check-circle text-indigo-400 mt-0.5"></i>
              <span class="text-sm text-gray-300"><?= plan_message('device', $plan['device']) ?></span>
            </li>
            <li class="flex items-start gap-3">
              <i class="fas fa-check-circle text-indigo-400 mt-0.5"></i>
              <span class="text-sm text-gray-300"><?= plan_message('transaction', $plan['transaction']) ?></span>
            </li>
          </ul>
        </div>

        <div class="mt-auto">
          <?php if (session('uid')) : ?>
            <a href="<?= user_url('plans') ?>" class="block w-full py-3.5 px-6 text-center rounded-xl font-bold transition-colors <?= $is_popular ? 'bg-indigo-600 hover:bg-indigo-700 text-white shadow-lg shadow-indigo-500/25' : 'bg-white/10 hover:bg-white/20 text-white' ?>">
              Get Started
            </a>
          <?php else : ?>
            <a href="<?= base_url('?auth=signup') ?>" class="block w-full py-3.5 px-6 text-center rounded-xl font-bold transition-colors <?= $is_popular ? 'bg-indigo-600 hover:bg-indigo-700 text-white shadow-lg shadow-indigo-500/25' : 'bg-white/10 hover:bg-white/20 text-white' ?>">
              Get Started
            </a>
          <?php endif; ?>
        </div>
      </div>
      <?php endforeach; else: ?>
        <div class="col-span-full text-center text-gray-500 py-10">No plans available currently.</div>
      <?php endif; ?>
    </div>
  </div>
</div>

<script>
function setPricing(type) {
  const btnMonthly = document.getElementById('btnMonthly');
  const btnYearly = document.getElementById('btnYearly');
  const toggleBg = document.getElementById('toggleBg');
  const cards = document.querySelectorAll('.plan-card');
  
  if (type === 'monthly') {
    btnMonthly.classList.remove('text-gray-400');
    btnMonthly.classList.add('text-white');
    btnYearly.classList.add('text-gray-400');
    btnYearly.classList.remove('text-white');
    toggleBg.style.left = '6px';
    
    cards.forEach(card => {
      if(card.classList.contains('yearly-plan')) {
        card.style.display = 'none';
      } else {
        card.style.display = 'flex';
      }
    });
  } else {
    btnYearly.classList.remove('text-gray-400');
    btnYearly.classList.add('text-white');
    btnMonthly.classList.add('text-gray-400');
    btnMonthly.classList.remove('text-white');
    toggleBg.style.left = 'calc(50% + 0px)';
    
    cards.forEach(card => {
      if(card.classList.contains('monthly-plan')) {
        card.style.display = 'none';
      } else {
        card.style.display = 'flex';
      }
    });
  }
}
// Init
setPricing('monthly');
</script>
