gw-svelte/src/lib/components/ValuesSection.svelte

<script lang="ts">
  import { onMount, tick } from 'svelte';
  import Icon from '$lib/components/Icon.svelte';
  import type { IconCard } from '$lib/types';

  export let values: IconCard[];
  let valuesScroller: HTMLDivElement | undefined;

  $: orderedValues = values
    .map((value, index) => ({ value, index }))
    .sort((a, b) => {
      const aOrder = a.value.order ?? Number.POSITIVE_INFINITY;
      const bOrder = b.value.order ?? Number.POSITIVE_INFINITY;

      if (aOrder !== bOrder) {
        return aOrder - bOrder;
      }

      return a.index - b.index;
    })
    .map(({ value }) => value);

  function isMobileViewport() {
    return typeof window !== 'undefined' && window.innerWidth <= 768;
  }

  async function scrollValues(direction: 1 | -1) {
    if (!valuesScroller || !isMobileViewport()) {
      return;
    }

    const firstCard = valuesScroller.querySelector<HTMLElement>('.value-card');
    if (!firstCard) {
      return;
    }

    const cardStyle = window.getComputedStyle(valuesScroller);
    const gap = Number.parseFloat(cardStyle.columnGap || cardStyle.gap || '0') || 0;
    const step = firstCard.offsetWidth + gap;

    await tick();
    valuesScroller.scrollBy({ left: direction * step, behavior: 'smooth' });
  }

  onMount(() => {
    if (!valuesScroller || !isMobileViewport()) {
      return;
    }

    valuesScroller.scrollTo({ left: 0, behavior: 'auto' });
  });
</script>

<section id="values">
  <div class="values-inner">
    <span class="values-eyebrow">Why owners stay</span>
    <h2 class="section-heading">Calmer dogs. Clearer routines. Less worry.</h2>
    <p class="values-intro">
      Everything is designed to make life easier for busy Auckland dog owners and safer, happier for the dogs in our care.
    </p>

    <div class="values-shell">
      <div bind:this={valuesScroller} class="values-grid">
        {#each orderedValues as value}
          <div class="value-card">
            <div class="value-icon-wrap">
              <Icon name={value.icon} className="value-card-icon" />
            </div>
            <div class="value-text">
              <h3>{value.title}</h3>
              <p>{value.body}</p>
            </div>
          </div>
        {/each}
      </div>

      <div class="values-mobile-controls" aria-label="Value cards navigation">
        <button type="button" class="values-mobile-button" aria-label="Previous value" on:click={() => scrollValues(-1)}>
          <Icon name="fas fa-chevron-left" />
        </button>
        <button type="button" class="values-mobile-button" aria-label="Next value" on:click={() => scrollValues(1)}>
          <Icon name="fas fa-chevron-right" />
        </button>
      </div>
    </div>
  </div>
</section>

<style>
  .values-eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--yellow);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .values-intro {
    max-width: 760px;
    margin: 18px auto 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.65;
  }

  .values-mobile-controls {
    display: none;
  }

  @media (max-width: 768px) {
    .values-shell {
      margin-top: 32px;
    }

    .values-grid {
      grid-auto-flow: column;
      grid-auto-columns: minmax(272px, 84vw);
      grid-template-columns: none;
      gap: 14px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      scroll-padding-left: 24px;
      padding: 0 24px 8px 0;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .values-grid::-webkit-scrollbar {
      display: none;
    }

    .values-mobile-controls {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 16px;
    }

    .values-mobile-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .value-card {
      min-height: 100%;
      padding: 24px 22px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.05);
      scroll-snap-align: start;
    }

    .value-card:nth-child(odd) {
      border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .values-eyebrow {
      margin-bottom: 8px;
      padding: 6px 10px;
      font-size: 11px;
    }

    .values-intro {
      margin-top: 14px;
      font-size: 15px;
      line-height: 1.55;
    }
  }

  @media (hover: hover) {
    .values-mobile-button:hover {
      background: rgba(255, 255, 255, 0.18);
    }
  }

  .values-mobile-button:active {
    transform: scale(0.95);
  }
</style>