hanye-website/pages/support/index.vue

<template>
  <div>
    <div class="w-full h-[55px] sm:h-[72px]"></div>
    <ErrorBoundary :error="error">
      <div v-if="isLoading" class="flex justify-center py-16">
        <div
          class="animate-spin h-8 w-8 border-2 border-cyan-400 border-t-transparent rounded-full"
        ></div>
      </div>

      <div v-else>
        <!-- 面包屑导航 -->
        <div class="max-w-full xl:px-8 lg:px-6 md:px-4 px-4 mt-6 mb-8">
          <div class="max-w-screen-2xl mx-auto">
            <nuxt-link
              :to="`${homepagePath}/`"
              class="text-white/60 text-base font-normal hover:text-white transition-colors duration-300"
            >
              {{ t("common.home") }}
            </nuxt-link>
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <nuxt-link
              :to="`${homepagePath}/support`"
              class="text-white text-base font-normal"
            >
              {{ t("support.title") }}
            </nuxt-link>
          </div>
        </div>

        <!-- 页面头部 -->
        <div class="max-w-full mb-16 xl:px-8 lg:px-6 md:px-4 px-4">
          <div class="max-w-screen-2xl mx-auto">
            <div class="text-center mb-8">
              <div
                class="inline-flex items-center px-4 py-2 bg-cyan-400/10 border border-cyan-400/30 rounded-full mb-6"
              >
                <svg
                  class="w-5 h-5 text-cyan-400 mr-2"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
                  ></path>
                </svg>
                <span class="text-cyan-400 font-medium text-sm"
                  >TECHNICAL SUPPORT</span
                >
              </div>
              <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">
                {{ t("support.title") }}
              </h1>
              <p
                class="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"
              >
                {{ t("support.subtitle") }}
              </p>
            </div>

            <!-- 服务统计 -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
              <div class="text-center">
                <div class="text-3xl font-bold text-cyan-400 mb-2">24/7</div>
                <div class="text-sm text-gray-400">{{ t("support.stats.support247") }}</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-cyan-400 mb-2">&lt; 2H</div>
                <div class="text-sm text-gray-400">{{ t("support.stats.responseTime") }}</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-cyan-400 mb-2">95%</div>
                <div class="text-sm text-gray-400">{{ t("support.stats.resolutionRate") }}</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-cyan-400 mb-2">3+</div>
                <div class="text-sm text-gray-400">{{ t("support.stats.languageSupport") }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 主要支持服务 -->
        <div class="max-w-full mb-20 xl:px-8 lg:px-6 md:px-4 px-4">
          <div class="max-w-screen-2xl mx-auto">
            <div class="text-center mb-12">
              <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">
                {{ t("support.services.mainTitle") }}
              </h2>
              <div class="w-24 h-1 bg-cyan-400 mx-auto"></div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
              <!-- 常见问题解答 -->
              <div
                class="bg-gradient-to-br from-zinc-900 to-zinc-800/80 border border-zinc-700 rounded-xl p-8 relative overflow-hidden"
              >
                <div
                  class="absolute top-0 right-0 w-32 h-32 bg-cyan-400/5 rounded-full -translate-y-16 translate-x-16"
                ></div>
                <div class="relative z-10">
                  <div class="flex items-start justify-between mb-6">
                    <div class="flex items-center">
                      <div
                        class="w-12 h-12 bg-cyan-400/20 rounded-xl flex items-center justify-center mr-4"
                      >
                        <svg
                          class="w-6 h-6 text-cyan-400"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                          ></path>
                        </svg>
                      </div>
                      <div>
                        <h3 class="text-xl font-semibold text-white">
                          {{ t("support.faq.title") }}
                        </h3>
                        <div class="text-sm text-cyan-400 font-medium mt-1">
                          {{ t("support.services.faqRecommended") }}
                        </div>
                      </div>
                    </div>
                    <span
                      class="px-3 py-1 bg-cyan-400/20 text-cyan-400 text-xs font-medium rounded-full"
                      >FREE</span
                    >
                  </div>

                  <p class="text-gray-300 mb-6 leading-relaxed">
                    {{ t("support.faq.description") }}
                  </p>

                  <div class="space-y-3 mb-8">
                    <div class="flex items-center text-sm text-gray-400">
                      <svg
                        class="w-4 h-4 text-green-400 mr-3"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"
                        ></path>
                      </svg>
                      {{ t("support.services.faqFeatures.coverage") }}
                    </div>
                    <div class="flex items-center text-sm text-gray-400">
                      <svg
                        class="w-4 h-4 text-green-400 mr-3"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"
                        ></path>
                      </svg>
                      {{ t("support.services.faqFeatures.search") }}
                    </div>
                    <div class="flex items-center text-sm text-gray-400">
                      <svg
                        class="w-4 h-4 text-green-400 mr-3"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"
                        ></path>
                      </svg>
                      {{ t("support.services.faqFeatures.maintenance") }}
                    </div>
                  </div>

                  <nuxt-link
                    :to="`${homepagePath}/support/faq`"
                    class="inline-flex items-center px-6 py-3 bg-cyan-400 text-zinc-900 font-medium rounded-lg hover:bg-cyan-500 transition-colors duration-200"
                  >
                    {{ t("support.services.viewFaq") }}
                    <svg
                      class="w-4 h-4 ml-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M9 5l7 7-7 7"
                      ></path>
                    </svg>
                  </nuxt-link>
                </div>
              </div>

              <!-- 技术支持联系 -->
              <div
                class="bg-gradient-to-br from-zinc-900 to-zinc-800/80 border border-zinc-700 rounded-xl p-8 relative overflow-hidden"
              >
                <div
                  class="absolute top-0 right-0 w-32 h-32 bg-cyan-400/5 rounded-full -translate-y-16 translate-x-16"
                ></div>
                <div class="relative z-10">
                  <div class="flex items-start justify-between mb-6">
                    <div class="flex items-center">
                      <div
                        class="w-12 h-12 bg-cyan-400/20 rounded-xl flex items-center justify-center mr-4"
                      >
                        <svg
                          class="w-6 h-6 text-cyan-400"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                          ></path>
                        </svg>
                      </div>
                      <div>
                        <h3 class="text-xl font-semibold text-white">
                          {{ t("support.contact.title") }}
                        </h3>
                        <div class="text-sm text-cyan-400 font-medium mt-1">
                          {{ t("support.services.contactPriority") }}
                        </div>
                      </div>
                    </div>
                    <span
                      class="px-3 py-1 bg-orange-400/20 text-orange-400 text-xs font-medium rounded-full"
                      >PRIORITY</span
                    >
                  </div>

                  <p class="text-gray-300 mb-6 leading-relaxed">
                    {{ t("support.contact.description") }}
                  </p>

                  <div class="space-y-3 mb-8">
                    <div class="flex items-center text-sm text-gray-400">
                      <svg
                        class="w-4 h-4 text-green-400 mr-3"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"
                        ></path>
                      </svg>
                      {{ t("support.services.contactFeatures.engineer") }}
                    </div>
                    <div class="flex items-center text-sm text-gray-400">
                      <svg
                        class="w-4 h-4 text-green-400 mr-3"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"
                        ></path>
                      </svg>
                      {{ t("support.services.contactFeatures.response") }}
                    </div>
                    <div class="flex items-center text-sm text-gray-400">
                      <svg
                        class="w-4 h-4 text-green-400 mr-3"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"
                        ></path>
                      </svg>
                      {{ t("support.services.contactFeatures.solution") }}
                    </div>
                  </div>

                  <nuxt-link
                    :to="`${homepagePath}/contact`"
                    class="inline-flex items-center px-6 py-3 bg-zinc-800 border border-zinc-600 text-white font-medium rounded-lg hover:bg-zinc-700 hover:border-cyan-400/40 transition-all duration-200"
                  >
                    {{ t("support.services.contactSupport") }}
                    <svg
                      class="w-4 h-4 ml-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M9 5l7 7-7 7"
                      ></path>
                    </svg>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 扩展服务 -->
        <div class="max-w-full mb-20 xl:px-8 lg:px-6 md:px-4 px-4">
          <div class="max-w-screen-2xl mx-auto">
            <div class="text-center mb-12">
              <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">
                {{ t("support.services.extendedTitle") }}
              </h2>
              <div class="w-24 h-1 bg-cyan-400 mx-auto"></div>
              <p class="text-gray-400 mt-4">{{ t("support.services.extendedSubtitle") }}</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <!-- 产品手册 -->
              <div
                class="bg-zinc-900 border border-zinc-700 rounded-lg p-6 text-center hover:border-cyan-400/30 transition-all duration-300 cursor-pointer group"
                @click="showManualsModal = true"
              >
                <div
                  class="w-16 h-16 bg-zinc-800 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-cyan-400/10 transition-colors duration-300"
                >
                  <svg
                    class="w-8 h-8 text-zinc-400 group-hover:text-cyan-400 transition-colors duration-300"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                    ></path>
                  </svg>
                </div>
                <h3 class="text-lg font-semibold text-white mb-3">
                  {{ t("support.manuals.title") }}
                </h3>
                <p class="text-gray-400 text-sm mb-4 leading-relaxed">
                  {{ t("support.manuals.description") }}
                </p>
                <span
                  class="inline-flex items-center px-3 py-1 bg-zinc-800 text-gray-400 text-xs font-medium rounded-full"
                >
                  {{ t("support.comingSoon") }}
                </span>
              </div>
              <!-- 技术文档 -->
              <div
                class="bg-zinc-900 border border-zinc-700 rounded-lg p-6 text-center hover:border-cyan-400/30 transition-all duration-300 cursor-pointer group"
                @click="showDocsModal = true"
              >
                <div
                  class="w-16 h-16 bg-zinc-800 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-cyan-400/10 transition-colors duration-300"
                >
                  <svg
                    class="w-8 h-8 text-zinc-400 group-hover:text-cyan-400 transition-colors duration-300"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                    ></path>
                  </svg>
                </div>
                <h3 class="text-lg font-semibold text-white mb-3">
                  {{ t("support.docs.title") }}
                </h3>
                <p class="text-gray-400 text-sm mb-4 leading-relaxed">
                  {{ t("support.docs.description") }}
                </p>
                <span
                  class="inline-flex items-center px-3 py-1 bg-zinc-800 text-gray-400 text-xs font-medium rounded-full"
                >
                  {{ t("support.comingSoon") }}
                </span>
              </div>

              <!-- 驱动下载 -->
              <div
                class="bg-zinc-900 border border-zinc-700 rounded-lg p-6 text-center hover:border-cyan-400/30 transition-all duration-300 cursor-pointer group"
                @click="showDriversModal = true"
              >
                <div
                  class="w-16 h-16 bg-zinc-800 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-cyan-400/10 transition-colors duration-300"
                >
                  <svg
                    class="w-8 h-8 text-zinc-400 group-hover:text-cyan-400 transition-colors duration-300"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
                    ></path>
                  </svg>
                </div>
                <h3 class="text-lg font-semibold text-white mb-3">
                  {{ t("support.drivers.title") }}
                </h3>
                <p class="text-gray-400 text-sm mb-4 leading-relaxed">
                  {{ t("support.drivers.description") }}
                </p>
                <span
                  class="inline-flex items-center px-3 py-1 bg-zinc-800 text-gray-400 text-xs font-medium rounded-full"
                >
                  {{ t("support.comingSoon") }}
                </span>
              </div>

              <!-- 在线客服 -->
              <div
                class="bg-zinc-900 border border-zinc-700 rounded-lg p-6 text-center hover:border-cyan-400/30 transition-all duration-300 cursor-pointer group"
                @click="showChatModal = true"
              >
                <div
                  class="w-16 h-16 bg-zinc-800 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-cyan-400/10 transition-colors duration-300"
                >
                  <svg
                    class="w-8 h-8 text-zinc-400 group-hover:text-cyan-400 transition-colors duration-300"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                    ></path>
                  </svg>
                </div>
                <h3 class="text-lg font-semibold text-white mb-3">
                  {{ t("support.chat.title") }}
                </h3>
                <p class="text-gray-400 text-sm mb-4 leading-relaxed">
                  {{ t("support.chat.description") }}
                </p>
                <span
                  class="inline-flex items-center px-3 py-1 bg-zinc-800 text-gray-400 text-xs font-medium rounded-full"
                >
                  {{ t("support.comingSoon") }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系信息区域 -->
        <div class="max-w-full xl:px-8 lg:px-6 md:px-4 px-4 mb-16">
          <div class="max-w-screen-2xl mx-auto">
            <div
              class="bg-gradient-to-r from-zinc-900 via-zinc-800/90 to-zinc-900 border border-zinc-700 rounded-xl p-8 md:p-12 text-center relative overflow-hidden"
            >
              <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
              <div class="relative z-10">
                <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">
                  {{ t("support.team.title") }}
                </h2>
                <p
                  class="text-gray-300 mb-8 max-w-3xl mx-auto text-lg leading-relaxed"
                >
                  {{ t("support.team.description") }}
                </p>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-10">
                  <div class="text-center">
                    <div
                      class="w-12 h-12 bg-cyan-400/20 rounded-lg flex items-center justify-center mx-auto mb-3"
                    >
                      <svg
                        class="w-6 h-6 text-cyan-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                        ></path>
                      </svg>
                    </div>
                    <h3 class="font-semibold text-white mb-2">{{ t("support.team.fastResponse.title") }}</h3>
                    <p class="text-gray-400 text-sm">{{ t("support.team.fastResponse.description") }}</p>
                  </div>
                  <div class="text-center">
                    <div
                      class="w-12 h-12 bg-cyan-400/20 rounded-lg flex items-center justify-center mx-auto mb-3"
                    >
                      <svg
                        class="w-6 h-6 text-cyan-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                        ></path>
                      </svg>
                    </div>
                    <h3 class="font-semibold text-white mb-2">{{ t("support.team.professional.title") }}</h3>
                    <p class="text-gray-400 text-sm">{{ t("support.team.professional.description") }}</p>
                  </div>
                  <div class="text-center">
                    <div
                      class="w-12 h-12 bg-cyan-400/20 rounded-lg flex items-center justify-center mx-auto mb-3"
                    >
                      <svg
                        class="w-6 h-6 text-cyan-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M13 10V3L4 14h7v7l9-11h-7z"
                        ></path>
                      </svg>
                    </div>
                    <h3 class="font-semibold text-white mb-2">{{ t("support.team.efficient.title") }}</h3>
                    <p class="text-gray-400 text-sm">{{ t("support.team.efficient.description") }}</p>
                  </div>
                </div>

                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                  <nuxt-link
                    :to="`${homepagePath}/contact`"
                    class="inline-flex items-center px-8 py-4 bg-cyan-400 text-zinc-900 font-semibold rounded-lg hover:bg-cyan-500 transition-colors duration-200"
                  >
                    <svg
                      class="w-5 h-5 mr-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                      ></path>
                    </svg>
                    {{ t("support.services.contactSupport") }}
                  </nuxt-link>
                  <nuxt-link
                    :to="`${homepagePath}/support/faq`"
                    class="inline-flex items-center px-8 py-4 border border-zinc-600 text-white font-semibold rounded-lg hover:bg-zinc-800 hover:border-cyan-400/40 transition-all duration-200"
                  >
                    <svg
                      class="w-5 h-5 mr-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                      ></path>
                    </svg>
                    {{ t("support.team.viewFaq") }}
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 保持原有的模态框 -->
        <div
          v-if="showDocsModal"
          class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4"
          @click="showDocsModal = false"
        >
          <div
            class="bg-zinc-800 rounded-lg max-w-md w-full shadow-2xl border border-zinc-700"
            @click.stop
          >
            <div
              class="flex items-center justify-between p-6 border-b border-zinc-700"
            >
              <h2 class="text-xl font-semibold text-white">
                {{ t("support.docs.title") }}
              </h2>
              <button
                @click="showDocsModal = false"
                class="text-gray-400 hover:text-gray-200 transition-colors"
              >
                <svg
                  class="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  ></path>
                </svg>
              </button>
            </div>
            <div class="p-6 text-center">
              <div
                class="w-16 h-16 bg-cyan-400/20 text-cyan-400 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <svg
                  class="w-8 h-8"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                  ></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-white mb-2">
                {{ t("support.comingSoon") }}
              </h3>
              <p class="text-gray-400 text-sm">
                {{ locale === 'zh' ? '我们正在为您准备详细的技术文档，敬请期待' : locale === 'en' ? 'We are preparing detailed technical documentation for you, please stay tuned' : '詳細な技術ドキュメントを準備中です。お楽しみに' }}
              </p>
            </div>
          </div>
        </div>

        <div
          v-if="showManualsModal"
          class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4"
          @click="showManualsModal = false"
        >
          <div
            class="bg-zinc-800 rounded-lg max-w-md w-full shadow-2xl border border-zinc-700"
            @click.stop
          >
            <div
              class="flex items-center justify-between p-6 border-b border-zinc-700"
            >
              <h2 class="text-xl font-semibold text-white">
                {{ t("support.manuals.title") }}
              </h2>
              <button
                @click="showManualsModal = false"
                class="text-gray-400 hover:text-gray-200 transition-colors"
              >
                <svg
                  class="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  ></path>
                </svg>
              </button>
            </div>
            <div class="p-6 text-center">
              <div
                class="w-16 h-16 bg-cyan-400/20 text-cyan-400 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <svg
                  class="w-8 h-8"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                  ></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-white mb-2">
                {{ t("support.comingSoon") }}
              </h3>
              <p class="text-gray-400 text-sm">
                {{ locale === 'zh' ? '产品手册下载功能即将上线，敬请期待' : locale === 'en' ? 'Product manual download feature will be available soon, please stay tuned' : '製品マニュアルダウンロード機能が近日公開予定です。お楽しみに' }}
              </p>
            </div>
          </div>
        </div>

        <div
          v-if="showDriversModal"
          class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4"
          @click="showDriversModal = false"
        >
          <div
            class="bg-zinc-800 rounded-lg max-w-md w-full shadow-2xl border border-zinc-700"
            @click.stop
          >
            <div
              class="flex items-center justify-between p-6 border-b border-zinc-700"
            >
              <h2 class="text-xl font-semibold text-white">
                {{ t("support.drivers.title") }}
              </h2>
              <button
                @click="showDriversModal = false"
                class="text-gray-400 hover:text-gray-200 transition-colors"
              >
                <svg
                  class="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  ></path>
                </svg>
              </button>
            </div>
            <div class="p-6 text-center">
              <div
                class="w-16 h-16 bg-cyan-400/20 text-cyan-400 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <svg
                  class="w-8 h-8"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                  ></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-white mb-2">
                {{ t("support.comingSoon") }}
              </h3>
              <p class="text-gray-400 text-sm">
                {{ locale === 'zh' ? '驱动程序下载区域正在准备中，敬请期待' : locale === 'en' ? 'Driver download area is being prepared, please stay tuned' : 'ドライバーダウンロードエリアを準備中です。お楽しみに' }}
              </p>
            </div>
          </div>
        </div>

        <div
          v-if="showChatModal"
          class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4"
          @click="showChatModal = false"
        >
          <div
            class="bg-zinc-800 rounded-lg max-w-md w-full shadow-2xl border border-zinc-700"
            @click.stop
          >
            <div
              class="flex items-center justify-between p-6 border-b border-zinc-700"
            >
              <h2 class="text-xl font-semibold text-white">
                {{ t("support.chat.title") }}
              </h2>
              <button
                @click="showChatModal = false"
                class="text-gray-400 hover:text-gray-200 transition-colors"
              >
                <svg
                  class="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  ></path>
                </svg>
              </button>
            </div>
            <div class="p-6 text-center">
              <div
                class="w-16 h-16 bg-cyan-400/20 text-cyan-400 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <svg
                  class="w-8 h-8"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                  ></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-white mb-2">
                {{ t("support.comingSoon") }}
              </h3>
              <p class="text-gray-400 text-sm">
                {{ locale === 'zh' ? '在线客服功能即将为您开通，敬请期待' : locale === 'en' ? 'Live chat feature will be available soon, please stay tuned' : 'オンラインカスタマーサービス機能が近日開通予定です。お楽しみに' }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 技术支持页面
 * 提供专业的技术支持服务入口
 */
import { useErrorHandler } from "~/composables/useErrorHandler";

const { error, isLoading } = useErrorHandler();
const { t, locale } = useI18n();

// 计算首页路径
const homepagePath = computed(() => {
  return locale.value === "zh" ? "" : `/${locale.value}`;
});

// 模态框控制
const showDocsModal = ref(false);
const showManualsModal = ref(false);
const showDriversModal = ref(false);
const showChatModal = ref(false);

// SEO优化
useHead({
  title: t("support.title") + " - Hanye",
  meta: [
    {
      name: "description",
      content: t("support.description"),
    },
    {
      name: "keywords",
      content: t("support.keywords"),
    },
  ],
});
</script>

<style scoped>
/* 简洁的悬停效果 */
.group:hover {
  transform: translateY(-2px);
}

/* 按钮悬停效果 */
.hover\:bg-blue-700:hover {
  background-color: #1d4ed8;
}

.hover\:bg-gray-600:hover {
  background-color: #4b5563;
}

/* 过渡效果 */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-200 {
  transition-duration: 200ms;
}

/* 专业的阴影效果 */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .group:hover {
    transform: none;
  }
}
</style>