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

.ui-lp-testimonial-carousel {
  padding: $semantic-spacing-layout-section-lg 0;
  background: $semantic-color-surface-primary;
  
  // Header Section
  &__header {
    text-align: center;
    margin-bottom: $semantic-spacing-layout-section-md;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  &__title {
    font-family: map-get($semantic-typography-heading-h2, font-family);
    font-size: map-get($semantic-typography-heading-h2, font-size);
    font-weight: map-get($semantic-typography-heading-h2, font-weight);
    line-height: map-get($semantic-typography-heading-h2, line-height);
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-heading;
  }
  
  &__subtitle {
    font-family: map-get($semantic-typography-body-large, font-family);
    font-size: map-get($semantic-typography-body-large, font-size);
    font-weight: map-get($semantic-typography-body-large, font-weight);
    line-height: map-get($semantic-typography-body-large, line-height);
    color: $semantic-color-text-secondary;
    margin: 0;
  }
  
  // Carousel Container
  &__container {
    position: relative;
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-lg;
  }
  
  &__viewport {
    flex: 1;
    overflow: hidden;
    border-radius: $semantic-border-card-radius;
  }
  
  &__track {
    display: flex;
    transition: transform $semantic-motion-duration-normal $semantic-motion-easing-ease;
  }
  
  &__slide {
    flex-shrink: 0;
    padding: 0 $semantic-spacing-component-sm;
  }
  
  // Navigation Buttons
  &__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: $semantic-border-button-radius;
    background: $semantic-color-surface-elevated;
    color: $semantic-color-text-primary;
    cursor: pointer;
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    box-shadow: $semantic-shadow-card-rest;
    
    &:hover:not(:disabled) {
      background: $semantic-color-surface-hover;
      box-shadow: $semantic-shadow-card-hover;
      transform: translateY(-1px);
    }
    
    &:disabled {
      opacity: $semantic-opacity-disabled;
      cursor: not-allowed;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-primary;
      outline-offset: 2px;
    }
    
    fa-icon {
      font-size: $semantic-sizing-icon-button;
    }
  }
  
  // Testimonial Item
  &__item {
    padding: $semantic-spacing-component-xl;
    background: $semantic-color-surface-elevated;
    border-radius: $semantic-border-card-radius;
    box-shadow: $semantic-shadow-card-rest;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-lg;
    position: relative;
  }
  
  // Card Variant (default)
  &--card &__item {
    border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  }
  
  // Minimal Variant
  &--minimal &__item {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: $semantic-spacing-component-lg;
  }
  
  // Quote Variant
  &--quote &__item {
    background: $semantic-color-primary;
    color: $semantic-color-on-primary;
    
    .ui-lp-testimonial-carousel__text {
      color: $semantic-color-on-primary;
    }
    
    .ui-lp-testimonial-carousel__author-name {
      color: $semantic-color-on-primary;
    }
    
    .ui-lp-testimonial-carousel__author-title {
      color: $semantic-color-on-primary;
      opacity: $semantic-opacity-subtle;
    }
  }
  
  &__quote-icon {
    position: absolute;
    top: $semantic-spacing-component-md;
    left: $semantic-spacing-component-md;
    
    fa-icon {
      font-size: 2rem;
      color: $semantic-color-on-primary;
      opacity: $semantic-opacity-subtle;
    }
  }
  
  // Content
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-md;
  }
  
  &__text {
    font-family: map-get($semantic-typography-body-large, font-family);
    font-size: map-get($semantic-typography-body-large, font-size);
    font-weight: map-get($semantic-typography-body-large, font-weight);
    line-height: map-get($semantic-typography-body-large, line-height);
    color: $semantic-color-text-primary;
    margin: 0;
    
    .ui-lp-testimonial-carousel--quote & {
      font-style: italic;
      padding-top: $semantic-spacing-component-lg;
    }
  }
  
  // Rating
  &__rating {
    display: flex;
    gap: $semantic-spacing-component-xs;
  }
  
  &__star {
    font-size: $semantic-sizing-icon-button;
    color: $semantic-color-warning;
    
    .ui-lp-testimonial-carousel--quote & {
      color: $semantic-color-on-primary;
    }
  }
  
  // Author
  &__author {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-md;
  }
  
  &__avatar {
    width: 48px;
    height: 48px;
    border-radius: $semantic-border-avatar-radius;
    overflow: hidden;
    flex-shrink: 0;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  &__author-info {
    flex: 1;
  }
  
  &__author-name {
    font-family: map-get($semantic-typography-button-medium, font-family);
    font-size: map-get($semantic-typography-button-medium, font-size);
    font-weight: map-get($semantic-typography-button-medium, font-weight);
    line-height: map-get($semantic-typography-button-medium, line-height);
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-component-xs;
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-xs;
  }
  
  &__verified {
    font-size: $semantic-sizing-icon-button;
    color: $semantic-color-success;
    
    .ui-lp-testimonial-carousel--quote & {
      color: $semantic-color-on-primary;
    }
  }
  
  &__author-title {
    font-family: map-get($semantic-typography-body-small, font-family);
    font-size: map-get($semantic-typography-body-small, font-size);
    font-weight: map-get($semantic-typography-body-small, font-weight);
    line-height: map-get($semantic-typography-body-small, line-height);
    color: $semantic-color-text-secondary;
  }
  
  // Dots Navigation
  &__dots {
    display: flex;
    justify-content: center;
    gap: $semantic-spacing-component-sm;
    margin-top: $semantic-spacing-component-xl;
  }
  
  &__dot {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: $semantic-color-border-subtle;
    cursor: pointer;
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &--active {
      background: $semantic-color-primary;
      transform: scale(1.2);
    }
    
    &:hover {
      background: $semantic-color-primary;
      opacity: $semantic-opacity-subtle;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-primary;
      outline-offset: 2px;
    }
  }
  
  // Responsive Design
  @media (max-width: $semantic-breakpoint-lg - 1) {
    &__container {
      gap: $semantic-spacing-component-md;
    }
    
    &__nav {
      width: 40px;
      height: 40px;
      
      fa-icon {
        font-size: $semantic-sizing-icon-inline;
      }
    }
    
    &__item {
      padding: $semantic-spacing-component-lg;
    }
  }
  
  @media (max-width: $semantic-breakpoint-md - 1) {
    &__container {
      flex-direction: column;
      gap: $semantic-spacing-component-lg;
    }
    
    &__nav {
      display: none;
    }
    
    &__viewport {
      width: 100%;
    }
    
    &__slide {
      padding: 0;
    }
    
    &__item {
      padding: $semantic-spacing-component-md;
    }
    
    &__text {
      font-family: map-get($semantic-typography-body-medium, font-family);
      font-size: map-get($semantic-typography-body-medium, font-size);
      font-weight: map-get($semantic-typography-body-medium, font-weight);
      line-height: map-get($semantic-typography-body-medium, line-height);
    }
  }
  
  // Animation states for scroll-based reveal
  @media (prefers-reduced-motion: no-preference) {
    &__item {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp $semantic-motion-duration-slow $semantic-motion-easing-ease forwards;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    &__track {
      transition: none;
    }
    
    &__item {
      opacity: 1;
      transform: none;
      animation: none;
    }
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}