<template>
  <Stack gap="8">
    <Section variant="hero">
      <Stack gap="4">
        <Stack gap="2">
          <Text size="base" tone="inverse" weight="semibold" transform="uppercase">Search</Text>
          <Heading :level="1" tone="inverse">{{ t('searchPage.hero.title') }}</Heading>
          <Text tone="inverse" size="base">
            {{ t('searchPage.hero.subtitle') }}
          </Text>
        </Stack>

        <Stack direction="row" gap="3">
          <Button :as="'NuxtLink'" :to="localePath('/catalog')" variant="ghost">
            {{ t('searchPage.cta.catalog') }}
          </Button>
          <Button :as="'NuxtLink'" :to="localePath('/clientarea/orders')" variant="outline">
            {{ t('searchPage.cta.orders') }}
          </Button>
        </Stack>
      </Stack>
    </Section>

    <Section variant="plain" paddingY="md">
      <Card>
        <GoodsContent />
      </Card>
    </Section>
  </Stack>
</template>

<script setup>

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