<!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>

      <!-- Create New Ticket -->
      <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 mb-8">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center space-x-2 space-x-reverse">
          <i class="fas fa-ticket text-primary-600 dark:text-primary-400"></i>
          <span>ثبت تیکت جدید</span>
        </h2>
        <form class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">نام کاربری</label>
              <input type="text" name="username" required class="input-field" placeholder="نام کاربری خود را وارد کنید">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">اولویت</label>
              <select name="priority" required class="input-field">
                <option value="">انتخاب اولویت</option>
                <option value="low">کم</option>
                <option value="medium">متوسط</option>
                <option value="high">بالا</option>
                <option value="urgent">فوری</option>
              </select>
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">دسته‌بندی</label>
            <select name="category" required class="input-field">
              <option value="">دسته‌بندی را انتخاب کنید</option>
              <option value="bot-access">مشکل دسترسی به ربات</option>
              <option value="signals">مشکل سیگنال‌ها</option>
              <option value="subscription">مسائل اشتراک</option>
              <option value="payment">مشکل پرداخت</option>
              <option value="technical">مشکل فنی</option>
              <option value="suggestion">پیشنهاد و انتقاد</option>
              <option value="other">سایر موارد</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">عنوان تیکت</label>
            <input type="text" name="title" required class="input-field" placeholder="عنوان کوتاهی برای مشکل خود بنویسید">
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">توضیح کامل</label>
            <textarea name="description" rows="5" required class="input-field" placeholder="لطفاً مشکل یا سوال خود را به تفصیل بنویسید..."></textarea>
          </div>

          <button type="submit" class="btn-primary hover:shadow-lg dark:hover:shadow-glow w-full">
            <i class="fas fa-ticket ml-2"></i>
            ثبت تیکت
          </button>
        </form>
      </div>

      <!-- My Tickets -->
      <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 mb-8">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center space-x-2 space-x-reverse">
          <i class="fas fa-clipboard-list text-blue-600 dark:text-blue-400"></i>
          <span>تیکت‌های من</span>
        </h2>

        <div class="space-y-4">
          <!-- Ticket 1 -->
          <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
              <div class="flex items-center space-x-3 space-x-reverse">
                <span class="bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 px-2 py-1 rounded text-xs font-medium">
                  پاسخ داده شده
                </span>
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">مشکل دریافت سیگنال فارکس</h3>
              </div>
              <div class="text-sm text-gray-500 dark:text-gray-400">#۱۰۰۱ - ۲ روز پیش</div>
            </div>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">
              سلام، از دیروز سیگنال‌های فارکس را دریافت نمی‌کنم. لطفاً بررسی کنید.
            </p>
            <div class="flex items-center justify-between">
              <span class="text-xs text-blue-600 dark:text-blue-400">اولویت: بالا</span>
              <button class="text-primary-600 dark:text-primary-400 hover:underline text-sm">مشاهده پاسخ</button>
            </div>

            <!-- Admin Response -->
            <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded">
              <div class="flex items-center space-x-2 space-x-reverse mb-2">
                <i class="fas fa-user text-blue-600 dark:text-blue-400"></i>
                <span class="font-semibold text-blue-800 dark:text-blue-300">پشتیبانی مایا اسلامی</span>
                <span class="text-xs text-blue-600 dark:text-blue-400">۱ روز پیش</span>
              </div>
              <p class="text-blue-700 dark:text-blue-300 text-sm">
                با سلام، مشکل شما بررسی و حل شد. لطفاً دوباره به ربات مراجعه کنید. اگر هنوز مشکل دارید، تیکت جدید بزنید.
              </p>
            </div>
          </div>

          <!-- Ticket 2 -->
          <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
              <div class="flex items-center space-x-3 space-x-reverse">
                <span class="bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400 px-2 py-1 rounded text-xs font-medium">
                  در انتظار پاسخ
                </span>
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">درخواست ارتقا پلن</h3>
              </div>
              <div class="text-sm text-gray-500 dark:text-gray-400">#۱۰۰۲ - ۱ روز پیش</div>
            </div>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">
              سلام، می‌خواهم از پلن حرفه‌ای به پلن طلایی ارتقا پیدا کنم.
            </p>
            <div class="flex items-center justify-between">
              <span class="text-xs text-green-600 dark:text-green-400">اولویت: متوسط</span>
              <span class="text-gray-500 text-sm">در انتظار...</span>
            </div>
          </div>

          <!-- Ticket 3 -->
          <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
              <div class="flex items-center space-x-3 space-x-reverse">
                <span class="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 px-2 py-1 rounded text-xs font-medium">
                  بسته شده
                </span>
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">پیشنهاد بهبود ربات</h3>
              </div>
              <div class="text-sm text-gray-500 dark:text-gray-400">#۱۰۰۰ - ۱ هفته پیش</div>
            </div>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">
              پیشنهاد می‌کنم قابلیت تنظیم زمان ارسال سیگنال اضافه شود.
            </p>
            <div class="flex items-center justify-between">
              <span class="text-xs text-gray-500">اولویت: کم</span>
              <span class="text-gray-500 text-sm">بررسی شد</span>
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

        <!-- Support Information -->
        <div class="space-y-8">
          <!-- Contact Details -->
          <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-6">اطلاعات تماس</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-phone text-xl text-primary-600 dark:text-primary-400"></i>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">تلفن</h3>
                  <p class="text-gray-600 dark:text-gray-400">۰۲۱-۱۲۳۴۵۶۷۸</p>
                  <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-envelope text-xl text-primary-600 dark:text-primary-400"></i>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">ایمیل</h3>
                  <p class="text-gray-600 dark:text-gray-400">info@example.com</p>
                  <p class="text-gray-600 dark:text-gray-400">support@example.com</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-map-marker-alt text-xl text-primary-600 dark:text-primary-400"></i>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">آدرس</h3>
                  <p class="text-gray-600 dark:text-gray-400">
                    تهران، خیابان ولیعصر، نرسیده به چهارراه ولیعصر<br>
                    برج ایرانیان، طبقه ۱۵، واحد ۱۵۰۲
                  </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-clock text-xl text-primary-600 dark:text-primary-400"></i>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">ساعات کاری</h3>
                  <p class="text-gray-600 dark:text-gray-400">شنبه تا چهارشنبه: ۸:۰۰ - ۱۷:۰۰</p>
                  <p class="text-gray-600 dark:text-gray-400">پنج‌شنبه: ۸:۰۰ - ۱۳:۰۰</p>
                  <p class="text-gray-600 dark:text-gray-400">جمعه: تعطیل</p>
                </div>
              </div>
            </div>
          </div>

          <!-- Social Media -->
          <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">شبکه‌های اجتماعی</h3>
            <div class="grid grid-cols-2 gap-4">
              <a href="#" class="flex items-center space-x-3 space-x-reverse p-3 bg-gray-50 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                <i class="fas fa-comments text-xl text-blue-500"></i>
                <span class="text-gray-700 dark:text-gray-300">تلگرام</span>
              </a>
              <a href="#" class="flex items-center space-x-3 space-x-reverse p-3 bg-gray-50 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                <i class="fab fa-whatsapp text-xl text-green-500"></i></iconify-icon>
                <span class="text-gray-700 dark:text-gray-300">واتساپ</span>
              </a>
              <a href="#" class="flex items-center space-x-3 space-x-reverse p-3 bg-gray-50 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                <i class="fab fa-instagram text-xl text-purple-500"></i></iconify-icon>
                <span class="text-gray-700 dark:text-gray-300">اینستاگرام</span>
              </a>
              <a href="#" class="flex items-center space-x-3 space-x-reverse p-3 bg-gray-50 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                <i class="fab fa-linkedin text-xl text-blue-700"></i></iconify-icon>
                <span class="text-gray-700 dark:text-gray-300">لینکدین</span>
              </a>
            </div>
          </div>

          <!-- FAQ Section -->
          <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">سوالات متداول</h3>
            <div class="space-y-4">
              <details class="group">
                <summary class="flex justify-between items-center cursor-pointer text-gray-800 dark:text-gray-200 font-medium p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                  چقدر طول می‌کشد تا پاسخ دریافت کنم؟
                  <i class="fas fa-chevron-down group-open:rotate-180 transition-transform"></i>
                </summary>
                <p class="text-gray-600 dark:text-gray-400 mt-3 px-3">
                  معمولاً در کمتر از ۲۴ ساعت پاسخ شما را دریافت خواهید کرد. برای مسائل فوری، با شماره تلفن تماس بگیرید.
                </p>
              </details>

              <details class="group">
                <summary class="flex justify-between items-center cursor-pointer text-gray-800 dark:text-gray-200 font-medium p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                  آیا پشتیبانی تلفنی دارید؟
                  <i class="fas fa-chevron-down group-open:rotate-180 transition-transform"></i>
                </summary>
                <p class="text-gray-600 dark:text-gray-400 mt-3 px-3">
                  بله، پشتیبانی تلفنی در ساعات کاری فعال است. همچنین می‌توانید از پشتیبانی آنلاین استفاده کنید.
                </p>
              </details>
            </div>
          </div>
        </div>
      </div>

      <!-- Map Section -->
      <div class="mt-16">
        <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-6 text-center">موقعیت ما</h2>
          <div class="bg-gray-200 dark:bg-gray-800 rounded-lg h-64 flex items-center justify-center">
            <div class="text-center text-gray-600 dark:text-gray-400">
              <i class="fas fa-map-marker-alt text-4xl mb-2"></i>
              <p>نقشه اینجا نمایش داده می‌شود</p>
              <p class="text-sm">تهران، خیابان ولیعصر، برج ایرانیان</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

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

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