@extends('layouts.site')
 
@section('content')

  <!-- Page Title -->
  <section class="text-center py-16 px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Compare Our Legal Plans</h1>
    <p class="text-lg text-gray-600 mb-6 max-w-xl mx-auto">
      Choose the subscription that fits your legal needs
    </p>

    <!-- Toggle Buttons -->
    <div class="inline-flex rounded-md border border-blue-600 overflow-hidden mb-8">
      <button id="monthlyBtn" class="px-6 py-2 text-sm font-medium bg-blue-600 text-white transition">Monthly</button>
      <button id="annualBtn" class="px-6 py-2 text-sm font-medium bg-white text-blue-600 transition">Annual</button>
    </div>
  </section>

  <!-- Pricing Comparison Table -->
  <section class="overflow-x-auto px-4">
    <table class="min-w-full table-fixed border border-gray-200 text-center bg-white shadow rounded-lg overflow-hidden">
        <thead>
          <!-- Badge Row -->
          <tr>
            <th></th>
            <th></th>
            <th class="relative">
              <div class="text-xs bg-blue-600 text-white px-3 py-1 rounded-md font-semibold w-fit mx-auto mt-2 shadow">
                MOST POPULAR
              </div>
            </th>
            <th></th>
          </tr>
      
          <!-- Pricing Row -->
          <tr class="bg-white">
            <th></th>
            <th class="px-4 py-3 text-xl font-bold text-gray-800">
              Basic<br>
              <span id="basicPrice" class="text-blue-700 text-base font-semibold">$19/mo</span>
            </th>
            <th class="px-4 py-3 text-xl font-bold text-gray-800 relative">
              Plus<br>
              <span id="plusPrice" class="text-blue-700 text-base font-semibold">$49/mo</span>
            </th>
            <th class="px-4 py-3 text-xl font-bold text-gray-800">
              Premium<br>
              <span id="premiumPrice" class="text-blue-700 text-base font-semibold">$89/mo</span>
            </th>
          </tr>
      
          <!-- Feature Headings -->
          <tr class="bg-sky-500/10">
            <th class="px-4 py-3 text-left text-gray-800 font-semibold w-1/4">Features</th>
            <th class="px-4 py-3 text-gray-800 font-semibold">Basic</th>
            <th class="px-4 py-3 text-gray-800 font-semibold">Plus</th>
            <th class="px-4 py-3 text-gray-800 font-semibold">Premium</th>
          </tr>
        </thead>

      <!-- Features List -->
      <tbody class="text-sm text-gray-700">
        <tr class="border-t">
          <td class="text-left px-4 py-3 font-medium">Secure Document Vault</td>
          <td>✔</td><td>✔</td><td>✔</td>
        </tr>
        <tr class="border-t">
          <td class="text-left px-4 py-3 font-medium">Monthly Newsletter</td>
          <td>✔</td><td>1/month</td><td>✔</td>
        </tr>
        <tr class="border-t">
          <td class="text-left px-4 py-3 font-medium">Document Review</td>
          <td>✔</td><td>—</td><td>✔</td>
        </tr>
        <tr class="border-t">
          <td class="text-left px-4 py-3 font-medium">Legal Consultations</td>
          <td>✔</td><td>Unlimited</td><td>✔</td>
        </tr>
        <tr class="border-t">
          <td class="text-left px-4 py-3 font-medium">Live Webinar Access</td>
          <td>✔</td><td>Priority</td><td>✔</td>
        </tr>
        <tr class="border-t">
          <td class="text-left px-4 py-3 font-medium">Personalized Legal Planning</td>
          <td>✔</td><td>Recorded</td><td>✔</td>
        </tr>
        <tr class="border-t">
          <td class="text-left px-4 py-3 font-medium">Attorney Response Time</td>
          <td>—</td><td>24 hrs</td><td>+ Priority</td>
        </tr>
        <tr class="border-t">
          <td class="text-left px-4 py-3 font-medium">Annual Legal Health Check</td>
          <td>—</td><td>24 hrs</td><td>—</td>
        </tr>
      </tbody>
    </table>

    <!-- CTA -->
    <div class="text-center mt-10 mb-16">
      <a href="#" class="bg-blue-600 text-white px-6 py-3 rounded-md font-semibold hover:bg-blue-700 transition">Get Started</a>
    </div>
  </section>

  <!-- JS Toggle for Pricing -->
  <script>
    const monthlyBtn = document.getElementById('monthlyBtn');
    const annualBtn = document.getElementById('annualBtn');

    const basicPrice = document.getElementById('basicPrice');
    const plusPrice = document.getElementById('plusPrice');
    const premiumPrice = document.getElementById('premiumPrice');

    monthlyBtn.addEventListener('click', () => {
      basicPrice.textContent = "$19/mo";
      plusPrice.textContent = "$49/mo";
      premiumPrice.textContent = "$89/mo";

      monthlyBtn.classList.add("bg-blue-600", "text-white");
      monthlyBtn.classList.remove("bg-white", "text-blue-600");

      annualBtn.classList.add("bg-white", "text-blue-600");
      annualBtn.classList.remove("bg-blue-600", "text-white");
    });

    annualBtn.addEventListener('click', () => {
      basicPrice.textContent = "$190/yr";
      plusPrice.textContent = "$490/yr";
      premiumPrice.textContent = "$890/yr";

      annualBtn.classList.add("bg-blue-600", "text-white");
      annualBtn.classList.remove("bg-white", "text-blue-600");

      monthlyBtn.classList.add("bg-white", "text-blue-600");
      monthlyBtn.classList.remove("bg-blue-600", "text-white");
    });
  </script>

@endsection