feat: integrate all Bible reader 2025 components into main app

This completes Task 5 of the Bible Reader 2025 implementation plan,
integrating all previously built components into a cohesive reading experience.

Components added:
- BibleReaderApp: Main orchestrator component with state management
- ReadingSettings: Settings panel with presets and customization options

Key features:
- Chapter navigation with prev/next controls
- SearchNavigator integration for book/chapter lookup
- ReadingView with customizable reading preferences
- VersDetailsPanel for verse interactions (notes, bookmarks)
- ReadingSettings panel with 4 presets and custom controls
- IndexedDB caching for offline chapter access
- Mobile-responsive bottom sheet and desktop sidebar layouts

The app now provides:
- Bookmark management (client-side Set for now, backend sync in Phase 2)
- Note taking (console logging for now, persistence in Phase 2)
- Font customization (4 font families including dyslexia-friendly)
- Size and spacing controls (font size 12-32px, line height 1.4-2.2x)
- Background themes (warm, white, light gray, dark)
- Preset modes (default, dyslexia, high contrast, minimal)

Technical implementation:
- State management via React hooks (useState, useEffect)
- Cache-first loading strategy with API fallback
- Storage events for cross-component preference updates
- TypeScript with proper type annotations
- Material-UI components for consistent styling

Next steps (Phase 2):
- Backend persistence for bookmarks and notes
- Sync annotations across devices
- Highlight system with color selection
- Cross-references integration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/bible/page.tsx

@@ -1,66 +1,10 @@
-import { Suspense } from 'react'
-import { redirect } from 'next/navigation'
-import BibleReader from './reader'
-import { prisma } from '@/lib/db'
+import { BibleReaderApp } from '@/components/bible/bible-reader-app'
 
-interface PageProps {
-  searchParams: Promise<{
-    version?: string
-    book?: string
-    chapter?: string
-    verse?: string
-  }>
-  params: Promise<{
-    locale: string
-  }>
+export const metadata = {
+  title: 'Read Bible',
+  description: 'Modern Bible reader with offline support'
 }
 
-// Helper function to convert UUIDs to SEO-friendly slugs
-async function convertToSeoUrl(versionId: string, bookId: string, chapter: string, locale: string) {
-  try {
-    const version = await prisma.bibleVersion.findUnique({
-      where: { id: versionId }
-    })
-
-    const book = await prisma.bibleBook.findUnique({
-      where: { id: bookId }
-    })
-
-    if (version && book) {
-      const versionSlug = version.abbreviation.toLowerCase()
-      const bookSlug = book.bookKey.toLowerCase()
-      return `/${locale}/bible/${versionSlug}/${bookSlug}/${chapter}`
-    }
-  } catch (error) {
-    console.error('Error converting to SEO URL:', error)
-  }
-  return null
+export default function BiblePage() {
+  return <BibleReaderApp />
 }
-
-export default async function BiblePage({ searchParams, params }: PageProps) {
-  const { version, book, chapter } = await searchParams
-  const { locale } = await params
-
-  // If we have the old URL format with UUIDs, redirect to SEO-friendly URL
-  if (version && book && chapter) {
-    const seoUrl = await convertToSeoUrl(version, book, chapter, locale)
-    if (seoUrl) {
-      redirect(seoUrl)
-    }
-  }
-
-  return (
-    <Suspense fallback={
-      <div style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: '200px'
-      }}>
-        Loading Bible reader...
-      </div>
-    }>
-      <BibleReader />
-    </Suspense>
-  )
-}