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

<script lang="ts">
  import { reveal } from '$lib/actions/reveal';
  import { getEnhancedImage } from '$lib/enhanced-images';
  import Icon from '$lib/components/Icon.svelte';
  import type { IconCard } from '$lib/types';

  export let values: IconCard[];
  const stakes = [
    {
      label: 'Without the right routine',
      title: 'By the end of the day, everything feels harder than it should.',
      body:
        'Your dog still has energy to burn, you are carrying guilt through the workday, and home does not feel as calm as it could.',
      points: [
        'A dog who is restless, wired, or harder to settle at home',
        'A workday shaped by guilt, logistics, and wondering how they are doing',
        'Too much uncertainty around who is picking up your dog and what the walk will be like'
      ],
      footer: 'The walk is not really the point. The evening is.'
    },
    {
      label: 'With Goodwalk',
      title: 'A good walk changes you & your dogs whole evening.',
      body:
        'Your dog comes home happier, the routine feels lighter, and you are not spending the day second-guessing whether they are okay.',
      points: [
        'A walker your dog recognises and is happy to see at the door',
        'Small-group or one-on-one care that genuinely suits your dog',
        'Clear updates, calmer evenings, and one less thing sitting on your mind'
      ],
      footer: 'That is what people are really buying: peace of mind, routine, and a dog who feels cared for.'
    }
  ];
  const clientPhotos = [
    {
      imageUrl: '/images/goodwalk-client-dogs-mt-cecila-auckland.webp',
      alt: 'Two happy Goodwalk client dogs out on a walk in Auckland',
      name: 'Happy clients at Mt Cecila',
      detail: ''
    },
    {
      imageUrl: '/images/goodwalk-tiny-gang-pack-walk-auckland.webp',
      alt: 'Goodwalk Tiny Gang dogs together on a walk in Auckland',
      name: 'The Tiny Gang on a pack walk',
      detail: ''
    },
    {
      imageUrl: '/images/goodwalk-tiny-gang-mt-albert-park-auckland.webp',
      alt: 'Goodwalk dogs together at Mt Albert Park in Auckland',
      name: 'Distinguished crew at Mt Albert park',
      detail: ''
    },
    {
      imageUrl: '/images/goodwalk-dogs-group-outing-auckland.webp',
      alt: 'Otis enjoying his Goodwalk routine in Auckland',
      name: 'Otis',
      detail: 'regular weekly walks'
    },
    {
      imageUrl: '/images/goodwalk-tiny-gang-finishing-walk-suv-auckland.webp',
      alt: 'Tiny Gang Pack finishing up after a walk',
      name: 'Tiny Gang heading home',
      detail: ''
    }
  ];

  $: clientPhotoCards = clientPhotos.map((photo) => ({
    ...photo,
    enhanced: getEnhancedImage(photo.imageUrl)
  }));

  $: 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);
</script>

<section id="values" use:reveal={{ delay: 30 }} class="reveal-block">
  <div class="values-inner">
    <div class="section-header">
      <span class="eyebrow values-eyebrow">Why people come to us</span>
      <h2 class="section-heading">Calmer dogs. Better routines. The Tiny Gang effect.</h2>
      <p class="section-intro values-intro">
        Goodwalk was created for busy owners who want reliable, relationship-led care their dog genuinely looks forward to.
      </p>
    </div>

    <div class="values-photo-grid" aria-label="Goodwalk client dogs">
      {#each clientPhotoCards as photo, index}
        <figure class:values-photo-card-featured={index === 0} class="values-photo-card">
          {#if photo.enhanced}
            <enhanced:img
              class="values-photo-image"
              src={photo.enhanced}
              alt={photo.alt}
              loading="lazy"
              decoding="async"
            />
          {:else}
            <img
              class="values-photo-image"
              src={photo.imageUrl}
              alt={photo.alt}
              loading="lazy"
              decoding="async"
            />
          {/if}
          <figcaption class:values-photo-caption-solo={!photo.detail} class="values-photo-caption">
            <span class="values-photo-name">{photo.name}</span>
            {#if photo.detail}
              <span class="values-photo-detail">{photo.detail}</span>
            {/if}
          </figcaption>
        </figure>
      {/each}
    </div>

    <div class="values-bento values-contrast">
      {#each stakes as stake, index}
        <article class:values-contrast-cell-good={index === 1} class="values-contrast-cell">
          <div class="values-contrast-head">
            <span class:values-contrast-label-good={index === 1} class="values-contrast-label">
              {stake.label}
            </span>
            <span class="values-contrast-num">0{index + 1}</span>
          </div>
          <h3>{stake.title}</h3>
          <p class="values-contrast-body">{stake.body}</p>
          <ul class="values-contrast-list">
            {#each stake.points as point}
              <li>
                <span class="values-contrast-bullet">
                  <Icon
                    name={index === 1 ? 'fas fa-check' : 'fas fa-minus'}
                    className="values-contrast-glyph"
                  />
                </span>
                <span>{point}</span>
              </li>
            {/each}
          </ul>
          <p class="values-contrast-footer">{stake.footer}</p>
        </article>
      {/each}
    </div>

    <div class="values-points-header">
      <span class="eyebrow values-eyebrow">What we stand for</span>
      <h3 class="values-points-title">The values behind every walk</h3>
      <p class="values-points-intro">
        Kind handling, small groups, proper safety training, and honest communication — not extras, just how Goodwalk works.
      </p>
    </div>

    <div class="values-bento values-points">
      {#each orderedValues as value}
        <div class="values-point">
          <div class="values-point-icon">
            <Icon name={value.icon} className="values-point-glyph" />
          </div>
          <h3>{value.title}</h3>
          <p>{value.body}</p>
        </div>
      {/each}
    </div>
  </div>
</section>

<style>
  /* Minimalist, grid-based layout (hairline "bento" cells) with Goodwalk
     brand colour carried through the icons and the "With Goodwalk" cell. */
  #values {
    position: relative;
    color: var(--text);
  }

  .values-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--space-container-x);
  }

  .values-inner .section-heading {
    color: var(--text-heading);
    text-align: center;
  }

  .values-eyebrow {
    width: fit-content;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-brand-soft);
    box-shadow: var(--shadow-inset-strong);
  }

  .values-intro {
    max-width: 720px;
  }

  /* ── Client photo gallery ── */
  .values-photo-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr 0.9fr;
    grid-template-rows: repeat(2, clamp(170px, 18vw, 240px));
    gap: 16px;
    margin-top: 32px;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  .values-photo-card {
    position: relative;
    overflow: hidden;
    min-height: 0;
    border-radius: var(--radius-xl);
    background: var(--beige);
    box-shadow:
      var(--shadow-inset-soft),
      var(--shadow-card);
  }

  .values-photo-card-featured {
    grid-row: 1 / span 2;
  }

  .values-photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (hover: hover) {
    .values-photo-card:hover .values-photo-image {
      transform: scale(1.06);
    }
  }

  .values-photo-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.92));
    box-shadow:
      var(--shadow-inset-soft),
      var(--shadow-card);
  }

  .values-photo-caption-solo {
    justify-content: center;
    text-align: center;
  }

  .values-photo-name,
  .values-photo-detail {
    display: block;
  }

  .values-photo-name {
    color: var(--text-heading);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
  }

  .values-photo-detail {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.3;
    text-align: right;
  }

  /* ── Bento container: hairline grid via 1px gaps over a line-coloured base ── */
  .values-bento {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    gap: 1px;
    background: rgba(var(--ink-rgb), 0.06);
    border: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-panel-strong);
  }

  /* ── Before / after contrast ── */
  .values-contrast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 36px;
  }

  .values-contrast-cell {
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-8);
    background: var(--surface-panel);
  }

  .values-contrast-cell-good {
    background: var(--gw-green);
  }

  .values-contrast-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
  }

  .values-contrast-label {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(var(--ink-rgb), 0.05);
    color: var(--text-muted);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .values-contrast-label-good {
    background: var(--yellow);
    color: var(--gw-green);
  }

  .values-contrast-num {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: rgba(var(--ink-rgb), 0.22);
    letter-spacing: 0.04em;
  }

  .values-contrast-cell h3 {
    margin: 0 0 12px;
    font-family: var(--font-head);
    font-size: clamp(20px, 1.9vw, 25px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--text-heading);
  }

  .values-contrast-body {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
  }

  .values-contrast-list {
    display: grid;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
  }

  .values-contrast-list li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 13px 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
  }

  .values-contrast-list li + li {
    border-top: 1px solid var(--border-muted);
  }

  .values-contrast-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }

  .values-contrast-list :global(.values-contrast-glyph) {
    font-size: 10px;
    color: var(--text-muted);
  }

  .values-contrast-cell-good .values-contrast-bullet {
    border-radius: 50%;
    background: var(--yellow);
  }

  .values-contrast-cell-good .values-contrast-list :global(.values-contrast-glyph) {
    font-size: 9px;
    color: var(--gw-green);
  }

  .values-contrast-footer {
    margin: auto 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--border-muted);
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
  }

  .values-contrast-cell-good .values-contrast-footer {
    border-top-color: rgba(255, 255, 255, 0.18);
    color: var(--yellow);
  }

  /* Light text for the gw-green "With Goodwalk" cell */
  .values-contrast-cell-good h3 {
    color: var(--text-inverse);
  }

  .values-contrast-cell-good .values-contrast-num {
    color: rgba(var(--white-rgb), 0.4);
  }

  .values-contrast-cell-good .values-contrast-body {
    color: var(--text-inverse-muted);
  }

  .values-contrast-cell-good .values-contrast-list li {
    color: rgba(var(--white-rgb), 0.9);
  }

  .values-contrast-cell-good .values-contrast-list li + li {
    border-top-color: var(--border-inverse-strong);
  }

  /* ── Values points header ── */
  .values-points-header {
    margin-top: 52px;
    text-align: center;
  }

  .values-points-title {
    max-width: 19ch;
    margin: 12px auto 0;
    font-family: var(--font-head);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: var(--text-heading);
  }

  .values-points-intro {
    max-width: 560px;
    margin: 14px auto 0;
    color: var(--text-muted);
    font-size: var(--body-copy-size);
    line-height: 1.65;
  }

  /* ── Values points ── */
  .values-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 26px;
    box-shadow: var(--shadow-panel-elevated);
  }

  .values-point {
    display: flex;
    flex-direction: column;
    padding: var(--space-7) var(--space-7);
    background: var(--surface-panel);
    transition: background 0.18s ease;
  }

  @media (hover: hover) {
    .values-point:hover {
      background: var(--surface-panel-warm);
    }
  }

  .values-point-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    border-radius: var(--radius-sm);
    background: var(--gw-green);
    box-shadow: var(--shadow-badge);
  }

  .values-point-icon :global(.values-point-glyph) {
    font-size: 17px;
    color: var(--yellow);
  }

  .values-point h3 {
    margin: 0 0 9px;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-heading);
  }

  .values-point p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
  }

  @media (min-width: 1600px) {
    .values-photo-grid,
    .values-bento {
      max-width: 1180px;
    }
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .values-inner {
      padding: 0 var(--space-container-x-mobile);
    }

    .values-intro {
      max-width: 32ch;
    }

    .values-eyebrow {
      padding: 6px 10px;
      font-size: 12px;
      letter-spacing: 0.06em;
    }

    .values-photo-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto;
      gap: 10px;
      margin-top: 22px;
    }

    .values-photo-card {
      grid-row: auto;
      min-height: 178px;
      border-radius: var(--radius-lg);
    }

    .values-photo-card-featured {
      grid-column: 1 / -1;
      grid-row: auto;
      min-height: 240px;
      border-radius: var(--radius-lg);
    }

    .values-photo-caption {
      left: 10px;
      right: 10px;
      bottom: 10px;
      display: grid;
      justify-content: start;
      align-items: start;
      gap: 3px;
      padding: 10px 11px;
      border-radius: var(--radius-md);
    }

    .values-photo-caption-solo {
      justify-content: center;
      text-align: center;
    }

    .values-photo-name {
      font-size: 12px;
      line-height: 1.15;
    }

    .values-photo-detail {
      font-size: 11px;
      line-height: 1.25;
      line-clamp: 2;
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .values-bento {
      border-radius: var(--radius-md);
    }

    .values-contrast {
      grid-template-columns: 1fr;
      margin-top: 26px;
    }

    .values-contrast-cell {
      padding: 26px 22px;
    }

    .values-contrast-body {
      font-size: var(--body-copy-size-mobile);
      line-height: 1.6;
    }

    .values-contrast-list li {
      font-size: var(--body-copy-size-mobile);
      line-height: 1.45;
    }

    .values-points-header {
      margin-top: 30px;
    }

    .values-points-title {
      max-width: 16ch;
      font-size: clamp(22px, 6.4vw, 27px);
    }

    .values-points-intro {
      max-width: 36ch;
      font-size: var(--body-lead-size-mobile);
      line-height: 1.55;
    }

    .values-points {
      grid-template-columns: 1fr;
      margin-top: 20px;
    }

    .values-point {
      padding: 26px 22px;
    }
  }

  /* ── Reveal ── */
  :global(.reveal-ready.reveal-block) {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance, 16px), 0);
    transition:
      opacity var(--motion-reveal-opacity, 0.3s ease),
      transform var(--motion-reveal-transform, 0.45s cubic-bezier(0.2, 0.8, 0.2, 1));
    transition-delay: var(--reveal-delay, 0ms);
  }

  :global(.reveal-visible.reveal-block) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
</style>