<template>
  <div class="catalog">
    <div class="catalog__top">
      <div class="container">
        <div class="catalog__top-wrapper">
          <h1>{{ t('catalog.title') }}</h1>
          <p>{{ t('catalog.text') }}</p>
        </div>
      </div>
    </div>
    <div class="catalog__main">
      <div class="container">
        <div class="catalog__main-wrapper">
          <cards-category
              v-for="category in categories"
              :key="category.node.uuid"
              :category="category.node"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {usePageTitle} from "@composables/utils";

const {t} = useI18n();
const categoryStore = useCategoryStore();

const categories = computed(() => categoryStore.categories);

const { setPageTitle } = usePageTitle();

setPageTitle(t('breadcrumbs.catalog'));
</script>

<style lang="scss" scoped>
.catalog {
  &__top {
    padding-block: 70px;
    background-color: #f8f8f8;

    &-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;

      & h1 {
        color: #1a1a1a;
        font-family: "Playfair Display", sans-serif;
        font-size: 48px;
        font-weight: 700;
        letter-spacing: -0.5px;
      }

      & p {
        max-width: 600px;
        text-align: center;
        color: #4b5563;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -0.5px;
      }
    }
  }

  &__main {
    background-color: $white;
    padding-block: 70px;
    border-top: 1px solid #f3f4f6;

    &-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 24px;
    }
  }
}
</style>