<!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>
    <!-- Banner Slider -->
    <section class="relative h-96 overflow-hidden">
      <div id="slider" class="flex transition-transform duration-500 ease-in-out h-full">
        <div class="w-full flex-shrink-0 relative">
          <img src="https://picsum.photos/1200/400?random=1" alt="اسلاید اول" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
            <div class="text-center text-white">
              <h2 class="text-4xl font-bold mb-4">خوش آمدید به سایت ما</h2>
              <p class="text-xl">بهترین خدمات را از ما دریافت کنید</p>
            </div>
          </div>
        </div>
        <div class="w-full flex-shrink-0 relative">
          <img src="https://picsum.photos/1200/400?random=2" alt="اسلاید دوم" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
            <div class="text-center text-white">
              <h2 class="text-4xl font-bold mb-4">خدمات با کیفیت</h2>
              <p class="text-xl">تجربه‌ای متفاوت از خدمات آنلاین</p>
            </div>
          </div>
        </div>
        <div class="w-full flex-shrink-0 relative">
          <img src="https://picsum.photos/1200/400?random=3" alt="اسلاید سوم" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
            <div class="text-center text-white">
              <h2 class="text-4xl font-bold mb-4">پشتیبانی ۲۴ساعته</h2>
              <p class="text-xl">همیشه در کنار شما هستیم</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Slider Controls -->
      <button id="prevBtn" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 text-gray-800 p-2 rounded-full transition-all">
        <i class="fas fa-chevron-right text-xl"></i>
      </button>
      <button id="nextBtn" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 text-gray-800 p-2 rounded-full transition-all">
        <i class="fas fa-chevron-left text-xl"></i>
      </button>

      <!-- Slider Indicators -->
      <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 space-x-reverse">
        <button class="slider-indicator active w-3 h-3 rounded-full bg-white bg-opacity-80" data-slide="0"></button>
        <button class="slider-indicator w-3 h-3 rounded-full bg-white bg-opacity-50" data-slide="1"></button>
        <button class="slider-indicator w-3 h-3 rounded-full bg-white bg-opacity-50" data-slide="2"></button>
      </div>
    </section>

    <!-- Quick Navigation -->
    <section class="py-16">
      <div class="container mx-auto px-4 mt-6 mb-6">
        <h2 class="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-gray-200">دسترسی سریع</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
          <a href="/prices" class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center hover:shadow-xl transition-shadow group">
            <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 dark:group-hover:bg-primary-800 transition-colors">
              <i class="fas fa-dollar-sign text-2xl text-primary-600 dark:text-primary-400"></i>
            </div>
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">قیمت‌ها</h3>
          </a>

          <a href="/articles" class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center hover:shadow-xl transition-shadow group">
            <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 dark:group-hover:bg-primary-800 transition-colors">
              <i class="fas fa-file-text text-2xl text-primary-600 dark:text-primary-400"></i>
            </div>
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">مقالات</h3>
          </a>

          <a href="/news" class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center hover:shadow-xl transition-shadow group">
            <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 dark:group-hover:bg-primary-800 transition-colors">
              <i class="fas fa-newspaper text-2xl text-primary-600 dark:text-primary-400"></i>
            </div>
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">اخبار</h3>
          </a>

          <a href="/subscription" class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center hover:shadow-xl transition-shadow group">
            <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 dark:group-hover:bg-primary-800 transition-colors">
              <i class="fas fa-crown text-2xl text-primary-600 dark:text-primary-400"></i>
            </div>
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">اشتراک</h3>
          </a>

          <a href="/contact" class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center hover:shadow-xl transition-shadow group">
            <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 dark:group-hover:bg-primary-800 transition-colors">
              <i class="fas fa-phone text-2xl text-primary-600 dark:text-primary-400"></i>
            </div>
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">تماس با ما</h3>
          </a>

          <a href="/index" class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 text-center hover:shadow-xl transition-shadow group">
            <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 dark:group-hover:bg-primary-800 transition-colors">
              <i class="fas fa-home text-2xl text-primary-600 dark:text-primary-400"></i>
            </div>
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">خانه</h3>
          </a>
        </div>
      </div>
    </section>

    <!-- Latest Content -->
    <section class="py-16 bg-white dark:bg-black">
      <div class="container mx-auto px-4 mt-6 mb-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
          <!-- Latest Articles -->
          <div>
            <h3 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">جدیدترین مقالات</h3>
            <div class="space-y-4">
              <div class="flex items-center space-x-4 space-x-reverse p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <img src="https://picsum.photos/80/80?random=218" alt="مقاله" class="w-16 h-16 rounded-lg object-cover">
                <div class="flex-1">
                  <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-1">عنوان مقاله اول</h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">خلاصه‌ای از محتوای مقاله...</p>
                </div>
              </div>
              <div class="flex items-center space-x-4 space-x-reverse p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <img src="https://picsum.photos/80/80?random=225" alt="مقاله" class="w-16 h-16 rounded-lg object-cover">
                <div class="flex-1">
                  <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-1">عنوان مقاله دوم</h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">خلاصه‌ای از محتوای مقاله...</p>
                </div>
              </div>
            </div>
            <a href="/articles" class="inline-block mt-4 text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه مقالات</a>
          </div>

          <!-- Latest News -->
          <div>
            <h3 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">آخرین اخبار</h3>
            <div class="space-y-4">
              <div class="flex items-center space-x-4 space-x-reverse p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <img src="https://picsum.photos/80/80?random=342" alt="خبر" class="w-16 h-16 rounded-lg object-cover">
                <div class="flex-1">
                  <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-1">عنوان خبر اول</h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">خلاصه‌ای از محتوای خبر...</p>
                </div>
              </div>
              <div class="flex items-center space-x-4 space-x-reverse p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <img src="https://picsum.photos/80/80?random=891" alt="خبر" class="w-16 h-16 rounded-lg object-cover">
                <div class="flex-1">
                  <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-1">عنوان خبر دوم</h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">خلاصه‌ای از محتوای خبر...</p>
                </div>
              </div>
            </div>
            <a href="/news" class="inline-block mt-4 text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه اخبار</a>
          </div>
        </div>
      </div>
    </section>
  </main>

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

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