<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>اشتراک - سایت من</title>
  <link href="/css/output.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 dark:bg-black transition-colors duration-300 pt-24 md:pt-0 pb-20 md:pb-0">
  <%- include('../components/header') %>

  <main class="py-16">
    <div class="container mx-auto px-4 mt-6 mb-6">
      <div class="text-center mb-16">
        <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">اشتراک ویژه</h1>
        <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
          با اشتراک ویژه، از تمام امکانات پریمیوم استفاده کنید و تجربه‌ای متفاوت داشته باشید
        </p>
      </div>

      <!-- Premium Features -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
        <div>
          <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-8">امکانات ویژه اشتراک</h2>
          <div class="space-y-6">
            <div class="flex items-start space-x-4 space-x-reverse">
              <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center flex-shrink-0">
                <i class="fas fa-shield-alt text-xl text-primary-600 dark:text-primary-400"></i>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">دسترسی نامحدود</h3>
                <p class="text-gray-600 dark:text-gray-400">به تمام محتوای پریمیوم، مقالات ویژه و ابزارهای حرفه‌ای دسترسی داشته باشید.</p>
              </div>
            </div>

            <div class="flex items-start space-x-4 space-x-reverse">
              <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center flex-shrink-0">
                <i class="fas fa-headphones text-xl text-primary-600 dark:text-primary-400"></i>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">پشتیبانی اولویت‌دار</h3>
                <p class="text-gray-600 dark:text-gray-400">پشتیبانی اختصاصی و پاسخ سریع به سوالات شما در کمتر از ۲ ساعت.</p>
              </div>
            </div>

            <div class="flex items-start space-x-4 space-x-reverse">
              <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center flex-shrink-0">
                <i class="fas fa-download text-xl text-primary-600 dark:text-primary-400"></i>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">دانلود بدون محدودیت</h3>
                <p class="text-gray-600 dark:text-gray-400">دانلود نامحدود فایل‌ها، منابع و ابزارهای کاربردی.</p>
              </div>
            </div>

            <div class="flex items-start space-x-4 space-x-reverse">
              <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center flex-shrink-0">
                <i class="fas fa-chart-line text-xl text-primary-600 dark:text-primary-400"></i>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">آمار پیشرفته</h3>
                <p class="text-gray-600 dark:text-gray-400">دسترسی به داشبورد تحلیلی پیشرفته و گزارش‌های تفصیلی.</p>
              </div>
            </div>
          </div>
        </div>

        <div class="lg:flex lg:items-center">
          <img src="https://picsum.photos/600/400?random=242" alt="اشتراک ویژه" class="w-full rounded-lg shadow-lg">
        </div>
      </div>

      <!-- Subscription Plans -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
        <!-- Monthly Plan -->
        <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center">
          <div class="mb-6">
            <i class="fas fa-calendar text-4xl text-primary-600 dark:text-primary-400 mb-4"></i>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">یک ماهه</h3>
            <div class="text-3xl font-bold text-primary-600 dark:text-primary-400 mb-2">۵۰۰,۰۰۰ تومان</div>
            <p class="text-gray-600 dark:text-gray-400">یک ماه دسترسی</p>
          </div>
          <ul class="space-y-3 mb-8 text-gray-600 dark:text-gray-400">
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>دسترسی کامل</span>
            </li>
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>پشتیبانی اولویت‌دار</span>
            </li>
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>لغو آسان</span>
            </li>
          </ul>
          <button class="btn-secondary w-full">شروع اشتراک یک ماهه</button>
        </div>

        <!-- 3 Month Plan -->
        <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center">
          <div class="mb-6">
            <i class="fas fa-calendar-alt text-4xl text-primary-600 dark:text-primary-400 mb-4"></i>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">سه ماهه</h3>
            <div class="text-3xl font-bold text-primary-600 dark:text-primary-400 mb-2">۱,۳۵۰,۰۰۰ تومان</div>
            <p class="text-gray-600 dark:text-gray-400">سه ماه (۴۵۰ هزار تومان در ماه)</p>
          </div>
          <ul class="space-y-3 mb-8 text-gray-600 dark:text-gray-400">
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>تمام امکانات ماهانه</span>
            </li>
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>تخفیف ۱۷٪</span>
            </li>
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>صرفه‌جویی ۴۰۰ هزار تومان</span>
            </li>
          </ul>
          <button class="btn-primary hover:shadow-lg dark:hover:shadow-glow w-full">شروع اشتراک سالانه</button>
        </div>

        <!-- 3 Month Plan -->
        <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center">
          <div class="mb-6">
            <i class="fas fa-calendar-alt text-4xl text-primary-600 dark:text-primary-400 mb-4"></i>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">۳ ماهه</h3>
            <div class="text-3xl font-bold text-primary-600 dark:text-primary-400 mb-2">۵۵۰,۰۰۰ تومان</div>
            <p class="text-gray-600 dark:text-gray-400">۳ ماه (۱۸۳ هزار تومان در ماه)</p>
          </div>
          <ul class="space-y-3 mb-8 text-gray-600 dark:text-gray-400">
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>تمام امکانات ماهانه</span>
            </li>
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>تخفیف ۸٪</span>
            </li>
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>صرفه‌جویی ۴۷ هزار تومان</span>
            </li>
          </ul>
          <button class="btn-secondary w-full">شروع اشتراک ۳ ماهه</button>
        </div>
      </div>

      <!-- Benefits Comparison -->
      <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-8 text-center">مقایسه امکانات</h2>
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="border-b border-gray-200 dark:border-gray-700">
                <th class="text-right py-4 text-gray-800 dark:text-gray-200 font-semibold">امکانات</th>
                <th class="text-center py-4 text-gray-800 dark:text-gray-200 font-semibold">رایگان</th>
                <th class="text-center py-4 text-gray-800 dark:text-gray-200 font-semibold">ماهانه</th>
                <th class="text-center py-4 text-gray-800 dark:text-gray-200 font-semibold">۳ ماهه</th>
                <th class="text-center py-4 text-gray-800 dark:text-gray-200 font-semibold">سالانه</th>
              </tr>
            </thead>
            <tbody class="text-sm">
              <tr class="border-b border-gray-100 dark:border-gray-800">
                <td class="py-4 text-gray-800 dark:text-gray-200">دسترسی پایه</td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
              </tr>
              <tr class="border-b border-gray-100 dark:border-gray-800">
                <td class="py-4 text-gray-800 dark:text-gray-200">محتوای پریمیوم</td>
                <td class="text-center py-4">
                  <i class="fas fa-times-circle text-red-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
              </tr>
              <tr class="border-b border-gray-100 dark:border-gray-800">
                <td class="py-4 text-gray-800 dark:text-gray-200">پشتیبانی اولویت‌دار</td>
                <td class="text-center py-4">
                  <i class="fas fa-times-circle text-red-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
              </tr>
              <tr class="border-b border-gray-100 dark:border-gray-800">
                <td class="py-4 text-gray-800 dark:text-gray-200">دانلود نامحدود</td>
                <td class="text-center py-4 text-gray-600 dark:text-gray-400">محدود</td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
              </tr>
              <tr>
                <td class="py-4 text-gray-800 dark:text-gray-200">آمار پیشرفته</td>
                <td class="text-center py-4">
                  <i class="fas fa-times-circle text-red-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
                <td class="text-center py-4">
                  <i class="fas fa-check-circle text-green-500 text-lg"></i>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Money Back Guarantee -->
      <div class="text-center mt-16">
        <div class="max-w-3xl mx-auto">
          <div class="flex justify-center mb-6">
            <div class="w-20 h-20 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
              <i class="fas fa-shield-alt text-3xl text-green-600 dark:text-green-400"></i>
            </div>
          </div>
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">تضمین بازگشت وجه</h3>
          <p class="text-gray-600 dark:text-gray-400 text-lg">
            اگر از خدمات ما راضی نبودید، تا ۳۰ روز بعد از خرید می‌توانید درخواست بازگشت وجه دهید.
            بدون هیچ سوال و پیچیدگی، پول شما بازگردانده می‌شود.
          </p>
        </div>
      </div>
    </div>
  </main>

  <%- include('../components/footer') %>

  <script src="/js/header.js"></script>
  <script src="/js/theme.js"></script>
</body>
</html>