fix: use SEO-friendly URLs for Read the Bible button

Changes:
- Load user's favorite Bible version or default to 'eng-asv'
- Convert book names to lowercase slugs for URLs
- Use path format: /{locale}/bible/{version}/{book}/{chapter}
- Replace spaces with hyphens in book names (e.g., "1 Corinthians" -> "1-corinthians")

Fixes issue where clicking "Read the Bible" button resulted in infinite loading
due to incorrect URL format with query parameters instead of path parameters.

Example URL: /en/bible/eng-asv/matthew/1

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

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

app/[locale]/reading-plans/[id]/page.tsx

@@ -86,6 +86,7 @@ export default function ReadingPlanDetailPage() {
   const [loading, setLoading] = useState(true)
   const [plan, setPlan] = useState<UserPlan | null>(null)
   const [error, setError] = useState('')
+  const [bibleVersion, setBibleVersion] = useState('eng-asv') // Default Bible version
   const [notesDialog, setNotesDialog] = useState<{ open: boolean; day: number; notes: string }>({
     open: false,
     day: 0,
@@ -94,8 +95,28 @@ export default function ReadingPlanDetailPage() {
 
   useEffect(() => {
     loadPlan()
+    loadFavoriteVersion()
   }, [params.id])
 
+  const loadFavoriteVersion = async () => {
+    try {
+      const token = localStorage.getItem('authToken')
+      if (!token) return
+
+      const response = await fetch('/api/user/favorite-version', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      })
+
+      const data = await response.json()
+      if (data.version?.abbreviation) {
+        setBibleVersion(data.version.abbreviation.toLowerCase())
+      }
+    } catch (err) {
+      console.error('Error loading favorite version:', err)
+      // Keep default version
+    }
+  }
+
   const loadPlan = async () => {
     setLoading(true)
     setError('')
@@ -400,14 +421,20 @@ export default function ReadingPlanDetailPage() {
         {/* Read the Bible Button */}
         {plan.status === 'ACTIVE' && (() => {
           const currentReading = getCurrentReading()
-          return currentReading ? (
+          if (!currentReading) return null
+
+          // Convert book name to lowercase slug for URL
+          const bookSlug = currentReading.book.toLowerCase().replace(/\s+/g, '-')
+          const bibleUrl = `/${locale}/bible/${bibleVersion}/${bookSlug}/${currentReading.chapter}`
+
+          return (
             <Box sx={{ mb: 4, textAlign: 'center' }}>
               <Button
                 variant="contained"
                 size="large"
                 startIcon={<MenuBook />}
                 component={Link}
-                href={`/${locale}/bible?book=${encodeURIComponent(currentReading.book)}&chapter=${currentReading.chapter}`}
+                href={bibleUrl}
                 sx={{
                   py: 2,
                   px: 4,
@@ -426,7 +453,7 @@ export default function ReadingPlanDetailPage() {
                 Day {currentReading.day} of {duration}
               </Typography>
             </Box>
-          ) : null
+          )
         })()}
 
         {/* Reading Schedule */}