Refactor testimonial navigation handlers and improve timer management in Testimonials component

src/components/Testimonials.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
+  import { slide } from 'svelte/transition';
   const testimonials = [
     {
       name: 'Sarah Johnson',
@@ -22,9 +23,16 @@
   ];
 
   let currentIndex = 0;
-  let timer: ReturnType<typeof setTimeout>;
+  let timer: ReturnType<typeof setTimeout> | null = null;
   const ROTATE_INTERVAL = 20000; // 20 seconds
 
+  function nextHandler() {
+    next();
+  }
+  function prevHandler() {
+    prev();
+  }
+
   function next(reset = true) {
     currentIndex = (currentIndex + 1) % testimonials.length;
     if (reset) resetTimer();
@@ -36,7 +44,7 @@
   }
 
   function resetTimer() {
-    clearTimeout(timer);
+    if (timer) clearTimeout(timer);
     timer = setTimeout(() => next(false), ROTATE_INTERVAL);
   }
 
@@ -45,7 +53,7 @@
   });
 
   onDestroy(() => {
-    clearTimeout(timer);
+    if (timer) clearTimeout(timer);
   });
 </script>
 
@@ -56,29 +64,31 @@
     </h2>
     <div class="max-w-3xl mx-auto">
       <div class="relative">
-        <div class="bg-white p-8 rounded-xl shadow-sm">
+        {#if testimonials[currentIndex]}
-          <div class="text-4xl mb-4">{testimonials[currentIndex].avatar}</div>
+          <div class="bg-white p-8 rounded-xl shadow-sm" transition:slide|local>
-          <p class="text-lg text-text/80 mb-6">
+            <div class="text-4xl mb-4">{testimonials[currentIndex].avatar}</div>
-            "{testimonials[currentIndex].content}"
+            <p class="text-lg text-text/80 mb-6">
-          </p>
+              "{testimonials[currentIndex].content}"
-          <div>
-            <p class="font-heading font-semibold text-primary">
-              {testimonials[currentIndex].name}
-            </p>
-            <p class="text-text/60">
-              {testimonials[currentIndex].role}
             </p>
+            <div>
+              <p class="font-heading font-semibold text-primary">
+                {testimonials[currentIndex].name}
+              </p>
+              <p class="text-text/60">
+                {testimonials[currentIndex].role}
+              </p>
+            </div>
           </div>
-        </div>
+        {/if}
         <div class="flex justify-center mt-8 space-x-4">
           <button
-            on:click={prev}
+            on:click={prevHandler}
             class="p-2 rounded-full bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
           >
             ←
           </button>
           <button
-            on:click={next}
+            on:click={nextHandler}
             class="p-2 rounded-full bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
           >
             →