Create comprehensive bookmarks management page

Add complete bookmarks page with navigation functionality:

Features:
- Dedicated /bookmarks page for viewing all saved bookmarks
- Support for both chapter and verse bookmarks in unified view
- Statistics dashboard showing total, chapter, and verse bookmark counts
- Tabbed filtering (All, Chapters, Verses) for easy organization
- Direct navigation to Bible reading page with URL parameters
- Delete functionality for individual bookmarks
- Empty state with call-to-action to start reading

Navigation Integration:
- Add Bookmarks to main navigation menu (authenticated users only)
- Add Bookmarks to user profile dropdown menu
- Dynamic navigation based on authentication state

Bible Page Enhancements:
- URL parameter support for bookmark navigation (book, chapter, verse)
- Verse highlighting when navigating from bookmarks
- Auto-clear highlight after 3 seconds for better UX

API Endpoints:
- /api/bookmarks/all - Unified endpoint for all user bookmarks
- Returns transformed data optimized for frontend consumption

Multilingual Support:
- Full Romanian and English translations
- Consistent messaging across all bookmark interfaces

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

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

components/layout/navigation.tsx

@@ -31,6 +31,7 @@ import {
   Settings,
   Logout,
   Login,
+  Bookmark,
 } from '@mui/icons-material'
 import { useRouter } from 'next/navigation'
 import { useTranslations, useLocale } from 'next-intl'
@@ -55,7 +56,13 @@ export function Navigation() {
     { name: t('search'), path: '/search', icon: <Search /> },
   ]
 
+  const authenticatedPages = [
+    ...pages,
+    { name: t('bookmarks'), path: '/bookmarks', icon: <Bookmark /> },
+  ]
+
   const settings = [
+    { name: t('bookmarks'), icon: <Bookmark />, action: 'bookmarks' },
     { name: t('profile'), icon: <AccountCircle />, action: 'profile' },
     { name: t('settings'), icon: <Settings />, action: 'settings' },
     { name: t('logout'), icon: <Logout />, action: 'logout' },
@@ -88,6 +95,9 @@ export function Navigation() {
     handleCloseUserMenu()
 
     switch (action) {
+      case 'bookmarks':
+        router.push(`/${locale}/bookmarks`)
+        break
       case 'profile':
         router.push(`/${locale}/profile`)
         break
@@ -114,7 +124,7 @@ export function Navigation() {
   const DrawerList = (
     <Box sx={{ width: 250 }} role="presentation">
       <List>
-        {pages.map((page) => (
+        {(isAuthenticated ? authenticatedPages : pages).map((page) => (
           <ListItem key={page.name} disablePadding>
             <ListItemButton onClick={() => handleNavigate(page.path)}>
               <ListItemIcon sx={{ color: 'primary.main' }}>
@@ -190,7 +200,7 @@ export function Navigation() {
 
             {/* Desktop Menu */}
             <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-              {pages.map((page) => (
+              {(isAuthenticated ? authenticatedPages : pages).map((page) => (
                 <Button
                   key={page.name}
                   onClick={() => handleNavigate(page.path)}