Restructure home page: separate Today's Sermon, Upcoming Sermons, and Previous Sermons sections

pages/index.vue

@@ -45,22 +45,31 @@
     </header>
 
     <!-- Main Content -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
-      <!-- Most Recent Sermon -->
+      <!-- Today's Sermon -->
-      <div v-if="mostRecentSermon">
+      <div v-if="todaysSermon">
-        <ClientOnly>
+        <h2 class="text-2xl font-semibold text-gray-900 mb-6">Today's Sermon</h2>
-          <h2 class="text-2xl font-semibold text-gray-900 mb-6">{{ sermonHeading }}</h2>
-          <template #fallback>
-            <h2 class="text-2xl font-semibold text-gray-900 mb-6">Most Recent Sermon</h2>
-          </template>
-        </ClientOnly>
         <div class="max-w-md mx-auto">
-          <SermonCard :sermon="mostRecentSermon" />
+          <SermonCard :sermon="todaysSermon" />
         </div>
       </div>
 
+      <!-- Upcoming Sermons -->
+      <div v-if="upcomingSermons.length > 0">
+        <h2 class="text-2xl font-semibold text-gray-900 mb-6">Upcoming Sermons</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <SermonCard v-for="sermon in upcomingSermons" :key="sermon.id" :sermon="sermon" />
+        </div>
+      </div>
+
+      <!-- Empty State (if no current or upcoming sermons) -->
+      <div v-if="!hasCurrentSermons" class="text-center py-12">
+        <p class="text-gray-500 text-lg">No upcoming sermons available yet.</p>
+      </div>
+
       <!-- Previous Sermons Dropdown -->
-      <div v-if="previousSermons.length > 0" class="mt-12 max-w-2xl mx-auto">
+      <div v-if="previousSermons.length > 0" class="max-w-2xl mx-auto">
+        <h2 class="text-2xl font-semibold text-gray-900 mb-4 text-center">Previous Sermons</h2>
         <p class="text-center text-gray-700 mb-4">Use the dropdown below to view a previous sermon</p>
         <div class="flex gap-3">
           <select
@@ -81,11 +90,6 @@
           </button>
         </div>
       </div>
-
-      <!-- Empty State -->
-      <div v-if="!mostRecentSermon" class="text-center py-12">
-        <p class="text-gray-500 text-lg">No sermons available yet.</p>
-      </div>
     </main>
   </div>
 </template>
@@ -103,26 +107,32 @@ const { data: archivedSermons } = await useFetch('/api/sermons?includeArchived=t
 
 const selectedSermonSlug = ref('')
 
-// Get most recent non-archived sermon (closest to or on today's date, not future dates)
+// Get today's sermon (if one exists for today's date)
-const mostRecentSermon = computed(() => {
+const todaysSermon = computed(() => {
   if (!activeSermons.value || activeSermons.value.length === 0) return null
   
   const today = new Date()
   today.setHours(0, 0, 0, 0)
   
-  // Find the sermon with the most recent date that is not in the future
+  return activeSermons.value.find((s: any) => {
-  const validSermons = activeSermons.value.filter((s: any) => {
     const sermonDate = new Date(s.date + 'T00:00:00')
     sermonDate.setHours(0, 0, 0, 0)
-    return sermonDate.getTime() <= today.getTime()
+    return sermonDate.getTime() === today.getTime()
+  }) || null
+})
+
+// Get upcoming sermons (future dates)
+const upcomingSermons = computed(() => {
+  if (!activeSermons.value) return []
+  
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  
+  return activeSermons.value.filter((s: any) => {
+    const sermonDate = new Date(s.date + 'T00:00:00')
+    sermonDate.setHours(0, 0, 0, 0)
+    return sermonDate.getTime() > today.getTime()
   })
-  
-  // If no valid sermons (all are future dates), return the earliest future sermon
-  if (validSermons.length === 0) {
-    return activeSermons.value[activeSermons.value.length - 1]
-  }
-  
-  return validSermons[0]
 })
 
 // Get archived sermons only for the previous sermons dropdown
@@ -131,18 +141,9 @@ const previousSermons = computed(() => {
   return archivedSermons.value.filter((s: any) => s.archived === 1)
 })
 
-// Check if most recent sermon is today
+// Check if there are any current or upcoming sermons
-const sermonHeading = computed(() => {
+const hasCurrentSermons = computed(() => {
-  if (!mostRecentSermon.value) return 'Recent Sermon'
+  return todaysSermon.value !== null || upcomingSermons.value.length > 0
-  
-  const sermonDate = new Date(mostRecentSermon.value.date + 'T00:00:00')
-  const today = new Date()
-  today.setHours(0, 0, 0, 0)
-  sermonDate.setHours(0, 0, 0, 0)
-  
-  const isToday = sermonDate.getTime() === today.getTime()
-  
-  return isToday ? "Today's Sermon" : 'Most Recent Sermon'
 })
 
 function formatDate(dateString: string) {