<!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">
      <!-- User Profile Header -->
      <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 mb-8">
        <div class="flex items-center space-x-6 space-x-reverse">
          <div class="w-24 h-24 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center">
            <i class="fas fa-user text-3xl text-white"></i>
          </div>
          <div class="flex-1">
            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">احمد رضایی</h1>
            <p class="text-gray-600 dark:text-gray-400 mb-1">ahmad.rezaei@email.com</p>
            <p class="text-sm text-gray-500 dark:text-gray-500">عضو از: ۱۵ مهر ۱۴۰۳</p>
            <div class="flex items-center space-x-2 space-x-reverse mt-3">
              <span class="bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 px-3 py-1 rounded-full text-sm font-medium">
                اشتراک فعال
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Subscription Status -->
        <div class="lg:col-span-2 space-y-8">
          <!-- Current Subscription -->
          <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-6">
              <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-crown text-yellow-500"></i>
                <span>وضعیت اشتراک</span>
              </h2>
              <button class="btn-primary hover:shadow-lg dark:hover:shadow-glow text-sm">تمدید اشتراک</button>
            </div>

            <div class="bg-gradient-to-r from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/20 p-6 rounded-lg border border-yellow-200 dark:border-yellow-800">
              <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="text-center">
                  <div class="text-3xl font-bold text-yellow-600 dark:text-yellow-400 mb-1">۱۲</div>
                  <p class="text-sm text-yellow-700 dark:text-yellow-300">روز باقی‌مانده</p>
                </div>
                <div class="text-center">
                  <div class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">پلن حرفه‌ای</div>
                  <p class="text-sm text-gray-600 dark:text-gray-400">ماهانه</p>
                </div>
                <div class="text-center">
                  <div class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">۲۸ آبان ۱۴۰۳</div>
                  <p class="text-sm text-gray-600 dark:text-gray-400">تاریخ انقضا</p>
                </div>
              </div>

              <!-- Progress Bar -->
              <div class="mt-6">
                <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
                  <span>پیشرفت دوره اشتراک</span>
                  <span>۶۰٪ استفاده شده</span>
                </div>
                <div class="w-full bg-gray-200 dark:bg-gray-800 rounded-full h-2">
                  <div class="bg-yellow-500 h-2 rounded-full" style="width: 60%"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- Bot Access -->
          <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300">
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center space-x-2 space-x-reverse">
              <i class="fas fa-robot text-blue-500"></i>
              <span>دسترسی ربات تلگرام</span>
            </h3>

            <div class="space-y-4">
              <div class="flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                <div class="flex items-center space-x-3 space-x-reverse">
                  <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
                    <i class="fas fa-check-circle text-white"></i>
                  </div>
                  <div>
                    <h4 class="font-semibold text-green-800 dark:text-green-300">ربات سیگنال‌های فارکس</h4>
                    <p class="text-sm text-green-600 dark:text-green-400">فعال - آخرین سیگنال: ۲ ساعت پیش</p>
                  </div>
                </div>
                <a href="https://t.me/yourbot" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">
                  @ForexSignalsBot
                </a>
              </div>

              <div class="flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                <div class="flex items-center space-x-3 space-x-reverse">
                  <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
                    <i class="fas fa-check-circle text-white"></i>
                  </div>
                  <div>
                    <h4 class="font-semibold text-green-800 dark:text-green-300">ربات سیگنال‌های کریپتو</h4>
                    <p class="text-sm text-green-600 dark:text-green-400">فعال - آخرین سیگنال: ۱ ساعت پیش</p>
                  </div>
                </div>
                <a href="https://t.me/yourbot" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">
                  @CryptoSignalsBot
                </a>
              </div>

              <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600">
                <div class="flex items-center space-x-3 space-x-reverse">
                  <div class="w-10 h-10 bg-gray-400 rounded-full flex items-center justify-center">
                    <i class="fas fa-circle text-white"></i></iconify-icon>
                  </div>
                  <div>
                    <h4 class="font-semibold text-gray-600 dark:text-gray-400">ربات سیگنال‌های طلا</h4>
                    <p class="text-sm text-gray-500 dark:text-gray-500">نیاز به ارتقا پلن</p>
                  </div>
                </div>
                <button class="text-primary-600 dark:text-primary-400 hover:underline text-sm">
                  ارتقا پلن
                </button>
              </div>
            </div>
          </div>

          <!-- Trading Statistics -->
          <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300">
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center space-x-2 space-x-reverse">
              <i class="fas fa-chart-line text-green-500"></i>
              <span>آمار معاملات</span>
            </h3>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
              <div class="text-center">
                <div class="text-2xl font-bold text-green-600 dark:text-green-400 mb-1">۸۷٪</div>
                <p class="text-sm text-gray-600 dark:text-gray-400">نرخ موفقیت</p>
              </div>
              <div class="text-center">
                <div class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-1">۲۴۳</div>
                <p class="text-sm text-gray-600 dark:text-gray-400">سیگنال دریافتی</p>
              </div>
              <div class="text-center">
                <div class="text-2xl font-bold text-purple-600 dark:text-purple-400 mb-1">+۱۵.۷٪</div>
                <p class="text-sm text-gray-600 dark:text-gray-400">سود ماهانه</p>
              </div>
              <div class="text-center">
                <div class="text-2xl font-bold text-orange-600 dark:text-orange-400 mb-1">۱۸</div>
                <p class="text-sm text-gray-600 dark:text-gray-400">روز فعالیت</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
          <!-- Quick Actions -->
          <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300">
            <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">اقدامات سریع</h3>
            <div class="space-y-3">
              <button class="w-full btn-primary hover:shadow-lg dark:hover:shadow-glow text-sm py-2">
                <i class="fas fa-sync ml-2"></i>
                تمدید اشتراک
              </button>
              <button class="w-full btn-secondary text-sm py-2">
                <i class="fas fa-cog ml-2"></i>
                تنظیمات حساب
              </button>
              <button class="w-full btn-secondary text-sm py-2">
                <i class="fas fa-download ml-2"></i>
                دانلود گزارشات
              </button>
            </div>
          </div>

          <!-- Subscription History -->
          <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300">
            <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">تاریخچه اشتراک</h3>
            <div class="space-y-3">
              <div class="flex justify-between items-center pb-3 border-b border-gray-200 dark:border-gray-700">
                <div>
                  <p class="font-medium text-gray-800 dark:text-gray-200">پلن حرفه‌ای</p>
                  <p class="text-sm text-gray-500">۱۵ مهر - ۱۵ آبان</p>
                </div>
                <span class="text-green-600 dark:text-green-400 text-sm">فعال</span>
              </div>
              <div class="flex justify-between items-center pb-3 border-b border-gray-200 dark:border-gray-700">
                <div>
                  <p class="font-medium text-gray-800 dark:text-gray-200">پلن پایه</p>
                  <p class="text-sm text-gray-500">۱ مهر - ۱۵ مهر</p>
                </div>
                <span class="text-gray-500 text-sm">منقضی</span>
              </div>
            </div>
          </div>

          <!-- Support -->
          <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300">
            <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">پشتیبانی</h3>
            <div class="space-y-3">
              <a href="/contact" class="block text-center btn-secondary text-sm py-2">
                <i class="fas fa-comments ml-2"></i>
                تماس با پشتیبانی
              </a>
              <a href="/articles" class="block text-center btn-secondary text-sm py-2">
                <i class="fas fa-question-circle ml-2"></i>
                راهنما و آموزش
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

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

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