<template>
  <div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
    <h1 class="text-4xl font-bold mb-4">{{ t('catalog.hero.title') }}</h1>
    <p class="text-lg text-base-content/70 mb-8 max-w-lg">
      {{ t('catalog.hero.subtitle') }}
    </p>

    <div class="flex flex-wrap justify-center gap-4">
      <button
        class="btn btn-lg btn-primary gap-2"
        @click="$emit('start-select', 'product')"
      >
        <Icon name="lucide:package" size="24" />
        {{ t('catalog.filters.product') }}
      </button>

      <button
        class="btn btn-lg btn-outline gap-2"
        @click="$emit('start-select', 'supplier')"
      >
        <Icon name="lucide:factory" size="24" />
        {{ t('catalog.filters.supplier') }}
      </button>

      <button
        class="btn btn-lg btn-outline gap-2"
        @click="$emit('start-select', 'hub')"
      >
        <Icon name="lucide:map-pin" size="24" />
        {{ t('catalog.filters.hub') }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineEmits<{
  (e: 'start-select', type: string): void
}>()

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