<template>
  <HomepageSection
    class="tariff"
    title="Единый тариф"
    description="Получите полный доступ ко всему функционалу за фиксированную цену"
  >
    <div class="tariff__inner">
      <div class="tariff__header">
        <NuxtImg class="mobile-only" src="/price-bg.png" height="35px" format="webp" />

        <div class="tariff__price">
          30 000 ₸ / месяц
        </div>
      </div>

      <ul class="tariff__list">
        <li>Безлимитное количество товаров</li>
        <li>Поддержка 24/7</li>
        <li>Высокая скорость обновления цен</li>
      </ul>

      <UiButton class="tariff__action" href="/auth" rel="noopener noreferrer">
        Попробовать 7 дней бесплатно
      </UiButton>
    </div>
  </HomepageSection>
</template>

<script setup>
const img = useImage()

const desktopBg = computed(() => {
  return `url('${img('/price-bg.png', { height: '352px', format: 'webp' })}')`
})
</script>

<style lang="scss">
.tariff {
  &__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 400px;
    padding: 24px 100px;
    border-radius: 12px;
    background-color: $color-gray-200;

    @include desktop {
      background-image: v-bind(desktopBg);
      background-repeat: no-repeat;
      background-position: center right 128px;
    }

    @include mobile {
      padding: 16px;
      height: unset;
    }
  }

  &__header {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  &__price {
    @include font(28px, 700, 39px);

    @include mobile {
      @include font(20px, 700, 28px);
    }
  }

  &__list {
    @include font(16px, 400, 29px);

    color: $color-gray-700;
    margin-top: 24px;

    @include mobile {
      @include font(12px, 400, 22px);
    }
  }

  &__action {
    margin-top: 24px;

    @include mobile {
      width: 100%;
    }
  }
}
</style>
