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

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

  export let testimonials: TestimonialContent[];
  export let eyebrow = '30+ five-star reviews';
  export let heading = 'What owners notice first';
  export let blurb = 'Happier dogs. Calmer evenings. A routine that feels easier to trust and easier to keep.';
  export let testimonialsHref = '/testimonials';
  export let googleReviewsHref = 'https://g.page/r/CUsvrWPhkYrAEB0/';
  export let seedKey = '';

  type TestimonialSlide = TestimonialContent & { imageUrl: string };

  const wordpressTestimonials: Record<string, TestimonialSlide> = {
    Kate: {
      reviewer: 'Kate',
      detail: "Archie's mum",
      quote:
        'Love Aless! She is so amazing with my slightly hyper and anxious dog. She is great with communication if anything on either of our ends need to change. Archie love his walks, and I love the photos she posts of him.',
      imageUrl: '/images/archie-auckland-dog-walking-review.jpg'
    },
    Estelle: {
      reviewer: 'Estelle',
      detail: "Monty's mum",
      quote:
        'GoodWalk was the best dog walking service for my little pooch ! Aless was very helpful - basically doubled as a second mum to Monty. She always provided feedback on his outings and assisted where possible with any additional training that she felt he could work on and made recommendations where necessary which i feel is what every dog mum wants and needs!',
      imageUrl: '/images/monty-auckland-dog-walking-review.jpg'
    },
    Ross: {
      reviewer: 'Ross',
      detail: "Otis's dad",
      quote:
        'Truly the best dog walker in Auckland! I feel so lucky to have found Aless and my little terrier Otis absolutely adores her. He enjoys his regular weekly walks and always comes back happy & tired. Love the updates on social media so I can see how my dog is enjoying his day! Aless makes logistics so easy too. Highly highly recommend, there’s a reason she has 5 stars!',
      imageUrl: '/images/otis-auckland-dog-walking-review.jpg'
    },
    Nina: {
      reviewer: 'Nina',
      detail: "Wallace's mum",
      quote:
        'Alessandra has been walking and spending time with my pup since she was 10 weeks old, coming over and doing puppy visits through to transitioning her to pack walks with her little doggo friends. I know Alassandra loves and cares for my dog as much as I do and my dog has a great time! Cant recommend enough',
      imageUrl: '/images/wallace-auckland-dog-walking-review.jpg'
    }
  };

  let activeIndex = 0;
  let paused = false;
  let inView = false;
  let prefersReducedMotion = false;
  let carouselEl: HTMLDivElement | undefined;
  let stageEl: HTMLDivElement | undefined;
  let slideSignature = '';

  $: slides = testimonials
    .map((testimonial) => wordpressTestimonials[testimonial.reviewer] ?? testimonial)
    .filter((testimonial): testimonial is TestimonialSlide => Boolean(testimonial.imageUrl));

  $: if (activeIndex >= slides.length) {
    activeIndex = 0;
  }

  $: {
    const nextSignature = `${seedKey}:${slides.map((slide) => slide.reviewer).join('|')}`;

    if (nextSignature !== slideSignature) {
      slideSignature = nextSignature;
      activeIndex = getSeededTestimonialIndex(slides, seedKey);
    }
  }

  function dogNameFromDetail(detail: string) {
    const match = detail.match(/^([^'’]+)/);
    return match ? match[1].trim() : '';
  }

  function testimonialAlt(testimonial: TestimonialSlide) {
    const dog = dogNameFromDetail(testimonial.detail);
    return dog
      ? `${dog}, a happy Goodwalk dog walking client in Auckland`
      : `${testimonial.reviewer}'s dog after a Goodwalk Auckland dog walk`;
  }

  function showPrevious() {
    if (!slides.length) {
      return;
    }

    activeIndex = (activeIndex - 1 + slides.length) % slides.length;
    syncMobileStage();
  }

  function showNext() {
    if (!slides.length) {
      return;
    }

    activeIndex = (activeIndex + 1) % slides.length;
    syncMobileStage();
  }

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

  async function syncMobileStage(behavior: ScrollBehavior = 'smooth') {
    if (!stageEl || !isMobileViewport()) {
      return;
    }

    await tick();
    stageEl.scrollTo({
      left: stageEl.clientWidth * activeIndex,
      behavior
    });
  }

  function handleStageScroll() {
    if (!stageEl || !isMobileViewport()) {
      return;
    }

    const nextIndex = Math.round(stageEl.scrollLeft / Math.max(stageEl.clientWidth, 1));
    if (nextIndex !== activeIndex) {
      activeIndex = nextIndex;
    }
  }

  onMount(() => {
    const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    prefersReducedMotion = motionQuery.matches;
    const onMotionChange = (event: MediaQueryListEvent) => {
      prefersReducedMotion = event.matches;
    };
    motionQuery.addEventListener('change', onMotionChange);

    const observer = carouselEl
      ? new IntersectionObserver(
          ([entry]) => {
            inView = entry.isIntersecting;
          },
          { threshold: 0.25 }
        )
      : null;

    if (observer && carouselEl) {
      observer.observe(carouselEl);
    }

    const handleResize = () => {
      syncMobileStage('auto');
    };

    window.addEventListener('resize', handleResize);
    syncMobileStage('auto');

    const interval = window.setInterval(() => {
      if (!paused && !prefersReducedMotion && inView && slides.length > 1) {
        showNext();
      }
    }, 9000);

    return () => {
      window.clearInterval(interval);
      window.removeEventListener('resize', handleResize);
      motionQuery.removeEventListener('change', onMotionChange);
      observer?.disconnect();
    };
  });
</script>

<section id="testimonials" use:reveal={{ delay: 40 }} class="reveal-block">
  <div class="testimonials-inner">
    <span class="testimonials-eyebrow">{eyebrow}</span>
    <h2 class="section-heading">{heading}</h2>
    <div class="testimonials-intro">
      <p>{blurb}</p>
    </div>

    {#if slides.length}
      <div
        bind:this={carouselEl}
        class="testimonials-carousel"
        role="region"
        aria-label="Customer testimonials"
        on:mouseenter={() => (paused = true)}
        on:mouseleave={() => (paused = false)}
        on:focusin={() => (paused = true)}
        on:focusout={() => (paused = false)}
      >
        <button
          class="testimonial-arrow testimonial-arrow-left"
          type="button"
          aria-label="Previous testimonial"
          on:click={showPrevious}
        >
          <Icon name="fas fa-chevron-left" />
        </button>

        <div bind:this={stageEl} class="testimonial-stage" on:scroll={handleStageScroll}>
          {#each slides as testimonial, index}
            <article class:testimonial-slide-active={index === activeIndex} class="testimonial-slide">
              <div class="testimonial-photo-wrap">
                <div class="testimonial-photo-frame">
                  {#if index === activeIndex}
                    {@const enhancedPhoto = getEnhancedImage(testimonial.imageUrl)}
                    {#if enhancedPhoto}
                      <enhanced:img
                        class="testimonial-photo"
                        src={enhancedPhoto}
                        alt={testimonialAlt(testimonial)}
                        loading="lazy"
                        decoding="async"
                      />
                    {:else}
                      <img
                        class="testimonial-photo"
                        src={testimonial.imageUrl}
                        alt={testimonialAlt(testimonial)}
                        loading="lazy"
                        decoding="async"
                      />
                    {/if}
                  {/if}
                </div>
              </div>

              <div class="testimonial-copy">
                <span class="testimonial-quote-mark">"</span>
                <blockquote class="testimonial-quote">{testimonial.quote}</blockquote>
                <div class="testimonial-author">
                  <span class="testimonial-author-name">{testimonial.reviewer}</span>
                  <span class="testimonial-author-detail">{testimonial.detail}</span>
                </div>

                <div class="testimonial-divider"></div>

                <div class="testimonial-mobile-controls" aria-label="Testimonial navigation">
                  <button
                    class="testimonial-arrow testimonial-arrow-inline"
                    type="button"
                    aria-label="Previous testimonial"
                    on:click={showPrevious}
                  >
                    <Icon name="fas fa-chevron-left" />
                  </button>

                  <button
                    class="testimonial-arrow testimonial-arrow-inline"
                    type="button"
                    aria-label="Next testimonial"
                    on:click={showNext}
                  >
                    <Icon name="fas fa-chevron-right" />
                  </button>
                </div>

                <a class="testimonial-google" href={googleReviewsHref} target="_blank" rel="noopener">
                  <img
                    class="testimonial-google-logo"
                    src="/images/google-g-logo.svg"
                    alt=""
                    width="18"
                    height="19"
                  />
                  <span>30+ five-star Google reviews</span>
                </a>
              </div>
            </article>
          {/each}
        </div>

        <button
          class="testimonial-arrow testimonial-arrow-right"
          type="button"
          aria-label="Next testimonial"
          on:click={showNext}
        >
          <Icon name="fas fa-chevron-right" />
        </button>
      </div>
    {/if}

    <div class="testimonials-cta-row">
      <a href={testimonialsHref} class="testimonials-cta testimonials-cta-primary">
        <Icon name="fas fa-comment-dots" />
        <span class="testimonials-cta-label-desktop">All testimonials</span>
        <span class="testimonials-cta-label-mobile">Testimonials</span>
      </a>
      <a href={googleReviewsHref} target="_blank" rel="noopener" class="testimonials-cta testimonials-cta-secondary">
        <img class="testimonials-cta-logo" src="/images/google-g-logo.svg" alt="" width="16" height="17" />
        <span class="testimonials-cta-label-desktop">Google reviews</span>
        <span class="testimonials-cta-label-mobile">Google</span>
      </a>
    </div>

  </div>
</section>

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

  .testimonials-intro {
    max-width: 760px;
    margin: 18px auto 0;
    text-align: center;
  }

  .testimonials-intro p {
    margin: 0;
    color: #4c5056;
    font-size: var(--body-lead-size);
    line-height: 1.65;
  }

  .testimonials-cta-row {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    gap: 12px;
    margin: 22px auto 0;
  }

  .testimonials-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 999px;
    flex-shrink: 0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition:
      transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.2s ease,
      box-shadow 0.2s ease;
  }

  .testimonials-cta-primary {
    background: var(--gw-green);
    color: #fff;
    box-shadow: 0 10px 24px rgba(33, 48, 33, 0.16);
  }

  .testimonials-cta-secondary {
    background: rgba(33, 48, 33, 0.06);
    color: var(--gw-green);
    box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
  }

  .testimonials-cta-logo {
    flex: 0 0 auto;
  }

  .testimonials-cta-label-mobile {
    display: none;
  }

  @media (hover: hover) {
    .testimonials-cta:hover {
      transform: translateY(-2px);
    }

    .testimonials-cta-primary:hover {
      box-shadow: 0 14px 30px rgba(33, 48, 33, 0.2);
    }

    .testimonials-cta-secondary:hover {
      background: rgba(33, 48, 33, 0.09);
      box-shadow:
        inset 0 0 0 1px rgba(17, 20, 24, 0.06),
        0 10px 22px rgba(17, 20, 24, 0.08);
    }

  }

  .testimonials-carousel {
    position: relative;
    margin-top: 48px;
    padding: 0 38px;
  }

  @media (max-width: 768px) {
    .testimonials-eyebrow {
      margin-bottom: 8px;
      padding: 6px 10px;
      font-size: 11px;
    }

    .testimonials-intro {
      margin-top: 14px;
    }

    .testimonials-intro p {
      font-size: var(--body-lead-size-mobile);
      line-height: 1.55;
    }

    .testimonials-cta-row {
      gap: 8px;
      margin-top: 16px;
    }

    .testimonials-cta {
      min-height: 38px;
      padding: 8px 10px;
      font-size: 11px;
      gap: 7px;
    }

    .testimonials-cta-label-desktop {
      display: none;
    }

    .testimonials-cta-label-mobile {
      display: inline;
    }
  }

  .testimonial-arrow {
    transition:
      transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.2s ease,
      background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  @media (hover: hover) {
    .testimonial-arrow:hover {
      transform: translateY(-50%) scale(1.05);
      box-shadow: 0 14px 28px rgba(17, 20, 24, 0.12);
    }
  }

  .testimonial-arrow:active {
    transform: translateY(-50%) scale(0.95);
  }

  :global(.reveal-ready.reveal-block) {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance, 24px), 0);
    transition:
      opacity 0.55s ease,
      transform 0.7s 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);
  }

  .testimonial-stage {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 24, 20, 0.06);
    min-height: 620px;
  }

  .testimonial-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.35s ease,
      transform 0.35s ease;
    transform: translateX(18px);
  }

  .testimonial-slide-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .testimonial-photo-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 24px 0 24px;
  }

  .testimonial-photo-frame {
    width: min(100%, 340px);
  }

  .testimonial-photo {
    display: block;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .testimonial-copy {
    align-self: start;
    padding: 118px 112px 76px 10px;
  }

  .testimonial-quote-mark {
    display: block;
    font-family: Georgia, serif;
    font-size: 72px;
    line-height: 0.6;
    color: var(--yellow);
    margin-bottom: 20px;
    user-select: none;
  }

  .testimonial-copy .testimonial-quote {
    max-width: 500px;
    margin: 0;
    font-size: 17px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    color: #2e3031;
  }

  .testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
  }

  .testimonial-author-name {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
  }

  .testimonial-author-detail {
    font-size: 14px;
    color: #6b7280;
  }

  .testimonial-author-detail::before {
    content: '—';
    margin-right: 6px;
  }

  .testimonial-divider {
    width: 100%;
    max-width: 690px;
    height: 1px;
    margin: 44px 0 0;
    background: #e7e7e7;
  }

  .testimonial-google {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #f8f8f8;
    color: #0a304e;
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    box-shadow: 0 0 0 1px rgba(10, 48, 78, 0.06);
  }

  .testimonial-google-logo {
    width: 18px;
    height: 19px;
    flex: 0 0 auto;
  }

  .testimonial-google:hover {
    background: #efe6d5;
  }

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

  .testimonial-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    font-size: 22px;
    transform: translateY(-50%);
    box-shadow: 0 12px 28px rgba(20, 24, 20, 0.07);
  }

  .testimonial-arrow:hover {
    background: #fff;
  }

  .testimonial-arrow-left {
    left: 0;
  }

  .testimonial-arrow-right {
    right: 0;
  }

  @media (max-width: 1024px) {
    .testimonial-stage {
      min-height: 560px;
    }

    .testimonial-photo-wrap {
      padding: 88px 16px 64px 44px;
    }

    .testimonial-copy {
      padding: 96px 72px 64px 8px;
    }

    .testimonial-copy .testimonial-quote {
      max-width: 460px;
      font-size: 17px;
    }

  }

  @media (max-width: 767px) {
    .testimonials-carousel {
      margin-top: 26px;
      padding: 0;
    }

    .testimonial-stage {
      min-height: unset;
      display: flex;
      padding-bottom: 0;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .testimonial-stage::-webkit-scrollbar {
      display: none;
    }

    .testimonial-slide {
      position: relative;
      display: grid;
      flex: 0 0 100%;
      grid-template-columns: 1fr;
      opacity: 1;
      pointer-events: auto;
      transform: none;
      scroll-snap-align: start;
    }

    .testimonial-slide-active {
      display: grid;
    }

    .testimonial-photo-wrap {
      justify-content: center;
      padding: 34px 20px 12px;
    }

    .testimonial-photo-frame {
      width: min(100%, 220px);
    }

    .testimonial-photo {
      aspect-ratio: 1 / 1;
    }

    .testimonial-copy {
      padding: 4px 24px 24px;
      align-self: start;
    }

    .testimonial-quote-mark {
      font-size: 44px;
      margin-bottom: 8px;
    }

    .testimonial-copy .testimonial-quote {
      font-size: 16px;
      line-height: 1.55;
    }

    .testimonial-divider {
      margin-top: 28px;
    }

    .testimonial-mobile-controls {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      gap: 12px;
      margin-top: 16px;
    }

    .testimonial-arrow-inline {
      position: static;
      width: 46px;
      height: 46px;
      border: none;
      border-radius: 50%;
      background: rgba(33, 48, 33, 0.08);
      color: var(--gw-green);
      font-size: 18px;
      transform: none;
      box-shadow: none;
    }

    .testimonial-arrow-inline:active {
      transform: scale(0.95);
    }

    .testimonial-google {
      margin-top: 16px;
      font-size: 16px;
      gap: 10px;
      padding: 10px 14px;
    }

    .testimonial-google :global(.icon) {
      font-size: 20px;
    }

    .testimonial-arrow-left,
    .testimonial-arrow-right {
      display: none;
    }
  }
</style>