<!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-12">
        <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">بهترین پلن را برای نیازهای خود انتخاب کنید</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- Basic 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-user 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>

        <!-- Premium Plan -->
        <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center border-2 border-primary-500 relative">
          <div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
            <span class="bg-primary-500 text-white px-4 py-1 rounded-full text-sm font-medium">محبوب</span>
          </div>
          <div class="mb-6">
            <i class="fas fa-crown 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>
            <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>

        <!-- Enterprise 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-building 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>
            <li class="flex items-center justify-center space-x-2 space-x-reverse">
              <i class="fas fa-check-circle text-green-500"></i>
              <span>API دسترسی</span>
            </li>
          </ul>
          <button class="btn-secondary w-full">تماس با فروش</button>
        </div>
      </div>

      <!-- FAQ Section -->
      <div class="mt-16">
        <h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-gray-200">سوالات متداول</h2>
        <div class="max-w-3xl mx-auto space-y-4">
          <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300">
            <button class="w-full text-right flex justify-between items-center font-semibold text-gray-800 dark:text-gray-200" onclick="toggleFaq(0)">
              آیا می‌توانم پلن خود را تغییر دهم؟
              <i class="fas fa-chevron-down faq-icon transition-transform"></i>
            </button>
            <div class="faq-content hidden mt-4 text-gray-600 dark:text-gray-400">
              بله، می‌توانید در هر زمان پلن خود را ارتقا یا کاهش دهید.
            </div>
          </div>
          <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300">
            <button class="w-full text-right flex justify-between items-center font-semibold text-gray-800 dark:text-gray-200" onclick="toggleFaq(1)">
              آیا تضمین بازگشت وجه دارید؟
              <i class="fas fa-chevron-down faq-icon transition-transform"></i>
            </button>
            <div class="faq-content hidden mt-4 text-gray-600 dark:text-gray-400">
              بله، ما ۳۰ روز تضمین بازگشت وجه ارائه می‌دهیم.
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

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

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