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

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

  export let services: IconCard[];
  export let heading = 'Choose the walk style that suits your dog best.';
  export let intro =
    'Dogs are social creatures. The Tiny Gang gives them their own little friendship group: older dogs guide the younger ones, playful dogs burn energy together, and everyone comes home happy, tired, and fulfilled. All the fun of doggy daycare, without the huge groups or price tag.';

  const sharedPromises = [
    'Familiar walkers',
    'Small-scale care',
    'Reliable pickup & drop-off',
    'Updates you will actually want'
  ];

  // Lightweight presentation metadata — the card only needs to say *what*
  // each service is before the visitor opens the full service page.
  const serviceMeta: Record<
    string,
    {
      eyebrow: string;
      featured?: boolean;
      imageUrl: string;
      imageAlt: string;
      lead: string;
      cues: string[];
    }
  > = {
    'Tiny Gang Pack Walks': {
      eyebrow: 'Good Walk Signature',
      featured: true,
      imageUrl: '/images/goodwalk-tiny-gang-pack-walk-small-dogs-auckland.webp',
      imageAlt: 'Small dogs together on a Tiny Gang pack walk',
      lead: 'The Tiny Gang is built for dogs who love company, big adventures, and coming home happily worn out!',
      cues: ['4-8 dogs', 'Pickup & drop-off', 'Tiny Gang matching']
    },
    'Solo Walks': {
      eyebrow: 'Tailored support',
      imageUrl: '/images/goodwalk-brown-curly-dog-one-on-one-walk-auckland.webp',
      imageAlt: 'Dog enjoying a one-on-one walk',
      lead: 'For nervous dogs, senior dogs, and little personalities who do better with extra attention.',
      cues: ['Solo focus', 'Custom pace', 'Confidence building']
    },
    'Puppy Visits': {
      eyebrow: 'Building Blocks For The Tiny Gang',
      imageUrl: '/images/goodwalk-puppy-visit-cavalier-king-charles-spaniel-auckland.webp',
      imageAlt: 'Puppy during a calm home visit',
      lead: 'Early puppy visits designed to build confidence, routine, and good habits before Tiny Gang adventures begin!',
      cues: ['Home visits', 'Routine support', 'Play & company']
    }
  };

  $: orderedServices = services
    .map((service, index) => ({ service, index }))
    .sort((a, b) => {
      const aFeatured = serviceMeta[a.service.title]?.featured ? 0 : 1;
      const bFeatured = serviceMeta[b.service.title]?.featured ? 0 : 1;

      if (aFeatured !== bFeatured) {
        return aFeatured - bFeatured;
      }

      return a.index - b.index;
    })
    .map(({ service }) => service);
</script>

<section id="services" use:reveal={{ delay: 20 }} class="reveal-block">
  <div class="services-inner">
    <div class="section-header">
      <h2 class="section-heading">{heading}</h2>
      <p class="section-intro services-intro">{intro}</p>
    </div>

  

    <div class="services-grid">
      {#each orderedServices as service}
        {@const meta = serviceMeta[service.title]}
        <a
          href={service.href}
          class:service-card-featured={meta?.featured}
          class="service-card"
          aria-label={`${service.title} — view service page`}
        >
          <div class="service-card-media">
            {#if meta}
              <img src={meta.imageUrl} alt={meta.imageAlt} loading="lazy" decoding="async" />
            {/if}
          </div>

          <div class="service-card-body">
            <span class="service-card-emblem">
              <Icon name={service.icon} className="service-card-emblem-glyph" />
            </span>

            {#if meta?.eyebrow}
              <span class="service-card-eyebrow">{meta.eyebrow}</span>
            {/if}
            <h3>{service.title}</h3>
            <p>{meta?.lead ?? service.body}</p>

            {#if meta?.cues?.length}
              <div class="service-card-cues">
                {#each meta.cues as cue}
                  <span class="service-card-cue">{cue}</span>
                {/each}
              </div>
            {/if}

            <span class="service-card-cta">
              More info
              <Icon name="fas fa-arrow-right" className="service-card-cta-arrow" />
            </span>
          </div>
        </a>
      {/each}
    </div>
  </div>
</section>

<style>
  .services-inner {
    max-width: min(1180px, calc(var(--max-w) - 40px));
    margin: 0 auto;
  }

  .section-header {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.85fr);
    align-items: start;
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 14px;
    text-align: left;
  }

  .section-header .section-heading {
    max-width: 22ch;
    text-align: left;
  }

  .section-header .section-intro {
    margin: 0;
    padding-top: 14px;
    max-width: 44ch;
    justify-self: end;
    text-align: left;
    line-height: 1.72;
    color: var(--text-heading-soft, var(--text-muted));
  }

  /* ── Section intro ── */
  .services-intro {
    max-width: 34ch;
  }

  /* ── Service cards ── */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
    margin-top: 40px;
  }

  .service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0;
    text-align: left;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(17, 20, 24, 0.07);
    box-shadow: 0 6px 20px rgba(17, 20, 24, 0.05);
    text-decoration: none;
    color: inherit;
    transition:
      box-shadow 0.28s ease,
      transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.28s ease;
  }

  /* Featured emphasis lives in the chrome (border + glow + emblem shine),
     not the column span — keeps all three cards visually balanced. */
  .service-card-featured {
    border-color: rgba(242, 191, 47, 0.45);
    box-shadow:
      inset 0 0 0 1px rgba(255, 209, 0, 0.22),
      0 10px 26px rgba(17, 20, 24, 0.07);
  }

  @media (hover: hover) {
    .service-card:hover {
      transform: translateY(-6px);
      border-color: rgba(33, 48, 33, 0.16);
      box-shadow: 0 22px 46px rgba(17, 20, 24, 0.13);
      filter: none;
    }

    .service-card:hover .service-card-media img {
      transform: scale(1.06);
    }

    .service-card:hover :global(.service-card-cta-arrow) {
      transform: translateX(4px);
    }

    .service-card:hover .service-card-emblem::after,
    .service-card:focus-visible .service-card-emblem::after,
    .service-card:active .service-card-emblem::after {
      animation: serviceEmblemShine 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1;
    }
  }

  .service-card:active {
    transform: translateY(-3px);
  }

  .service-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #ede4d2;
  }

  .service-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .service-card-body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 42px 26px 26px;
  }

  /* Brand emblem straddles the photo / body seam */
  .service-card-emblem {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--gw-green);
    box-shadow: 0 10px 22px rgba(33, 48, 33, 0.26);
    overflow: hidden;
  }

  .service-card-emblem :global(.service-card-emblem-glyph) {
    font-size: 22px;
    color: var(--yellow);
  }

  .service-card-emblem::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -85%;
    width: 60%;
    height: 140%;
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.18) 35%,
      rgba(255, 255, 255, 0.65) 50%,
      rgba(255, 255, 255, 0.18) 65%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(14deg);
    pointer-events: none;
    opacity: 0;
  }

  .service-card-eyebrow {
    margin-bottom: 8px;
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .service-card-body h3 {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0d1a0d;
  }

  .service-card-body p {
    margin: 0;
    color: #4c5056;
    font-size: 15px;
    line-height: 1.6;
  }

  /* Push cues+CTA cluster to the bottom so it lines up across all cards
     regardless of how long each card's lead paragraph runs. */
  .service-card-cues {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .service-card-cue {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.06);
    box-shadow: inset 0 0 0 1px rgba(33, 48, 33, 0.07);
    color: var(--gw-green);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }

  .service-card-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(17, 20, 24, 0.08);
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
  }

  :global(.service-card-cta-arrow) {
    font-size: 11px;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ── Mobile ── */
  @media (max-width: 1024px) {
    .section-header {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .section-header .section-heading,
    .section-header .section-intro {
      max-width: 32rem;
      justify-self: center;
      text-align: center;
    }

    .section-header .section-intro {
      padding-top: 0;
    }

    .services-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Featured card takes the full width on tablet so it sits on its own
       row above the other two — keeps the emphasis without the asymmetric
       desktop grid. */
    .service-card-featured {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 768px) {
    .services-intro {
      max-width: 34ch;
    }

    .services-grid {
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 24px;
    }

    .service-card-featured {
      grid-column: auto;
    }

    .service-card-body {
      padding: 40px 22px 24px;
    }

    .service-card-emblem {
      width: 48px;
      height: 48px;
      border-radius: 15px;
    }

    .service-card-emblem :global(.service-card-emblem-glyph) {
      font-size: 20px;
    }

    .service-card-body h3 {
      font-size: 20px;
    }
  }

  @keyframes serviceEmblemShine {
    0% {
      left: -85%;
      opacity: 0;
    }

    18% {
      opacity: 1;
    }

    82% {
      left: 130%;
      opacity: 0;
    }

    100% {
      left: 130%;
      opacity: 0;
    }
  }

  /* ── Reveal ── */
  :global(.reveal-ready.reveal-block) {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance, 16px), 0);
    transition:
      opacity 0.3s ease,
      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>