Content Rewrite

src/lib/components/ServicesSection.svelte

@@ -5,12 +5,35 @@
 
   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}
@@ -26,10 +49,16 @@
           {/if}
 
           {#if service.href}
-            <a href={service.href} class="btn btn-green">
-              <span>See {service.title} pricing</span>
-              <Icon name="fas fa-arrow-right" />
-            </a>
+            <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}
@@ -81,4 +110,42 @@
       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>