@use 'sass:map';
@use '../../abstract';
@use '../../base/token';

// TODO: CTA는 theme은 dark, gray 두가지 타입만 있으면 될 것 같음
// 그외의 theme은 없어도 될 것 같음

$cta-theme: (
  'dark': (
    'bg': var(--secondary-gray-blue-700),
    'title': var(--base-white),
    'desc': var(--secondary-gray-blue-100),
  ),
  'default': (
    'bg': var(--base-white),
    'title': var(--gray-700),
    'desc': var(--gray-400),
  ),
);

.cds-cta-section {
  $this: &;

  padding: 64px 16px;
  text-align: center;

  & > *:last-child {
    margin-bottom: 0;
  }

  &__title {
    margin-bottom: 20px;
    font-size: abstract.rem(token.$font-size-6);
    line-height: token.$line-heights-4 + px;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    color: currentColor;
    white-space: pre-wrap;
  }

  &__desc {
    margin-bottom: 40px;
    font-size: abstract.rem(token.$font-size-3);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-0);
    white-space: pre-wrap;
    color: var(--secondary-gray-blue-100);
  }

  &__btn-wrap,
  .simple-centered__content {
    .cds-btn {
      width: 100%;
    }

    & > .cds-btn + .cds-btn {
      margin-top: 12px;
    }
  }

  // theme
  @each $name, $data in $cta-theme {
    &--#{$name} {
      background-color: map.get($data, 'bg');
      color: map.get($data, 'title');

      @if $name == 'dark' {
        #{$this}__inner {
          background-color: transparent;
        }
      }

      #{$this}__desc {
        color: map.get($data, 'desc');
      }
    }
  }

  @include abstract.media-bp-up('md') {
    padding: 96px 0;

    &__title {
      font-size: abstract.rem(token.$font-size-7);
      line-height: token.$line-heights-3 + px;
    }

    &__desc {
      font-size: abstract.rem(token.$font-size-4);
    }

    &__btn-wrap,
    .simple-centered__content {
      display: flex;
      justify-content: center;
      gap: 12px;

      .cds-btn {
        width: auto;
      }

      & > .cds-btn + .cds-btn {
        margin-top: 0;
      }
    }
  }
}