@use 'ui-design-system/src/styles/semantic/index' as *;

.cta-section {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;

  &--gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #8b5cf6 100%);
  }

  &--pattern {
    background-color: #f8fafc;
    background-image: radial-gradient(circle at 2px 2px, #e2e8f0 2px, transparent 0);
    background-size: 60px 60px;
  }

  &--image {
    background-color: #f8fafc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
  }

  &--solid {
    background: #3b82f6;
  }

  &__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
  }

  &__urgency {
    margin-bottom: 2rem;
    
    .countdown {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-bottom: 1rem;

      &__item {
        text-align: center;
      }

      &__value {
        display: block;
        font-size: 2rem;
        font-weight: bold;
        color: white;
        line-height: 1;
      }

      &__label {
        display: block;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 0.5rem;
      }
    }

    .limited-offer {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: #f59e0b;
      color: #000;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;

      &__text {
        text-transform: uppercase;
        letter-spacing: 0.025em;
      }

      &__remaining {
        font-weight: bold;
      }
    }

    .social-proof__text {
      color: white;
      font-size: 1rem;
      font-weight: 500;
      background: rgba(255, 255, 255, 0.1);
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      backdrop-filter: blur(10px);
    }
  }

  &__title {
    font-size: 3rem;
    font-weight: bold;
    color: white;
    margin-bottom: 2rem;
    line-height: 1.2;
  }

  &__description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }

  &__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  &__button {
    min-width: 160px;
  }
}