@use 'sprucecss/scss/spruce' as *;

.results-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__list {
    display: grid;
    gap: spacer('m');
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
    }
  }

  &__item {
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    padding: spacer('m');
    @include layout-stack('xs');
  }

  &__label {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    font-weight: 600;
  }

  &__values {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs');
  }

  &__before {
    color: color('muted');
    font-size: font-size('h5');
    text-decoration: line-through;
    text-decoration-color: color('border-strong');
  }

  &__arrow {
    color: color('muted');
  }

  &__after {
    color: color('heading');
    font-family: config('font-family-heading', $typography);
    font-size: font-size('h1');
    line-height: 1;
  }

  // Both directions are good news here: the arrow shows the direction, the color says it's an improvement.
  &__change {
    align-items: center;
    color: color('success', 'alert');
    display: inline-flex;
    font-size: config('font-size-sm', $typography);
    font-weight: 700;
    gap: spacer('xxs');

    svg {
      block-size: 1rem;
      inline-size: 1rem;
    }

    &--down svg {
      rotate: 180deg;
    }
  }

  &__text {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
  }

  &__note {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    margin-block: 0;
  }
}

[dir='rtl'] .results-block__arrow {
  display: inline-block;
  scale: -1 1;
}

<section class="results-block" aria-labelledby="results-title">
    <div class="container">
        <div class="results-block__inner">
            <header class="block-heading block-heading--start">
                <p class="block-heading__eyebrow">Results</p>
                <h2 class="block-heading__title" id="results-title">Three months after the launch</h2>
            </header>
            <ul class="results-block__list" role="list">
                <li class="results-block__item">
                    <p class="results-block__label">Support tickets per month</p>
                    <p class="results-block__values">
                        <span class="results-block__before"><span class="sr-only">Before: </span>4,200</span>
                        <span class="results-block__arrow" aria-hidden="true">→</span>
                        <strong class="results-block__after"><span class="sr-only">After: </span>2,800</strong>
                    </p>
                    <p class="results-block__change results-block__change--down">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
                        <span><span class="sr-only">Down </span>33%</span>
                    </p>
                    <p class="results-block__text">Fewer “where is my…” questions after the new navigation.</p>
                </li>
                <li class="results-block__item">
                    <p class="results-block__label">App store rating</p>
                    <p class="results-block__values">
                        <span class="results-block__before"><span class="sr-only">Before: </span>3.6</span>
                        <span class="results-block__arrow" aria-hidden="true">→</span>
                        <strong class="results-block__after"><span class="sr-only">After: </span>4.8</strong>
                    </p>
                    <p class="results-block__change results-block__change--up">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
                        <span><span class="sr-only">Up </span>1.2</span>
                    </p>
                    <p class="results-block__text">The best rated banking app in the country.</p>
                </li>
                <li class="results-block__item">
                    <p class="results-block__label">Monthly active users</p>
                    <p class="results-block__values">
                        <span class="results-block__before"><span class="sr-only">Before: </span>310k</span>
                        <span class="results-block__arrow" aria-hidden="true">→</span>
                        <strong class="results-block__after"><span class="sr-only">After: </span>402k</strong>
                    </p>
                    <p class="results-block__change results-block__change--up">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
                        <span><span class="sr-only">Up </span>30%</span>
                    </p>
                    <p class="results-block__text">People open the app instead of calling the branch.</p>
                </li>
                <li class="results-block__item">
                    <p class="results-block__label">Screen reader issues</p>
                    <p class="results-block__values">
                        <span class="results-block__before"><span class="sr-only">Before: </span>86</span>
                        <span class="results-block__arrow" aria-hidden="true">→</span>
                        <strong class="results-block__after"><span class="sr-only">After: </span>0</strong>
                    </p>
                    <p class="results-block__change results-block__change--down">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
                        <span><span class="sr-only">Down </span>86</span>
                    </p>
                    <p class="results-block__text">Audited and fixed, then kept at zero with tests.</p>
                </li>
            </ul>
            <p class="results-block__note">Measured by Fjord Bank, comparing Q1 2025 with Q2 2025.</p>
        </div>
    </div>
</section>