<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto text-center space-y-8">
      <h1 class="text-4xl font-bold tracking-tight sm:text-6xl">
        {{ t('home.title') }}
      </h1>

      <p class="text-xl text-muted-foreground">
        {{ t('home.subtitle') }}
      </p>

      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <router-link to="/directory"
          class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">
          {{ t('home.browse') }}
        </router-link>

        <router-link to="/faq"
          class="inline-flex items-center justify-center rounded-md border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground">
          {{ t('home.learnMore') }}
        </router-link>
      </div>
    </div>
  </div>
</template>
