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) => {
-    // 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
-    
-    // Check additional dates if they exist
-    if (s.dates) {
-      try {
-        const additionalDates = JSON.parse(s.dates)
-        return additionalDates.some((dateStr: string) => {
-          const additionalDate = new Date(dateStr + 'T00:00:00')
-          additionalDate.setHours(0, 0, 0, 0)
-          return additionalDate.getTime() > today.getTime()
-        })
-      } catch {
-        return false
+  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 primary date is in the future, use it
+      if (sermonDate.getTime() > today.getTime()) {
+        return { ...s, displayDate: s.date }
       }
-    }
-    
-    return false
-  })
+      
+      // Check additional dates if they exist
+      if (s.dates) {
+        try {
+          const additionalDates = JSON.parse(s.dates)
+          // 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 null
+        }
+      }
+      
+      return null
+    })
+    .filter((s: any) => s !== null)
 })
 
 // Get archived sermons only for the previous sermons dropdown