nlcc-itinerary/pages/[slug].vue

<template>
  <div class="min-h-screen bg-gray-50">
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex items-center justify-between">
          <NuxtLink to="/" class="flex items-center space-x-4 hover:opacity-80">
            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
          </NuxtLink>
          <div class="flex items-center gap-4">
            <div class="flex items-center gap-2">
              <label for="font-size" class="text-sm font-medium text-gray-700">Font Size:</label>
              <select
                id="font-size"
                v-model="fontSize"
                class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"
              >
                <option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
              </select>
            </div>
            <QRCodeButton v-if="sermon" :sermon="sermon" />
          </div>
        </div>
      </div>
    </header>

    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div v-if="sermon" class="bg-white shadow-lg rounded-lg p-8">
        <!-- Header -->
        <div class="border-b pb-6 mb-8">
          <h1 class="text-4xl font-bold text-gray-900 mb-2">{{ sermon.title }}</h1>
          <p class="text-lg text-gray-600">{{ formatDate(sermon.date) }}</p>
        </div>

        <!-- Section 1: Bible References -->
        <section class="mb-8">
          <h2 class="text-2xl font-semibold text-gray-900 mb-4">Bible References</h2>
          <div class="space-y-6">
            <div 
              v-for="(ref, index) in bibleReferences" 
              :key="index"
              class="bg-blue-50 rounded-lg p-6"
            >
              <!-- Mobile: Stack reference above text -->
              <div class="md:hidden mb-3 text-right text-sm text-gray-600">
                <div class="font-semibold">{{ ref.reference }}</div>
                <div>({{ ref.version }})</div>
              </div>
              
              <!-- Desktop: Side by side -->
              <div class="flex items-start justify-between gap-4">
                <p :class="['text-gray-800 leading-relaxed flex-1', fontSizeClasses]">
                  {{ ref.text }}
                </p>
                <div class="hidden md:block text-right text-sm text-gray-600 whitespace-nowrap">
                  <div class="font-semibold">{{ ref.reference }}</div>
                  <div>({{ ref.version }})</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Section 2: Personal Appliance -->
        <section class="mb-8">
          <h2 class="text-2xl font-semibold text-gray-900 mb-4">Personal Appliance</h2>
          <div class="bg-green-50 rounded-lg p-6">
            <p :class="['text-gray-800 whitespace-pre-wrap', fontSizeClasses]">{{ sermon.personal_appliance }}</p>
          </div>
        </section>

        <!-- Section 3: Pastor's Challenge -->
        <section class="mb-8">
          <h2 class="text-2xl font-semibold text-gray-900 mb-4">Pastor's Challenge</h2>
          <div class="bg-purple-50 rounded-lg p-6">
            <p :class="['text-gray-800 whitespace-pre-wrap', fontSizeClasses]">{{ sermon.pastors_challenge }}</p>
          </div>
        </section>

        <!-- Back Button -->
        <div class="border-t pt-6">
          <NuxtLink 
            to="/"
            class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
          >
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Back to All Sermons
          </NuxtLink>
        </div>
      </div>

      <!-- Error State -->
      <div v-else class="bg-white shadow-lg rounded-lg p-8 text-center">
        <h2 class="text-2xl font-semibold text-gray-900 mb-4">Sermon Not Found</h2>
        <p class="text-gray-600 mb-6">The sermon you're looking for doesn't exist.</p>
        <NuxtLink 
          to="/"
          class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
        >
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Back to All Sermons
        </NuxtLink>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug as string

const { data: sermon } = await useFetch(`/api/sermons/${slug}`)

// Font size state
const fontSize = ref('medium')

const bibleReferences = computed(() => {
  if (!sermon.value?.bible_references) return []
  try {
    // Try to parse as JSON first (new format)
    return JSON.parse(sermon.value.bible_references)
  } catch {
    // Fallback to old format (plain text)
    return sermon.value.bible_references.split('\n')
      .filter((ref: string) => ref.trim())
      .map((ref: string) => ({ version: '', reference: ref, text: ref }))
  }
})

// Font size classes
const fontSizeClasses = computed(() => {
  switch (fontSize.value) {
    case 'small':
      return 'text-sm'
    case 'large':
      return 'text-xl'
    default:
      return 'text-base'
  }
})

function formatDate(dateString: string) {
  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
  })
}
</script>