<template>
  <UDashboardPanel id="help">
    <template #header>
      <UDashboardNavbar :title="$t('help.pageTitle')">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <div class="flex flex-col gap-6 w-full lg:max-w-4xl mx-auto p-6">
        <!-- Introduction Card -->
        <UCard>
          <template #header>
            <div>
              <h3 class="text-lg font-semibold text-highlighted">{{ $t('help.pageTitle') }}</h3>
              <p class="text-sm text-muted mt-1">{{ $t('help.description') }}</p>
            </div>
          </template>
        </UCard>

        <!-- FAQ Section -->
        <UCard>
          <template #header>
            <div>
              <h3 class="text-lg font-semibold text-highlighted">{{ $t('help.faq.title') }}</h3>
            </div>
          </template>

          <UAccordion :items="faqItems" />
        </UCard>

        <!-- Support Section -->
        <UCard>
          <template #header>
            <div>
              <h3 class="text-lg font-semibold text-highlighted">{{ $t('help.support.title') }}</h3>
              <p class="text-sm text-muted mt-1">{{ $t('help.support.description') }}</p>
            </div>
          </template>

          <UButton :label="$t('help.support.contactLink')" to="/contact" icon="i-lucide-mail" />
        </UCard>
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})

const { t: $t } = useI18n()

const faqItems = computed(() => [
  {
    label: $t('help.faq.q1.question'),
    content: $t('help.faq.q1.answer')
  },
  {
    label: $t('help.faq.q2.question'),
    content: $t('help.faq.q2.answer')
  },
  {
    label: $t('help.faq.q3.question'),
    content: $t('help.faq.q3.answer')
  },
  {
    label: $t('help.faq.q4.question'),
    content: $t('help.faq.q4.answer')
  }
])
</script>
