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

<script lang="ts">
  import { onMount } from 'svelte';
  import { reveal } from '$lib/actions/reveal';
  import Icon from '$lib/components/Icon.svelte';
  import { getImageMetadata } from '$lib/image-metadata';
  import type { TestimonialContent } from '$lib/types';

  export let testimonials: TestimonialContent[];
  export let eyebrow = '30+ five-star reviews';
  export let heading = 'Proof your dog is in good hands';
  export let blurb = 'Peace of mind for busy Auckland dog owners. Happier dogs, smoother routines, and a team owners trust with the important stuff.';
  export let instagramHref = 'https://www.instagram.com/goodwalk.nz/';
  export let instagramLabel = 'goodwalk.nz';

  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.png'
    },
    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.png'
    },
    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.png'
    },
    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.png'
    }
  };

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

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

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

  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;
  }

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

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

  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 interval = window.setInterval(() => {
      if (!paused && !prefersReducedMotion && inView && slides.length > 1) {
        showNext();
      }
    }, 9000);

    return () => {
      window.clearInterval(interval);
      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 class="testimonial-stage">
          <div class="testimonial-woof" aria-hidden="true">
            <span class="testimonial-woof-text">WOOF</span>
            <span class="testimonial-ray testimonial-ray-1"></span>
            <span class="testimonial-ray testimonial-ray-2"></span>
            <span class="testimonial-ray testimonial-ray-3"></span>
          </div>

          {#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 imageMeta = getImageMetadata(testimonial.imageUrl)}
                    <img
                      class="testimonial-photo"
                      src={testimonial.imageUrl}
                      alt={testimonialAlt(testimonial)}
                      width={imageMeta?.width}
                      height={imageMeta?.height}
                      loading="lazy"
                      decoding="async"
                    />
                  {/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="https://g.page/r/CUsvrWPhkYrAEB0/"
                  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}

    <a href={instagramHref} target="_blank" rel="noopener" class="testimonials-instagram-link">
      <Icon name="fab fa-instagram" />
      <span>{instagramLabel}</span>
    </a>
  </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: 17px;
    line-height: 1.65;
  }

  .testimonials-instagram-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    margin: 18px auto 0;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.06);
    color: var(--gw-green);
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
    transition:
      transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.2s ease,
      box-shadow 0.2s ease;
  }

  :global(.testimonials-instagram-link .icon) {
    font-size: 18px;
  }

  @media (hover: hover) {
    .testimonials-instagram-link:hover {
      transform: translateY(-2px);
      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-instagram-link:active {
    transform: translateY(1px) scale(0.985);
  }

  .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: 15px;
      line-height: 1.55;
    }

    .testimonials-instagram-link {
      margin: 14px auto 0;
      padding: 9px 14px;
      font-size: 15px;
    }
  }

  .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-size: 14px;
    line-height: 1.3;
    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-woof {
    position: absolute;
    top: 40px;
    right: 60px;
    z-index: 2;
    color: #2e3031;
    transform: rotate(-6deg);
    transform-origin: center center;
  }

  .testimonial-woof-text {
    display: inline-block;
    font-family: 'Fredoka One', var(--font-head), sans-serif;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .testimonial-ray {
    position: absolute;
    border-radius: 999px;
    background: #ffd100;
  }

  .testimonial-ray-1 {
    top: -12px;
    right: -48px;
    width: 32px;
    height: 11px;
    transform: rotate(-35deg);
  }

  .testimonial-ray-2 {
    top: 6px;
    right: -60px;
    width: 46px;
    height: 13px;
    transform: rotate(-35deg);
  }

  .testimonial-ray-3 {
    top: 24px;
    right: -50px;
    width: 36px;
    height: 11px;
    transform: rotate(-35deg);
  }

  .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;
    }

    .testimonial-woof {
      right: 40px;
    }
  }

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

    .testimonial-stage {
      min-height: unset;
      padding-bottom: 0;
    }

    .testimonial-slide {
      position: relative;
      display: none;
      grid-template-columns: 1fr;
      transform: none;
    }

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

    .testimonial-photo-wrap {
      justify-content: center;
      padding: 48px 22px 16px;
    }

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

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

    .testimonial-copy {
      padding: 8px 28px 32px;
      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;
      gap: 12px;
      margin-top: 20px;
    }

    .testimonial-arrow-inline {
      position: static;
      width: 48px;
      height: 48px;
      font-size: 18px;
      transform: none;
      box-shadow: 0 10px 22px rgba(20, 24, 20, 0.08);
    }

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

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

    .testimonial-woof {
      top: 24px;
      right: 22px;
    }

    .testimonial-woof-text {
      font-size: 22px;
    }

    .testimonial-ray {
      right: -28px;
      width: 9px;
    }

    .testimonial-ray-1 {
      top: -7px;
      height: 34px;
    }

    .testimonial-ray-2 {
      top: 10px;
      right: -38px;
      width: 34px;
      height: 9px;
    }

    .testimonial-ray-3 {
      top: 35px;
      right: -28px;
      width: 27px;
      height: 8px;
    }

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