<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 = 'What we do';
  export let intro =
    'Choose the walk style that fits your dog best, then book a free Meet & Greet when you are ready.';

  const requestedServiceStorageKey = 'goodwalk_requested_service';

  function bookingHref() {
    return '#newlead';
  }

  function primeBookingService(serviceTitle: string) {
    try {
      window.sessionStorage.setItem(requestedServiceStorageKey, serviceTitle);
    } catch {
      // Ignore storage failures and continue with the link target.
    }

    window.dispatchEvent(
      new CustomEvent('goodwalk:service-selected', {
        detail: { service: serviceTitle }
      })
    );
  }

</script>

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

    <div class="services-grid">
      {#each services as service}
        <div class="service-card">
          <div class="service-icon-bubble">
            <Icon name={service.icon} className="service-card-icon" />
          </div>
          <h3>{service.title}</h3>
          <p>{service.body}</p>

          {#if service.priceFrom}
            <p class="service-card-price">{service.priceFrom}</p>
          {/if}

          {#if service.href}
            <div class="service-card-actions">
              <a href={bookingHref()} class="btn btn-green" on:click={() => primeBookingService(service.title)}>
                <span>Book {service.title}</span>
                <Icon name="fas fa-arrow-right" />
              </a>

              <a href={service.href} class="service-card-link">
                View details &amp; pricing
              </a>
            </div>
          {/if}
        </div>
      {/each}
    </div>
  </div>
</section>

<style>
  :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);
  }

  @media (hover: hover) and (min-width: 769px) {
    :global(.reveal-visible.reveal-block) .service-card {
      animation: service-card-settle 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    :global(.reveal-visible.reveal-block) .service-card:nth-child(1) {
      animation-delay: 0.02s;
    }

    :global(.reveal-visible.reveal-block) .service-card:nth-child(2) {
      animation-delay: 0.06s;
    }

    :global(.reveal-visible.reveal-block) .service-card:nth-child(3) {
      animation-delay: 0.1s;
    }
  }

  @keyframes service-card-settle {
    from {
      opacity: 0;
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .services-intro {
    max-width: 700px;
    margin: 18px auto 0;
    text-align: center;
    color: #4c5056;
    font-size: 17px;
    line-height: 1.65;
  }

  .service-card-actions {
    display: grid;
    gap: 12px;
    margin-top: 18px;
  }

  .service-card-actions :global(.btn) {
    width: 100%;
    justify-content: center;
  }

  .service-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    color: var(--gw-green);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }

  @media (hover: hover) {
    .service-card-link:hover {
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }
  }

</style>
