@defer {
  <div class="w-full min-h-[60svh] p-4 md:p-6">
    <section class="mx-auto max-w-3xl overflow-hidden rounded-2xl border border-surface-200 bg-white">
      <div class="bg-gradient-to-l from-sky-50 via-cyan-50 to-teal-50 p-5 md:p-7">
        <span class="block mb-4 text-xl font-bold text-surface-900 md:text-3xl">پشتیبانی {{ brandingInfo.title }}</span>
        <p class="mt-3 max-w-2xl text-sm leading-7 text-surface-700 md:text-base">
          در صورت بروز مشکل در ثبت سفارش، صدور صورتحساب یا تنظیمات دستگاه، تیم پشتیبانی آماده پاسخگویی است. لطفا هنگام
          تماس، نام پایانه و نام کاربری را همراه داشته باشید.
        </p>
      </div>

      <div class="grid gap-3 p-4 md:grid-cols-2 md:gap-4 md:p-6">
        <article class="rounded-xl border border-surface-200 bg-surface-50 p-4">
          <span class="block mb-4 text-xl font-bold text-surface-900">شماره های تماس مستقیم</span>
          @if (brandingInfo!.support.phones?.length) {
            <ul class="space-y-2 text-sm text-surface-700">
              @for (phone of brandingInfo.support.phones!; track $index) {
                <li class="flex items-start justify-between gap-2">
                  <span>{{ phone.title }}</span>
                  <div class="flex flex-col gap-2">
                    @for (item of phone.phones; track $index) {
                      <a class="font-semibold text-primary" href="tel:{{ item }}" dir="ltr">{{ item }}</a>
                    }
                  </div>
                </li>
              }
            </ul>
          } @else {
            <p class="text-sm text-surface-700">در حال حاضر شماره تماس مستقیمی برای پشتیبانی اعلام نشده است.</p>
          }
        </article>

        <article class="rounded-xl border border-surface-200 bg-surface-50 p-4">
          <span class="block mb-4 text-xl font-bold text-surface-900">راهنمای سریع قبل از تماس</span>
          <ul class="space-y-2 text-sm leading-6 text-surface-700">
            <li>اتصال اینترنت دستگاه را بررسی کنید.</li>
            <li>یک بار برنامه را ببندید و دوباره اجرا کنید.</li>
            <li>در صفحه درباره نرم افزار، نسخه برنامه را اعلام کنید.</li>
            <li>در صورت خطا، متن خطا یا تصویر آن را برای پشتیبانی ارسال کنید.</li>
          </ul>
        </article>
      </div>

      <div class="border-t border-surface-200 bg-surface-50 px-4 py-4 md:px-6">
        <p class="text-xs leading-6 text-surface-600 md:text-sm">
          ساعات پاسخگویی: شنبه تا چهارشنبه 8:30 تا 17:30 و پنجشنبه 8:30 تا 13:00
        </p>
      </div>
    </section>
  </div>
}