{% extends "base.html" %}

{% block content %}
<div class="max-w-2xl mx-auto space-y-4">

  <!-- کارت تلگرام (طراحی جدید + گرم + حرفه‌ای) -->
<!-- Telegram Support Card (clean + premium) -->
<div class="bg-white/70 backdrop-blur-md rounded-2xl shadow-xl border border-white/30 overflow-hidden">
  <!-- top accent -->
  <div class="h-1 bg-gradient-to-r from-indigo-500 via-sky-400 to-amber-400"></div>

  <div class="p-5 flex items-center justify-between gap-4 flex-wrap">
    <div class="flex items-center gap-4">
      <!-- icon -->
      <div class="w-12 h-12 rounded-2xl bg-indigo-600 text-white flex items-center justify-center shadow-lg">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm5.93 8.08l-2.1 9.88c-.16.7-.58.87-1.18.54l-3.26-2.4-1.57 1.5c-.17.17-.31.31-.64.31l.23-3.32 6.05-5.46c.26-.23-.06-.36-.4-.13L8.6 12.6l-2.95-.92c-.64-.2-.65-.64.14-.95l11.55-4.45c.53-.19.99.13.86.8z"/>
        </svg>
      </div>

      <div>
        <p class="text-xs text-gray-500 mb-1">پشتیبانی سریع</p>
        <div class="flex items-center gap-2">
          <span class="text-lg font-extrabold text-gray-900">تلگرام</span>
          <span class="inline-flex items-center rounded-full bg-emerald-500/10 text-emerald-700 px-2 py-0.5 text-xs font-semibold">
            آنلاین
          </span>
        </div>

        <a href="https://t.me/YourUsername"
           class="text-indigo-700 font-semibold hover:text-indigo-900 transition">
          @YourUsername
        </a>
      </div>
    </div>

    <div class="flex items-center gap-2">
      <a href="https://t.me/YourUsername"
         class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-indigo-600 text-white font-semibold
                hover:bg-indigo-700 transition shadow-md">
        گفت‌وگو در تلگرام
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M13 7l5 5-5 5M6 12h12"/>
        </svg>
      </a>

      <button type="button"
              onclick="navigator.clipboard.writeText('https://t.me/YourUsername')"
              class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white/70 border border-gray-200
                     text-gray-800 font-semibold hover:bg-white transition">
        کپی لینک
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <rect x="9" y="9" width="13" height="13" rx="2"></rect>
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
        </svg>
      </button>
    </div>
  </div>

  <div class="px-5 pb-5 -mt-2">
    <p class="text-sm text-gray-600 leading-7">
      برای پاسخ سریع‌تر، پیام‌تان را در تلگرام ارسال کنید. اگر ترجیح می‌دهید، از فرم پایین هم می‌توانید استفاده کنید.
    </p>
  </div>
</div>



  <!-- فرم تماس (کوچیک و مرتب) -->
  <div class="bg-white/70 backdrop-blur-md rounded-lg shadow-xl p-4 md:p-6">

    <h1 class="text-xl font-bold text-gray-800 text-center mb-4">
      تماس با ما
    </h1>

    <form method="POST">
      {% csrf_token %}

      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">

        <div>
          <label for="first_name" class="block text-xs font-medium text-gray-700 mb-1">نام</label>
          <input type="text" id="first_name" name="first_name" required
                 class="w-full p-2 text-sm border rounded-md bg-white/50 focus:ring-indigo-500 focus:border-indigo-500">
        </div>

        <div>
          <label for="last_name" class="block text-xs font-medium text-gray-700 mb-1">نام خانوادگی</label>
          <input type="text" id="last_name" name="last_name" required
                 class="w-full p-2 text-sm border rounded-md bg-white/50 focus:ring-indigo-500 focus:border-indigo-500">
        </div>

        <div class="md:col-span-2">
          <label for="email" class="block text-xs font-medium text-gray-700 mb-1">ایمیل</label>
          <input type="email" id="email" name="email" required
                 class="w-full p-2 text-sm border rounded-md bg-white/50 focus:ring-indigo-500 focus:border-indigo-500">
        </div>

        <div>
          <label for="phone" class="block text-xs font-medium text-gray-700 mb-1">
            تلفن (اختیاری)
          </label>
          <input type="text" id="phone" name="phone"
                 class="w-full p-2 text-sm border rounded-md bg-white/50 focus:ring-indigo-500 focus:border-indigo-500">
        </div>

        <div>
          <label for="telegram" class="block text-xs font-medium text-gray-700 mb-1">
            آیدی تلگرام (اختیاری)
          </label>
          <input type="text" id="telegram" name="telegram" placeholder="@username"
                 class="w-full p-2 text-sm border rounded-md bg-white/50 focus:ring-indigo-500 focus:border-indigo-500">
        </div>

        <div class="md:col-span-2">
          <label for="message" class="block text-xs font-medium text-gray-700 mb-1">
            پیام شما
          </label>
          <textarea id="message" name="message" rows="3" required
                    class="w-full p-2 text-sm border rounded-md bg-white/50 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
        </div>

      </div>

      <div class="text-center mt-4">
        <button type="submit"
                class="bg-indigo-600 text-white font-semibold py-2 px-6 rounded-lg
                       hover:bg-indigo-700 transition text-sm">
          ارسال پیام
        </button>
      </div>

    </form>
  </div>
</div>
{% endblock %}