Sermon dates

components/SermonCard.vue

@@ -2,7 +2,7 @@
   <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
     <div class="p-6">
       <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ sermon.title }}</h3>
-      <p class="text-sm text-gray-500 mb-4">{{ formatDate(sermon.date) }}</p>
+      <p class="text-sm text-gray-500 mb-4">{{ formatDate(sermon.displayDate || sermon.date) }}</p>
       
       <div class="flex items-center justify-between">
         <NuxtLink 
@@ -24,6 +24,7 @@ interface Sermon {
   slug: string
   title: string
   date: string
+  displayDate?: string
   bible_references: string
   personal_appliance: string
   pastors_challenge: string

pages/index.vue

@@ -153,28 +153,39 @@ const upcomingSermons = computed(() => {
   const today = new Date()
   today.setHours(0, 0, 0, 0)
   
-  return activeSermons.value.filter((s: any) => {
+  return activeSermons.value
+    .map((s: any) => {
       // Check primary date
       const sermonDate = new Date(s.date + 'T00:00:00')
       sermonDate.setHours(0, 0, 0, 0)
-    if (sermonDate.getTime() > today.getTime()) return true
+      
+      // If primary date is in the future, use it
+      if (sermonDate.getTime() > today.getTime()) {
+        return { ...s, displayDate: s.date }
+      }
       
       // Check additional dates if they exist
       if (s.dates) {
         try {
           const additionalDates = JSON.parse(s.dates)
-        return additionalDates.some((dateStr: string) => {
+          // Find the first future date from additional dates
+          const futureDate = additionalDates.find((dateStr: string) => {
             const additionalDate = new Date(dateStr + 'T00:00:00')
             additionalDate.setHours(0, 0, 0, 0)
             return additionalDate.getTime() > today.getTime()
           })
+          
+          if (futureDate) {
+            return { ...s, displayDate: futureDate }
+          }
         } catch {
-        return false
+          return null
         }
       }
       
-    return false
+      return null
     })
+    .filter((s: any) => s !== null)
 })
 
 // Get archived sermons only for the previous sermons dropdown