@use 'abstracts';

// ── Animations ────────────────────────────────────────────────────────────────

@keyframes success-pop {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

// ── Section ───────────────────────────────────────────────────────────────────

.contact {
  padding-block: calc(var(--space-4) * 2);
  background-color: var(--bg-muted);

  &__wrapper {
    @include abstracts.container-wrapper;
  }

  // ── Header ─────────────────────────────────────────────────────────────────

  &__header {
    text-align: center;
    margin-bottom: calc(var(--space-4) * 1.5);

    h2 {
      font-size: var(--font-size-xl);
      margin-bottom: var(--space-2);
    }

    p {
      font-size: var(--font-size-lg);
      max-width: 56ch;
      margin-inline: auto;
    }
  }

  // ── Two-column grid ─────────────────────────────────────────────────────────

  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--space-4) * 1.5);

    @include abstracts.breakpoint('md') {
      grid-template-columns: 1fr 1.4fr;
      align-items: start;
    }
  }

  // ── Info column ────────────────────────────────────────────────────────────

  &__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  &__info-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
  }

  &__info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: abstracts.rem(40);
    height: abstracts.rem(40);
    border-radius: 10px;
    background-color: oklch(from var(--accent) l c h / 0.12);
    color: var(--accent);
    font-size: abstracts.rem(18);
    flex-shrink: 0;
  }

  &__info-text {
    p, address {
      font-size: var(--font-size-base);
      color: var(--text-muted);
      font-style: normal;
      line-height: 1.6;
    }

    .contact__info-label {
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: var(--space-1);
    }
  }

  &__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-color);

    li {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--font-size-base);
      color: var(--text-muted);

      ng-icon {
        color: var(--accent);
        font-size: abstracts.rem(16);
        flex-shrink: 0;
      }
    }
  }

  // ── Form wrapper ───────────────────────────────────────────────────────────

  &__form-wrapper {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-4);
  }

  &__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  // ── Field ──────────────────────────────────────────────────────────────────

  &__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);

    label {
      font-size: var(--font-size-base);
      font-weight: 600;
      color: var(--text-main);
    }

    input,
    textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 14px;
      border: 1.5px solid var(--border-color);
      border-radius: calc(var(--border-radius) * 0.6);
      background-color: var(--bg-surface);
      color: var(--text-main);
      font-size: var(--font-size-base);
      font-family: inherit;
      line-height: 1.5;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      resize: vertical;

      &::placeholder {
        color: var(--text-muted);
        opacity: 0.6;
      }

      &:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.15);
      }
    }

    &--error {
      input,
      textarea {
        border-color: oklch(55% 0.2 25);

        &:focus {
          box-shadow: 0 0 0 3px oklch(55% 0.2 25 / 0.15);
        }
      }
    }
  }

  &__error {
    font-size: 0.8rem;
    color: oklch(55% 0.2 25);
  }

  // ── Submit button ──────────────────────────────────────────────────────────

  &__submit {
    width: 100%;
    padding: 12px 24px;
    background-color: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: calc(var(--border-radius) * 0.6);
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    &:hover { background-color: var(--accent-hover); }
    &:active { transform: translateY(1px); }
  }

  // ── Success state ──────────────────────────────────────────────────────────

  &__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-4);
    gap: var(--space-3);
    animation: success-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);

    h3 {
      font-size: var(--font-size-lg);
      font-weight: 700;
    }

    p {
      color: var(--text-muted);
      font-size: var(--font-size-base);
      max-width: 36ch;
    }
  }

  &__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: abstracts.rem(64);
    height: abstracts.rem(64);
    border-radius: 50%;
    background-color: oklch(from var(--accent) l c h / 0.12);
    color: var(--accent);
    font-size: abstracts.rem(28);
  }

  &__reset {
    background: none;
    border: 1.5px solid var(--border-color);
    border-radius: calc(var(--border-radius) * 0.6);
    padding: 8px 20px;
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    &:hover { border-color: var(--accent); color: var(--accent); }
  }
}
