<template>
  <UPageSection
    id="features"
    :ui="{
      root: 'scroll-mt-20'
    }"
  >
    <template #title>
      <div class="flex flex-col items-center text-center mb-4">
        <span
          class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 text-sm font-medium mb-4"
        >
          <UIcon name="i-lucide-sparkles" class="w-4 h-4" />
          {{ $t('features.badge') }}
        </span>
        <h2
          class="font-heading text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-gray-900 dark:text-white"
        >
          {{ $t('features.title') }}<span class="gradient-text">{{ $t('features.titleHighlight') }}</span>{{ $t('features.titleSuffix') }}
        </h2>
      </div>
    </template>

    <template #description>
      <p class="text-center text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        {{ $t('features.description') }}
      </p>
    </template>

    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
      <UPageCard
        v-for="(feature, index) in features"
        :key="index"
        :icon="feature.icon"
        :title="feature.title"
        :description="feature.description"
        variant="subtle"
        spotlight
        spotlight-color="primary"
        class="animate-fade-in-up"
        :style="{ animationDelay: `${index * 100}ms` }"
      />
    </div>
  </UPageSection>
</template>

<script setup lang="ts">
const { t } = useI18n()

const featureIcons = [
  'i-lucide-route',
  'i-lucide-shield-alert',
  'i-lucide-gauge',
  'i-lucide-history',
  'i-lucide-message-square',
  'i-lucide-file-text',
  'i-lucide-pen-tool',
  'i-lucide-bell',
  'i-lucide-shield-check'
]

const features = computed(() =>
  featureIcons.map((icon, index) => ({
    icon,
    title: t(`features.items[${index}].title`),
    description: t(`features.items[${index}].description`)
  }))
)
</script>
