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

  <!-- Heading -->
  <section class="text-center py-16 px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Pricing Plans</h1>
    <p class="text-lg text-gray-600 max-w-xl mx-auto">
      Choose a plan that fits your legal needs — no hidden fees, cancel anytime.
    </p>
  </section>

  <!-- Pricing Cards -->
  <section class="py-12 bg-sky-500/10">
    <div class="max-w-6xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8">
      
      <!-- Basic Plan -->
      <div class="bg-white border rounded-lg shadow p-6 text-center">
        <h3 class="text-xl font-semibold mb-2">Basic</h3>
        <p class="text-gray-600 mb-4">Perfect for individuals needing occasional legal help.</p>
        <div class="text-3xl font-bold text-blue-700 mb-4">$9<span class="text-lg font-normal text-gray-600">/mo</span></div>
        <ul class="text-sm text-gray-700 mb-6 space-y-2 text-left">
          <li>✔ 2 consultations / month</li>
          <li>✔ Document vault access</li>
          <li>✔ Monthly newsletter</li>
        </ul>
        <a href="#" class="block bg-blue-600 text-white font-semibold py-2 rounded hover:bg-blue-700">Select</a>
      </div>

      <!-- Pro Plan -->
      <div class="bg-white border-2 border-blue-600 rounded-lg shadow-lg p-6 text-center">
        <h3 class="text-xl font-semibold mb-2">Pro</h3>
        <p class="text-gray-600 mb-4">Best for families or freelancers needing regular support.</p>
        <div class="text-3xl font-bold text-blue-700 mb-4">$29<span class="text-lg font-normal text-gray-600">/mo</span></div>
        <ul class="text-sm text-gray-700 mb-6 space-y-2 text-left">
          <li>✔ Unlimited consultations</li>
          <li>✔ Document reviews</li>
          <li>✔ Access to webinars and vault</li>
        </ul>
        <a href="#" class="block bg-blue-600 text-white font-semibold py-2 rounded hover:bg-blue-700">Select</a>
      </div>

      <!-- Business Plan -->
      <div class="bg-white border rounded-lg shadow p-6 text-center">
        <h3 class="text-xl font-semibold mb-2">Business</h3>
        <p class="text-gray-600 mb-4">Tailored for small businesses and legal teams.</p>
        <div class="text-3xl font-bold text-blue-700 mb-4">$79<span class="text-lg font-normal text-gray-600">/mo</span></div>
        <ul class="text-sm text-gray-700 mb-6 space-y-2 text-left">
          <li>✔ All Pro features</li>
          <li>✔ Dedicated legal advisor</li>
          <li>✔ Team access & admin controls</li>
        </ul>
        <a href="#" class="block bg-blue-600 text-white font-semibold py-2 rounded hover:bg-blue-700">Select</a>
      </div>

    </div>
  </section>

  @endsection