{% extends 'payments/base.html' %}
{% block title %}چهارسو · مرکز خدمات مشتریان{% endblock %}
{% block content %}
<section class="chaharsu chaharsu-home" aria-labelledby="services-title">
<header class="chaharsu-heading"><h1 id="services-title">چهارسو</h1><p>خدمت موردنیازتان را انتخاب کنید.</p></header>
<div class="service-grid">
<section class="expert-service" aria-labelledby="expert-title">
  <div class="expert-service-head"><span class="service-icon">{% include 'payments/_icon.html' with name='chat' %}</span><h2 id="expert-title">ارتباط با کارشناسان</h2><p>سؤال بپرسید، درخواست ثبت کنید یا برای پیگیری و هماهنگی با کارشناسان در ارتباط باشید.</p></div>
  <div class="service-actions">
    <a class="pay-button light" href="{% url 'tickets:new' %}">{% include 'payments/_icon.html' with name='plus' %}ثبت درخواست</a>
    <a class="pay-button outline-light" href="{% url 'tickets:list' %}">{% include 'payments/_icon.html' with name='history' %}درخواست‌های من</a>
  </div>
</section>
<a class="financial-service" href="{% url 'payments:receipt_new' %}">
  <span class="service-icon">{% include 'payments/_icon.html' with name='receipt' %}</span>
  <h2>ارسال فیش واریزی</h2><p>ثبت تصویر پرداخت برای بررسی و تأیید</p>
  <span class="service-link">صفحه ارسال فیش{% include 'payments/_icon.html' with name='arrow' %}</span>
</a>
<a class="financial-service" href="{% url 'payments:notices' %}">
  <span class="service-icon">{% include 'payments/_icon.html' with name='bank' %}</span>
  <h2>شماره حساب‌ها</h2><p>حساب، شبا و شناسه واریز اعلام‌شده به شما</p>
  <span class="service-link">مشاهده حساب‌ها{% include 'payments/_icon.html' with name='arrow' %}</span>
</a>
</div></section>
{% endblock %}