<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">Поиск и подбор поставок</Heading>
          <Text tone="inverse" size="base">
            Введите товар, количество и локацию — подбор без авторизации. Всё найденное можно оформить в личном кабинете.
          </Text>
        </Stack>

        <Stack direction="row" gap="3">
          <Button :as="'NuxtLink'" :to="localePath('/catalog')" variant="ghost-inverse">
            Каталог
          </Button>
          <Button :as="'NuxtLink'" :to="localePath('/dashboard/orders')" variant="inverse">
            Мои заказы
          </Button>
        </Stack>
      </Stack>
    </Section>

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

<script setup>

const localePath = useLocalePath()
</script>
