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

.ui-lp-footer {
  width: 100%;
  background: $semantic-color-surface-secondary;
  color: $semantic-color-text-primary;
  
  // Dark theme
  &--theme-dark {
    background: $semantic-color-inverse-surface;
    color: $semantic-color-text-primary;
  }
  
  // Main Footer Content
  &__main {
    padding: $semantic-spacing-layout-section-lg 0;
  }
  
  &__grid {
    align-items: flex-start;
  }
  
  // Brand Section
  &__brand-section {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-xl;
    
    @media (max-width: $semantic-breakpoint-md - 1) {
      gap: $semantic-spacing-component-lg;
    }
  }
  
  // Logo
  &__logo {
    margin-bottom: $semantic-spacing-component-md;
  }
  
  &__logo-link,
  &__logo-text {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: opacity $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &:hover {
      opacity: $semantic-opacity-hover;
    }
  }
  
  &__logo-text {
    font-family: map-get($semantic-typography-heading-h3, font-family);
    font-size: map-get($semantic-typography-heading-h3, font-size);
    font-weight: map-get($semantic-typography-heading-h3, font-weight);
    line-height: map-get($semantic-typography-heading-h3, line-height);
    color: $semantic-color-text-primary;
    
    .ui-lp-footer--theme-dark & {
      color: $semantic-color-text-primary;
    }
  }
  
  &__logo-image {
    max-height: 40px;
    width: auto;
    object-fit: contain;
  }
  
  // Newsletter Section
  &__newsletter {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-md;
    max-width: 400px;
  }
  
  &__newsletter-title {
    font-family: map-get($semantic-typography-heading-h4, font-family);
    font-size: map-get($semantic-typography-heading-h4, font-size);
    font-weight: map-get($semantic-typography-heading-h4, font-weight);
    line-height: map-get($semantic-typography-heading-h4, line-height);
    color: $semantic-color-text-primary;
    margin: 0;
    
    .ui-lp-footer--theme-dark & {
      color: $semantic-color-text-primary;
    }
  }
  
  &__newsletter-description {
    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);
    color: $semantic-color-text-secondary;
    margin: 0;
    
    .ui-lp-footer--theme-dark & {
      color: rgba($semantic-color-text-primary, 0.8);
    }
  }
  
  &__newsletter-form {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-sm;
  }
  
  &__newsletter-input-group {
    display: flex;
    gap: $semantic-spacing-component-sm;
    
    @media (max-width: $semantic-breakpoint-sm - 1) {
      flex-direction: column;
    }
  }
  
  &__newsletter-input {
    flex: 1;
    padding: $semantic-spacing-component-md;
    border: 1px solid $semantic-color-border-subtle;
    border-radius: $semantic-border-input-radius;
    background: $semantic-color-surface-primary;
    color: $semantic-color-text-primary;
    font-family: map-get($semantic-typography-body-medium, font-family);
    font-size: map-get($semantic-typography-body-medium, font-size);
    line-height: map-get($semantic-typography-body-medium, line-height);
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &::placeholder {
      color: $semantic-color-text-secondary;
    }
    
    &:focus {
      outline: none;
      border-color: $semantic-color-focus;
      box-shadow: 0 0 0 2px rgba($semantic-color-focus, 0.2);
    }
    
    &:invalid {
      border-color: $semantic-color-error;
    }
    
    .ui-lp-footer--theme-dark & {
      background: $semantic-color-inverse-surface;
      border-color: $semantic-color-border-secondary;
      color: $semantic-color-text-primary;
      
      &::placeholder {
        color: rgba($semantic-color-text-primary, 0.6);
      }
    }
  }
  
  &__newsletter-button {
    flex-shrink: 0;
  }
  
  &__newsletter-status {
    padding: $semantic-spacing-component-sm;
    border-radius: $semantic-border-input-radius;
    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);
    
    &--success {
      background: rgba($semantic-color-success, 0.1);
      color: $semantic-color-success;
      border: 1px solid rgba($semantic-color-success, 0.2);
    }
    
    &--error {
      background: rgba($semantic-color-error, 0.1);
      color: $semantic-color-error;
      border: 1px solid rgba($semantic-color-error, 0.2);
    }
  }
  
  // Social Links
  &__social {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-md;
  }
  
  &__social-title {
    font-family: map-get($semantic-typography-heading-h5, font-family);
    font-size: map-get($semantic-typography-heading-h5, font-size);
    font-weight: map-get($semantic-typography-heading-h5, font-weight);
    line-height: map-get($semantic-typography-heading-h5, line-height);
    color: $semantic-color-text-primary;
    margin: 0;
    
    .ui-lp-footer--theme-dark & {
      color: $semantic-color-text-primary;
    }
  }
  
  &__social-links {
    display: flex;
    gap: $semantic-spacing-component-md;
    flex-wrap: wrap;
  }
  
  &__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $semantic-sizing-button-height-md;
    height: $semantic-sizing-button-height-md;
    border-radius: $semantic-border-button-radius;
    background: $semantic-color-surface-elevated;
    color: $semantic-color-text-secondary;
    text-decoration: none;
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &:hover {
      background: $semantic-color-primary;
      color: $semantic-color-on-primary;
      transform: translateY(-2px);
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
    
    .ui-lp-footer--theme-dark & {
      background: $semantic-color-inverse-surface;
      color: rgba($semantic-color-text-primary, 0.7);
      
      &:hover {
        background: $semantic-color-primary;
        color: $semantic-color-on-primary;
      }
    }
  }
  
  &__social-icon {
    font-size: 20px;
  }
  
  // Footer Columns
  &__column {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-md;
  }
  
  &__column-title {
    font-family: map-get($semantic-typography-heading-h5, font-family);
    font-size: map-get($semantic-typography-heading-h5, font-size);
    font-weight: map-get($semantic-typography-heading-h5, font-weight);
    line-height: map-get($semantic-typography-heading-h5, line-height);
    color: $semantic-color-text-primary;
    margin: 0;
    margin-bottom: $semantic-spacing-component-sm;
    
    .ui-lp-footer--theme-dark & {
      color: $semantic-color-text-primary;
    }
  }
  
  &__column-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-sm;
  }
  
  &__column-item {
    // No specific styles needed
  }
  
  &__column-link {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-xs;
    text-decoration: none;
    color: $semantic-color-text-secondary;
    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);
    transition: color $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &:hover {
      color: $semantic-color-primary;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
      border-radius: $semantic-border-input-radius;
    }
    
    .ui-lp-footer--theme-dark & {
      color: rgba($semantic-color-text-primary, 0.8);
      
      &:hover {
        color: $semantic-color-primary;
      }
    }
  }
  
  &__link-icon {
    font-size: 16px;
  }
  
  // Footer Bottom
  &__bottom {
    padding: $semantic-spacing-layout-section-sm 0;
    background: rgba($semantic-color-inverse-surface, 0.05);
    border-top: 1px solid $semantic-color-border-subtle;
    
    .ui-lp-footer--theme-dark & {
      background: rgba($semantic-color-surface-primary, 0.05);
      border-top-color: rgba($semantic-color-border-secondary, 0.2);
    }
  }
  
  &__bottom-content {
    @media (max-width: $semantic-breakpoint-sm - 1) {
      flex-direction: column;
      align-items: flex-start;
      text-align: center;
    }
  }
  
  &__copyright {
    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;
    
    .ui-lp-footer--theme-dark & {
      color: rgba($semantic-color-text-primary, 0.7);
    }
  }
  
  // Legal Links
  &__legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-sm;
    flex-wrap: wrap;
  }
  
  &__legal-item {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-sm;
  }
  
  &__legal-link {
    text-decoration: none;
    color: $semantic-color-text-secondary;
    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);
    transition: color $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &:hover {
      color: $semantic-color-primary;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
      border-radius: $semantic-border-input-radius;
    }
    
    .ui-lp-footer--theme-dark & {
      color: rgba($semantic-color-text-primary, 0.7);
      
      &:hover {
        color: $semantic-color-primary;
      }
    }
  }
  
  &__legal-separator {
    color: $semantic-color-text-tertiary;
    user-select: none;
    
    .ui-lp-footer--theme-dark & {
      color: rgba($semantic-color-text-primary, 0.5);
    }
  }
  
  // Responsive Design
  @media (max-width: $semantic-breakpoint-lg - 1) {
    &__grid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    &__brand-section {
      grid-column: 1 / -1;
      margin-bottom: $semantic-spacing-component-lg;
    }
  }
  
  @media (max-width: $semantic-breakpoint-md - 1) {
    &__main {
      padding: $semantic-spacing-layout-section-md 0;
    }
    
    &__grid {
      grid-template-columns: 1fr;
      gap: $semantic-spacing-component-xl;
    }
    
    &__newsletter {
      max-width: none;
    }
    
    &__social-links {
      justify-content: center;
    }
  }
  
  @media (max-width: $semantic-breakpoint-sm - 1) {
    &__main {
      padding: $semantic-spacing-layout-section-sm 0;
    }
    
    &__newsletter-input-group {
      flex-direction: column;
    }
    
    &__newsletter-button {
      align-self: stretch;
    }
    
    &__bottom-content {
      text-align: center;
    }
    
    &__legal-links {
      justify-content: center;
    }
  }
}