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

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

  export let content: SiteSharedContent;
  export let pageContent: ServicePageContent;
  export let currentPath = '';

  $: heroImage = getImageMetadata(pageContent.hero.imageUrl);
  $: highlightImage = pageContent.highlight ? getImageMetadata(pageContent.highlight.imageUrl) : null;
  $: relatedServices = content.services.filter((s) => s.href && s.href !== currentPath);

  $: relatedCards = [
    ...relatedServices.map((s) => ({
      icon: s.icon,
      title: s.title,
      body: s.body,
      href: s.href as string,
      priceFrom: s.priceFrom,
      pill: undefined as string | undefined
    })),
    {
      icon: 'fas fa-tags',
      title: 'Our Pricing',
      body: 'Compare every service and add-on in one place.',
      href: '/our-pricing',
      priceFrom: undefined,
      pill: 'All services'
    }
  ];
</script>

<main class="service-page">
  <section class="service-hero">
    <div class="service-inner service-hero-grid">
      <div class="service-hero-copy">
        <p class="service-eyebrow">{pageContent.hero.eyebrow}</p>
        <h1>{pageContent.hero.title}</h1>

        {#each pageContent.hero.paragraphs as paragraph}
          <p>{paragraph}</p>
        {/each}
      </div>

      <div class="service-hero-media">
        <img
          src={pageContent.hero.imageUrl}
          alt={pageContent.hero.imageAlt}
          width={heroImage?.width}
          height={heroImage?.height}
          loading="eager"
          fetchpriority="high"
          decoding="async"
        />
      </div>
    </div>
  </section>

  {#if pageContent.highlight}
    <section use:reveal class="service-highlight reveal-block">
      <div class="service-inner service-highlight-copy">
        <p class="service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
        <h2>{pageContent.highlight.title}</h2>
      </div>

      <div class="service-inner">
        <div class="service-highlight-image">
          <img
            src={pageContent.highlight.imageUrl}
            alt={pageContent.highlight.imageAlt}
            width={highlightImage?.width}
            height={highlightImage?.height}
            loading="lazy"
            decoding="async"
          />
        </div>
      </div>
    </section>
  {/if}

  <section use:reveal class="service-pricing reveal-block">
    <div class="service-inner">
      <div class="service-section-heading">
        <h2>{pageContent.pricing.title}</h2>
        {#if pageContent.pricing.intro}
          <p>{pageContent.pricing.intro}</p>
        {/if}
      </div>

      <div class:service-plan-grid-three={pageContent.pricing.plans.length === 3} class="service-plan-grid">
        {#each pageContent.pricing.plans as plan}
          <article class:service-plan-popular={plan.popular} class="service-plan-card">
            {#if plan.popular}
              <span class="service-plan-ribbon">Popular</span>
            {/if}

            <h3>{plan.title}</h3>
            <div class="service-plan-price">{plan.price}</div>
            <p class="service-plan-period">{plan.period}</p>

            <ul class="service-plan-features">
              {#each plan.features as feature}
                <li>{feature}</li>
              {/each}
            </ul>

            <a class="btn btn-yellow service-plan-cta" href="#newlead">Book a Meet &amp; Greet</a>
          </article>
        {/each}
      </div>

      {#if pageContent.pricing.extras?.length}
        <div class="service-extras">
          <div class="service-extras-heading">Extras</div>
          {#each pageContent.pricing.extras as extra}
            <div class="service-extra-row">
              <span class="service-extra-label">
                {extra.label}
                {#if extra.note}
                  <span class="service-extra-pill">{extra.note}</span>
                {/if}
              </span>
              <span class="service-extra-price">{extra.price}</span>
            </div>
          {/each}
        </div>
      {/if}
    </div>
  </section>

  <section use:reveal class="service-benefits reveal-block">
    <div class="service-inner">
      <div class="service-section-heading">
        <h2>{pageContent.benefits.title}</h2>
      </div>

      <div class="service-benefit-grid">
        {#each pageContent.benefits.items as benefit}
          <article class="service-benefit-card">
            <div class="service-benefit-icon" aria-hidden="true">
              <Icon name="fas fa-paw" />
            </div>
            <h3>{benefit.title}</h3>
            <p>{benefit.body}</p>
          </article>
        {/each}
      </div>
    </div>
  </section>

  {#if relatedServices.length}
    <section use:reveal class="service-related reveal-block" aria-label="Other services">
      <div class="service-inner">
        <div class="service-section-heading">
          <h2>Explore our other services</h2>
        </div>

        <div class="service-related-grid">
          {#each relatedCards as card, i}
            <a class="service-related-card service-related-tint-{i % 4}" href={card.href}>
              <div class="service-related-icon" aria-hidden="true">
                <Icon name={card.icon} />
              </div>
              <h3>{card.title}</h3>
              {#if card.body}
                <p>{card.body}</p>
              {/if}
              <div class="service-related-meta">
                {#if card.priceFrom}
                  <span class="service-related-price">{card.priceFrom}</span>
                {/if}
                {#if card.pill}
                  <span class="service-related-pill">{card.pill}</span>
                {/if}
              </div>
              <span class="service-related-link" aria-hidden="true">Learn more →</span>
            </a>
          {/each}
        </div>
      </div>
    </section>
  {/if}

  <TestimonialsSection heading={pageContent.testimonialsHeading} testimonials={content.testimonials} />
  <BookingSection booking={pageContent.booking} />
</main>

<style>
  .service-page {
    background: var(--off-white);
  }

  .service-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 50px;
  }

  .service-hero {
    padding: 72px 0 96px;
  }

  .service-related {
    padding: 0 0 96px;
  }

  .service-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .service-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 28px 26px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
    color: #000;
    text-decoration: none;
    overflow: hidden;
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s ease;
  }

  .service-related-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--card-accent, var(--yellow));
  }

  .service-related-tint-0 {
    --card-accent: var(--yellow);
  }
  .service-related-tint-0 .service-related-icon {
    background: #fff3c6;
    color: #5a4500;
  }

  .service-related-tint-1 {
    --card-accent: var(--green);
  }
  .service-related-tint-1 .service-related-icon {
    background: #dce6dc;
    color: var(--green);
  }

  .service-related-tint-2 {
    --card-accent: #c98a3f;
  }
  .service-related-tint-2 .service-related-icon {
    background: #efe4d1;
    color: var(--green);
  }

  .service-related-tint-3 {
    --card-accent: #9ca3af;
  }
  .service-related-tint-3 .service-related-icon {
    background: #f3f4f6;
    color: #4b5563;
  }

  @media (hover: hover) {
    .service-related-card:hover {
      transform: translateY(-6px) scale(1.012);
      box-shadow: 0 20px 40px rgba(17, 20, 24, 0.09);
    }
  }

  .service-related-card:active {
    transform: translateY(-1px) scale(0.992);
  }

  .service-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #efe4d1;
    color: var(--green);
    font-size: 18px;
    margin-bottom: 8px;
  }

  .service-related-card h3 {
    margin: 0;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.2;
  }

  .service-related-card p {
    margin: 0;
    color: #34363a;
    font-size: 15px;
    line-height: 1.55;
  }

  .service-related-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .service-related-price {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--green);
    font-size: 14px;
  }

  .service-related-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .service-related-link {
    margin-top: auto;
    padding-top: 6px;
    color: var(--green);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
  }

  .service-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 52px;
    align-items: center;
  }

  .service-eyebrow {
    margin: 0 0 18px;
    color: var(--green);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .service-hero-copy h1,
  .service-section-heading h2,
  .service-highlight-copy h2 {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #000;
  }

  .service-hero-copy p,
  .service-section-heading p,
  .service-benefit-card p {
    margin: 20px 0 0;
    max-width: 680px;
    color: #34363a;
    font-size: 17px;
    line-height: 1.7;
  }

  .service-hero-media img,
  .service-highlight-image img {
    display: block;
    width: 100%;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: 0 16px 40px rgba(17, 20, 24, 0.08);
  }

  .service-highlight {
    padding: 0 0 96px;
  }

  .service-highlight-copy {
    text-align: center;
    margin-bottom: 34px;
  }

  .service-highlight-eyebrow {
    margin: 0 0 16px;
    color: var(--yellow);
    font-family: var(--font-head);
    font-size: 28px;
    line-height: 1;
  }

  .service-highlight-image img {
    max-height: 620px;
  }

  .service-pricing,
  .service-benefits {
    padding: 0 0 96px;
  }

  .service-section-heading {
    text-align: center;
    margin-bottom: 38px;
  }

  .service-section-heading p {
    margin-left: auto;
    margin-right: auto;
  }

  .service-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .service-plan-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-plan-card,
  .service-benefit-card {
    position: relative;
    background: #fff;
    border-radius: 28px;
    padding: 30px 26px;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s ease,
      border-color 0.22s ease;
  }

  .service-plan-popular {
    border: 2px solid var(--yellow);
  }

  .service-plan-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--yellow);
    color: #000;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  @media (hover: hover) {
    .service-plan-card:hover,
    .service-benefit-card:hover {
      transform: translateY(-8px) scale(1.012);
      box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1);
    }
  }

  .service-plan-card:active,
  .service-benefit-card:active {
    transform: translateY(-2px) scale(0.992);
  }

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

  .service-plan-card h3,
  .service-benefit-card h3 {
    margin: 0;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.2;
    color: #000;
  }

  .service-plan-price {
    margin-top: 20px;
    font-family: var(--font-head);
    font-size: 44px;
    line-height: 1;
    color: var(--green);
  }

  .service-plan-period {
    margin: 8px 0 0;
    color: #5d6166;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .service-plan-features {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
  }

  .service-plan-features li {
    position: relative;
    padding-left: 24px;
    color: #34363a;
    font-size: 15px;
    line-height: 1.5;
  }

  .service-plan-features li + li {
    margin-top: 12px;
  }

  .service-plan-features li::before {
    content: '•';
    position: absolute;
    left: 6px;
    top: 0;
    color: var(--yellow);
    font-size: 20px;
    line-height: 1;
  }

  .service-plan-cta {
    display: flex;
    width: fit-content;
    margin: 28px auto 0;
    font-family: var(--font-head);
  }

  .service-extras {
    margin-top: 30px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
    overflow: hidden;
  }

  .service-extras-heading {
    padding: 18px 28px 14px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #ece9e3;
  }

  .service-extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 28px;
    color: #34363a;
    font-size: 16px;
    line-height: 1.4;
  }

  .service-extra-row + .service-extra-row {
    border-top: 1px solid #ece9e3;
  }

  .service-extra-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .service-extra-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
  }

  .service-extra-price {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--green);
    white-space: nowrap;
  }

  .service-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .service-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #efe4d1;
    color: var(--green);
    font-size: 18px;
    margin-bottom: 18px;
  }

  .service-benefit-card p {
    margin-top: 14px;
    font-size: 16px;
  }

  @media (max-width: 1024px) {
    .service-hero-grid,
    .service-plan-grid,
    .service-plan-grid-three,
    .service-benefit-grid,
    .service-related-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-hero-grid {
      align-items: start;
    }
  }

  @media (max-width: 768px) {
    .service-inner {
      padding: 0 24px;
    }

    .service-hero {
      padding: 48px 0 72px;
    }

    .service-hero-grid,
    .service-plan-grid,
    .service-plan-grid-three,
    .service-benefit-grid,
    .service-related-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .service-plan-popular {
      order: -1;
    }

    .service-highlight,
    .service-pricing,
    .service-benefits,
    .service-related {
      padding-bottom: 72px;
    }

    .service-highlight-eyebrow {
      font-size: 24px;
    }

    .service-extra-row {
      flex-direction: column;
      align-items: flex-start;
    }
  }
</style>