<template>
  <div class="au-push">
    <div class="au-push__card">
      <div class="au-push__hero">
        <span class="au-push__badge">
          <Icon
            type="ios-construct"
            size="40"
          />
        </span>

        <h2 class="au-push__title">
          {{ $t('COMING_SOON') }}
        </h2>

        <p class="au-push__desc">
          {{ $t('SHOPEE_AUTO_PUSH_PRODUCT_DESCRIPTION') }}
        </p>
      </div>

      <div class="au-push__grid">
        <div class="au-push__item">
          <span class="au-push__icon">
            <Icon
              type="ios-rocket"
              size="20"
            />
          </span>
          <h4 class="au-push__item-title">
            {{ $t('SHOPEE_AUTO_PUSH_PRODUCT_FEATURE_1_TITLE') }}
          </h4>
          <p class="au-push__item-desc">
            {{ $t('SHOPEE_AUTO_PUSH_PRODUCT_FEATURE_1_DESC') }}
          </p>
        </div>

        <div class="au-push__item">
          <span class="au-push__icon">
            <Icon
              type="ios-analytics"
              size="20"
            />
          </span>
          <h4 class="au-push__item-title">
            {{ $t('SHOPEE_AUTO_PUSH_PRODUCT_FEATURE_2_TITLE') }}
          </h4>
          <p class="au-push__item-desc">
            {{ $t('SHOPEE_AUTO_PUSH_PRODUCT_FEATURE_2_DESC') }}
          </p>
        </div>

        <div class="au-push__item">
          <span class="au-push__icon">
            <Icon
              type="ios-time"
              size="20"
            />
          </span>
          <h4 class="au-push__item-title">
            {{ $t('SHOPEE_AUTO_PUSH_PRODUCT_FEATURE_3_TITLE') }}
          </h4>
          <p class="au-push__item-desc">
            {{ $t('SHOPEE_AUTO_PUSH_PRODUCT_FEATURE_3_DESC') }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ShopeeAutoPushProduct',
};
</script>

<style lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.au-push {
  padding: 24px;

  &__card {
    @include card(32px);

    max-width: 880px;
    margin: 0 auto;
    border: 1px solid $c-border;
  }

  &__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-bottom: 28px;
    border-bottom: 1px solid $c-border;
  }

  &__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: $radius-pill;
    color: $c-warning;
    background: $c-warning-bg;
  }

  &__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: $c-text-strong;
  }

  &__desc {
    margin: 0;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: $c-text;
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 28px;
  }

  &__item {
    @include card-hover;

    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 16px;
    border: 1px solid $c-border;
    border-radius: $radius-item;
    background: $c-surface-soft;

    &:hover {
      border-color: $c-brand;
      background: $c-surface;
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: $radius-item;
    color: $c-brand;
    background: $c-brand-tint;
  }

  &__item-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: $c-text-strong;
  }

  &__item-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: $c-text-muted;
  }
}

@media (max-width: 860px) {
  .au-push {
    padding: 16px;

    &__card {
      padding: 20px;
    }

    &__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}
</style>
