Update index.html

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+ <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
@@ -217,516 +217,289 @@
             { word_tifinagh: 'ⴰⵏⴱⴷⵓ', word_arabic: 'الصيف', image: 'images/6da33d4175e50b17309485c8b33cfe0e.jpg', audio: 'audio/AUD-20250926-WA0001.opus' },
             { word_tifinagh: 'ⴰⵎⴰⵡⴰⵏ', word_arabic: 'الخريف', image: 'images/e6c5c6a800de512091faa20db36472f8.jpg', audio: 'audio/AUD-20250926-WA0000.opus' }
         ];
-
-         const fruitsData = [
+        const fruitsData = [
             { word_tifinagh: 'ⵜⴰⴷⴼⴼⵓⵢⵜ', word_arabic: 'تفاحة', image: 'images/da1da4f2015a32322f547ae5fff5236c.jpg', audio: 'audio/fruits/apple.mp3' },
             { word_tifinagh: 'ⵜⴰⴱⴰⵏⴰⵏⵜ', word_arabic: 'موزة', image: 'images/11bde7577165c2edef985a3cbd9458ae.jpg', audio: 'audio/fruits/banana.mp3' },
             { word_tifinagh: 'ⵍⵍⵜⵛⵉⵏ', word_arabic: 'برتقال', image: 'images/1efc88aa2e2e9bb97af6b059a4c05b91.jpg', audio: 'audio/fruits/orange.mp3' },
-            { word_tifinagh: 'ⵜⵉⵣⵡⵍⵜ', word_arabic: 'فراولة', image: 'images/f70521a26fbd3b91b349493081eb3b88.jpg', audio: 'audio/fruits/strawberry.mp3' },
             { word_tifinagh: 'ⴰⴹⵉⵍ', word_arabic: 'عنب', image: 'images/1987ab2c045824929e7b8e5004f1c503.jpg', audio: 'audio/fruits/grapes.mp3' },
-            { word_tifinagh: 'ⵕⵕⵎⵎⴰⵏ', word_arabic: 'رمان', image: 'images/bf6a38717ec00ddb8394f5c7acab308e.jpg', audio: 'audio/fruits/pomegranate.mp3' },
-            { word_tifinagh: 'ⵜⴰⴷⴷⵍⵍⴰⵃⵜ', word_arabic: 'بطيخ', image: 'images/ae716e7b0b1009b29d2c0924aaa1cc15.jpg', audio: 'audio/fruits/watermelon.mp3' },
-            { word_tifinagh: 'ⴰⵎⴰⵏ', word_arabic: 'مانجو', image: 'images/afc84d4cffcfca39b86fc288758a65d9.jpg', audio: 'audio/fruits/mango.mp3' },
-            { word_tifinagh: 'ⴰⵏⴰⵏⴰⵚ', word_arabic: 'أناناس', image: 'images/e5a0d8fef5139197856d36bac0810210.jpg', audio: 'audio/fruits/pineapple.mp3' },
-            { word_tifinagh: 'ⴰⵙⵎⵎⴰⵎ', word_arabic: 'ليمون', image: 'images/3b19dbd8568f84de61fefc4d8f729e31.jpg', audio: 'audio/fruits/lemon.mp3' }
+            { word_tifinagh: 'ⴰⵙⵓⴽⵔⵉ', word_arabic: 'فراولة', image: 'images/1f2c4176709f984534a413d98042456f.jpg', audio: 'audio/fruits/strawberry.mp3' },
+            { word_tifinagh: 'ⴰⴼⵉⵔⵙ', word_arabic: 'توت', image: 'images/841022378f77be1c164746f362a2233f.jpg', audio: 'audio/fruits/raspberry.mp3' },
+            { word_tifinagh: 'ⵜⴰⵄⵏⴰⴱⵜ', word_arabic: 'كمثرى', image: 'images/63510e470878a87353f0648df479b183.jpg', audio: 'audio/fruits/pear.mp3' },
+            { word_tifinagh: 'ⵜⵉⵏⵉ', word_arabic: 'تمر', image: 'images/0675231c50821213426e8387071a5ff6.jpg', audio: 'audio/fruits/date.mp3' },
+            { word_tifinagh: 'ⴰⵙⴽⵙⵓ', word_arabic: 'خوخ', image: 'images/7d36a5c1f0340c24c29367d34199a531.jpg', audio: 'audio/fruits/peach.mp3' },
+            { word_tifinagh: 'ⴰⵔⵉⵎ', word_arabic: 'ليمون', image: 'images/8470a1e0501be802e3b2c6a91d1e4e3e.jpg', audio: 'audio/fruits/lemon.mp3' }
         ];
 
-         const vegetablesData = [
-            { word_tifinagh: 'ⵜⴰⵎⴰⵟⵉⵛⵜ', word_arabic: 'طماطم', image: 'images/6056d9839a962b5a78cddc402ef88c09.jpg', audio: 'audio/vegetables/tomato.mp3' },
-            { word_tifinagh: 'ⴰⵖⵙⵙⵉⵎ', word_arabic: 'خيار', image: 'images/c4267923b02091ba31923b94d5b81832.jpg', audio: 'audio/vegetables/cucumber.mp3' },
-            { word_tifinagh: 'ⵜⴰⵅⵉⵣⵣⵓⵜ', word_arabic: 'جزرة', image: 'images/f2c660e1af2eb42e0b2455bea8d476b5.jpg', audio: 'audio/vegetables/carrot.mp3' },
-            { word_tifinagh: 'ⴰⵥⴰⵍⵉⵎ', word_arabic: 'بصل', image: 'images/a1eca20822f37cef8dab2fa4feec8272.jpg', audio: 'audio/vegetables/onion.mp3' },
-            { word_tifinagh: 'ⵜⵉⵙⴽⵔⵜ', word_arabic: 'ثوم', image: 'images/88f83b4f34ca0aaa254aaf0eae8ee2ac.jpg', audio: 'audio/vegetables/garlic.mp3' },
-            { word_tifinagh: 'ⵉⴼⵉⴼⵍ', word_arabic: 'فلفل', image: 'images/44cbf575ceebda24dbb9fb28a2825744.jpg', audio: 'audio/vegetables/pepper.mp3' },
-            { word_tifinagh: 'ⵜⴰⵍⵍⵓⵖⴷⴰ', word_arabic: 'بطاطس', image: 'images/7b78e64a70a785fe35d853fb1568578a.jpg', audio: 'audio/vegetables/potato.mp3' },
-            { word_tifinagh: 'ⵜⴰⵎⴰⴼⴰⵔⵜ', word_arabic: 'خس', image: 'images/ef2153019a5f74807dfbab7194519d1e.jpg', audio: 'audio/vegetables/lettuce.mp3' },
-            { word_tifinagh: 'ⴱⵉⵟⵍⵊⴰⵏ', word_arabic: 'باذنجان', image: 'images/8f6a4542ebff0636e7926478d32a9bbd.jpg', audio: 'audio/vegetables/eggplant.mp3' },
-            { word_tifinagh: 'ⵜⵉⵇⵇⵙⵜ', word_arabic: ' فلفل حار', image: 'images/af35c440654de65e700818c36ef11dc9.jpg', audio: 'audio/vegetables/cauliflower.mp3' }
-        ];
-        
-         const monthsData = [
-            { word_tifinagh: 'ⵉⵏⵏⴰⵢⵔ', word_arabic: 'يناير', image: 'images/b26681eaa5caacbf1c7bfb112f546def.jpg', audio: 'audio/months/january.mp3' },
-            { word_tifinagh: 'ⴱⵕⴰⵢⵕ', word_arabic: 'فبراير', image: 'images/c391d2e8b5081720ab58b167d96abd50.jpg', audio: 'audio/months/february.mp3' },
-            { word_tifinagh: 'ⵎⴰⵕⵚ', word_arabic: 'مارس', image: 'images/8baf8accac02f718e274f7f0efe8e208.jpg', audio: 'audio/months/march.mp3' },
-            { word_tifinagh: 'ⵉⴱⵔⵉⵔ', word_arabic: 'أبريل', image: 'images/5af82e7a87c9d7d1a93173d953e2c033.jpg', audio: 'audio/months/april.mp3' },
-            { word_tifinagh: 'ⵎⴰⵢⵢⵓ', word_arabic: 'ماي', image: 'images/569cc0c8af30f8116c776a21a230f9d0.jpg', audio: 'audio/months/may.mp3' },
-            { word_tifinagh: 'ⵢⵓⵏⵢⵓ', word_arabic: 'يونيو', image: 'images/8b693928c5447c7381948bd23fa0a94c.jpg', audio: 'audio/months/june.mp3' },
-            { word_tifinagh: 'ⵢⵓⵍⵢⵓⵣ', word_arabic: 'يوليوز', image: 'images/17a897f15be1f2e5976f0eb51f4cdbc8.jpg', audio: 'audio/months/july.mp3' },
-            { word_tifinagh: 'ⵖⵓⵛⵜ', word_arabic: 'غشت', image: 'images/bbf58163e3765676d6dadffbc94dd6fb.jpg', audio: 'audio/months/august.mp3' },
-            { word_tifinagh: 'ⵛⵓⵜⴰⵏⴱⵔ', word_arabic: ' شتنبر', image: 'images/83e98be29b454d400cc1c78160a51207.jpg', audio: 'audio/months/september.mp3' },
-            { word_tifinagh: 'ⴽⵜⵓⴱⵔ', word_arabic: 'أكتوبر', image: 'images/a1b9f28aa43bda697d0bff6ae52bc06c.jpg', audio: 'audio/months/october.mp3' },
-            { word_tifinagh: 'ⵏⵓⵡⴰⵏⴱⵉⵔ', word_arabic: 'نونبر', image: 'images/d4ef0ea2c17f056b7c67aa6553b27199.jpg', audio: 'audio/months/november.mp3' },
-            { word_tifinagh: 'ⴷⵓⵊⴰⵏⴱⵉⵔ', word_arabic: 'دجنبر', image: 'images/799c20391c8da09c7d215758ab073e37.jpg', audio: 'audio/months/december.mp3' }
-        ];
-        const daysData = [
-            { word_tifinagh: 'ⴰⵢⵏⴰⵙ', word_arabic: 'الاثنين', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/days/monday.mp3' },
-            { word_tifinagh: 'ⴰⵙⵉⵏⴰⵙ', word_arabic: 'الثلاثاء', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/days/tuesday.mp3' },
-            { word_tifinagh: 'ⴰⴽⵕⴰⵙ', word_arabic: 'الأربعاء', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/days/wednesday.mp3' },
-            { word_tifinagh: 'ⴰⴽⵡⴰⵙ', word_arabic: 'الخميس', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/days/thursday.mp3' },
-            { word_tifinagh: 'ⴰⵙⵉⵎⵡⴰⵙ', word_arabic: 'الجمعة', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/days/friday.mp3' },
-            { word_tifinagh: 'ⴰⵚⵉⴹⵢⴰⵙ', word_arabic: 'السبت', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/days/saturday.mp3' },
-            { word_tifinagh: 'ⴰⵙⴰⵎⴰⵙ', word_arabic: 'الأحد', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/days/sunday.mp3' }
-        ];
+        // --- 3. بيانات التصنيفات الرئيسية ---
 
-        const familyData = [
-            { word_tifinagh: 'ⵉⵎⵎⵉ', word_arabic: 'أمي', image: 'images/5957c378462b920ceb24f6aa294b5100.jpg', audio: 'audio/family/mother.mp3' },
-            { word_tifinagh: 'ⴱⴰⴱⴰ', word_arabic: 'أبي', image: 'images/6b957498ddc6e49e618e91f7c5ce0134.jpg', audio: 'audio/family/father.mp3' },
-            { word_tifinagh: 'ⴳⵯⵎⴰ', word_arabic: 'أخي', image: 'images/8ae84a445390bd1695791a7721b2ebc0.jpg', audio: 'audio/family/brother.mp3' },
-            { word_tifinagh: 'ⵓⵍⵜⵎⴰ', word_arabic: 'أختي', image: 'images/d959a12a45c2469850c44afd379b82f8.jpg', audio: 'audio/family/sister.mp3' },
-            { word_tifinagh: 'ⴱⴰⴱⴰ ⴰⵎⵇⵇⵕⴰⵏ', word_arabic: 'جدي', image: 'images/dc84969949644c410732c57215bcaa8e.jpg', audio: 'audio/family/grandfather.mp3' },
-            { word_tifinagh: 'ⵉⵎⵎⴰ ⵜⴰⵎⵇⵕⴰⵏⵜ', word_arabic: 'جدتي', image: 'images/2bd2ccddaf31840edde5eab74b1a25ee.jpg', audio: 'audio/family/grandmother.mp3' },
-            { word_tifinagh: 'ⴷⴰⴷⴷⴰ', word_arabic: 'عمي', image: 'images/036bd0ed2c2e2dd991eb3aff426e94fb.jpg', audio: 'audio/family/uncle.mp3' },
-            { word_tifinagh: 'ⵜⴰⴱⴰ', word_arabic: 'عمتي', image: 'images/66abe3b026ff4c492fff8367587783bd.jpg', audio: 'audio/family/aunt.mp3' },
-            { word_tifinagh: 'ⴰⵏⴰ', word_arabic: 'خالي', image: 'images/036bd0ed2c2e2dd991eb3aff426e94fb.jpg', audio: 'audio/family/uncle.mp3' },
-            { word_tifinagh: 'ⵜⴰⵏⴰⵜ', word_arabic: 'خالتي', image: 'images/ff6b0dbc0e4f8d5f5df94c6df08f9c6a.jpg', audio: 'audio/family/aunt.mp3' },
+        const CATEGORIES = [
+            { id: 'tifinagh', title: 'حروف تيفيناغ', icon: 'Menu', data: tifinaghData, color: 'text-red-500', bg: 'bg-red-100', hoverBg: 'hover:bg-red-200' },
+            { id: 'numbers', title: 'الأرقام', icon: 'Info', data: numbersData, color: 'text-blue-500', bg: 'bg-blue-100', hoverBg: 'hover:bg-blue-200' },
+            { id: 'animals', title: 'الحيوانات', icon: 'Settings', data: animalsData, color: 'text-green-500', bg: 'bg-green-100', hoverBg: 'hover:bg-green-200' },
+            { id: 'school-supplies', title: 'أدوات مدرسية', icon: 'Mic', data: schoolSuppliesData, color: 'text-yellow-600', bg: 'bg-yellow-100', hoverBg: 'hover:bg-yellow-200' },
+            { id: 'seasons', title: 'فصول السنة', icon: 'Volume2', data: seasonsData, color: 'text-purple-600', bg: 'bg-purple-100', hoverBg: 'hover:bg-purple-200' },
+            { id: 'fruits', title: 'الفواكه', icon: 'ChevronRight', data: fruitsData, color: 'text-pink-500', bg: 'bg-pink-100', hoverBg: 'hover:bg-pink-200' },
         ];
 
-        const bodyPartsData = [
-            { word_tifinagh: 'ⵉⵅⴼ', word_arabic: 'الرأس', image: 'images/33dda7fe89cfd5526918246dae320059.jpg', audio: 'audio/bodyParts/head.mp3' },
-            { word_tifinagh: 'ⴰⴼⵓⵙ', word_arabic: 'اليد', image: 'images/44947c8bbf8665173c5d8836c65d6f7c.jpg', audio: 'audio/bodyParts/hand.mp3' },
-            { word_tifinagh: 'ⴰⴹⴰⵔ', word_arabic: 'القدم', image: 'images/641424d996e86204d032d59a4ccc09a0.jpg', audio: 'audio/bodyParts/foot.mp3' },
-            { word_tifinagh: 'ⵜⵉⵟ', word_arabic: 'العين', image: 'images/5e0b1a5ae043556912dec8e157f55b41.jpg', audio: 'audio/bodyParts/eye.mp3' },
-            { word_tifinagh: 'ⵉⵏⵅⴰⵔ', word_arabic: 'الأنف', image: 'images/ef9066caba835568e19799f187bdae6a.jpg', audio: 'audio/bodyParts/nose.mp3' },
-            { word_tifinagh: 'ⵉⵎⵉ', word_arabic: 'الفم', image: 'images/36ef29579225201947d3a6b0a0363dde.jpg', audio: 'audio/bodyParts/mouth.mp3' },
-            { word_tifinagh: 'ⴰⵎⵣⵣⵓⵖ', word_arabic: 'الأذن', image: 'images/13bc14d834265bd33a1fad47ee638f66.jpg', audio: 'audio/bodyParts/ear.mp3' },
-            { word_tifinagh: 'ⴰⵖⵔⵓⴹ', word_arabic: 'كتف', image: 'images/8e16145c86a1fe2b52740f204152b72f.jpg', audio: 'audio/bodyParts/arm.mp3' },
-            { word_tifinagh: 'ⴰⵎⴳⵔⴷ', word_arabic: 'الرقبة ', image: 'images/ce5e3ffa40b08796f6d1f758b36635db.jpg', audio: 'audio/bodyParts/leg.mp3' },
-            { word_tifinagh: 'ⴰⵣⵣⴰⵔ', word_arabic: 'الشعر', image: 'images/9cdb435823e315ad4767e0c8e424b8f3.jpg', audio: 'audio/bodyParts/hair.mp3' },
-            { word_tifinagh: 'ⵜⴰⴷⴰⵡⵜ', word_arabic: 'الظهر', image: 'images/6bb3e17ed531423f1ce78b27eb6a4bcd.jpg', audio: 'audio/bodyParts/back.mp3' },
-            { word_tifinagh: 'ⵉⴷⵎⴰⵔⵏ', word_arabic: 'الصدر', image: 'images/860958a31e930382525ba82294cae31c.jpg', audio: 'audio/bodyParts/chest.mp3' },
-            { word_tifinagh: 'ⴰⴷⵉⵙ', word_arabic: 'البطن', image: 'images/cd61420d75ef80789d9ef419ab6d78b3.jpg', audio: 'audio/bodyParts/belly.mp3' },
-            { word_tifinagh: 'ⵉⵍⵙ', word_arabic: 'اللسان', image: 'images/42cc4f8bfbb86fb0e60a06d523bba4d8.jpg', audio: 'audio/bodyParts/shoulder.mp3' },
-            { word_tifinagh: 'ⴰⴼⵓⴷ', word_arabic: 'الركبة', image: 'images/c38b399f59b84a1425d1100d7a142323.jpg', audio: 'audio/bodyParts/knee.mp3' },
-            { word_tifinagh: 'ⵓⵅⵙⴰⵏ', word_arabic: 'الأسنان', image: 'images/d7087ae777b9121491ddfdbbe2bf9699.jpg', audio: 'audio/bodyParts/teeth.mp3' },
-        ];
-        
-        
-        const colorsData = [
-            { word_tifinagh: 'ⴰⵣⴳⴳⵯⴰⵖ', word_arabic: 'أحمر', image: 'images/b008721ac76def4ddfdbdb51fc82d320.jpg', audio: 'audio/colors/red.mp3' },
-            { word_tifinagh: 'ⴰⵥⵕⵡⴰⵍ', word_arabic: 'أزرق', image: 'images/3424729aa184959857a097fb421b480e.jpg', audio: 'audio/colors/blue.mp3' },
-            { word_tifinagh: 'ⴰⵡⵔⴰⵖ', word_arabic: 'أصفر', image: 'images/d871dd62033ef51b734e405d2be3db6f.jpg', audio: 'audio/colors/yellow.mp3' },
-            { word_tifinagh: 'ⴰⵣⴳⵣⴰⵡ', word_arabic: 'أخضر', image: 'images/a58989552838c41eba05072814e62c90.jpg', audio: 'audio/colors/green.mp3' },
-            { word_tifinagh: 'ⴰⵍⵉⵎⵓⵏⵉ', word_arabic: 'برتقالي', image: 'images/2957461e42e514fc8f28cdfcf6a26266.jpg', audio: 'audio/colors/orange.mp3' },
-            { word_tifinagh: 'ⴰⵎⴽⵥⴰⵢ', word_arabic: 'بنفسجي', image: 'images/47c698f09fd37ff179f4ba31edd74b9a.jpg', audio: 'audio/colors/purple.mp3' },
-            { word_tifinagh: 'ⴰⴷⵎⵎⴰⵏ', word_arabic: 'بني', image: 'images/08a3dc3e988b98980e7252e07ad7356c.jpg', audio: 'audio/colors/brown.mp3' },
-            { word_tifinagh: 'ⴰⵣⵡⴰⵡⴰⵖ', word_arabic: 'وردي', image: 'images/18656b92846235109510e255b899a4ec.jpg', audio: 'audio/colors/pink.mp3' },
-            { word_tifinagh: 'ⴰⵙⴳⴳ��ⵏ', word_arabic: 'أسود', image: 'images/8a6ed41c982c97428b484ab13a95afc2.jpg', audio: 'audio/colors/black.mp3' },
-            { word_tifinagh: 'ⵓⵎⵍⵉⵍ', word_arabic: 'أبيض', image: 'images/4da7f34849bab634d5bc9da642d921dd.jpg', audio: 'audio/colors/white.mp3' }
-        ];
 
-        const storiesData = [
-        {
-             title: "أسد صغير شجاع",
-             image: "images/Screenshot_20250927_141840_One Read.jpg",
-             text: "في غابة بعيدة، عاش أسد صغير اسمه سمير. كان سمير يحلم بأن يصبح شجاعًا مثل والده الملك..."
-        },
-        {
-        title: "الأرنب والسلحفاة",
-        image: "images/Screenshot_20250927_140922_One Read.jpg",
-        text: "كان الأرنب يتفاخر دائمًا بأنه أسرع حيوان في الغابة. تحدته السلحفاة في سباق، فضحك الأرنب..."
-        },   
-        ];
-        
-        // *************** دمج وتحويل البيانات إلى هيكل التطبيق ***************
-
-        const LEARNING_DATA = {
-            // حروف تيفيناغ
-            tifinaghLetters: tifinaghData.map(item => {
-                const parts = item.word_arabic.split('-');
-                return {
-                    main: item.letter, 
-                    word: parts.length > 1 ? parts[0].trim() : item.word_arabic.trim(), // كلمة عربية
-                    transliteration: parts.length > 1 ? parts[1].trim() : '', // كلمة تيفيناغ كمثال
-                    imageUrl: item.image, 
-                    audioUrl: item.audio,
-                };
-            }),
-            // أرقام (Numbers)
-            numbers: numbersData.map(item => ({ 
-                main: item.number, 
-                word: item.word_arabic.trim(), // الكلمة العربية
-                transliteration: item.word_tifinagh.trim(), // الكلمة تيفيناغ
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-            // أدوات مدرسية (Tools)
-            tools: schoolSuppliesData.map(item => ({ 
-                main: item.word_tifinagh.trim(), // الكلمة تيفيناغ
-                word: item.word_arabic.trim(), // الكلمة العربية
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-            // فواكه (Fruits)
-            fruits: fruitsData.map(item => ({ 
-                main: item.word_tifinagh.trim(),
-                word: item.word_arabic.trim(),
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-            // خضر (Vegetables)
-            vegetables: vegetablesData.map(item => ({ 
-                main: item.word_tifinagh.trim(),
-                word: item.word_arabic.trim(),
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-            // حيوانات (Animals)
-            animals: animalsData.map(item => ({ 
-                main: item.word_tifinagh.trim(),
-                word: item.word_arabic.trim(),
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-            // أجزاء الجسم (Body)
-            body: bodyPartsData.map(item => ({ 
-                main: item.word_tifinagh.trim(),
-                word: item.word_arabic.trim(),
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-            // أيام الأسبوع (Days)
-            days: daysData.map(item => ({ 
-                main: item.word_tifinagh.trim(),
-                word: item.word_arabic.trim(),
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-            // أشهر السنة (Months)
-            months: monthsData.map(item => ({ 
-                main: item.word_tifinagh.trim(),
-                word: item.word_arabic.trim(),
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-            // العائلة (Family)
-            family: familyData.map(item => ({ 
-                main: item.word_tifinagh.trim(),
-                word: item.word_arabic.trim(),
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-             // ألوان (Colors)
-            colors: colorsData.map(item => {
-                // تلوين مربع اللون اعتمادا على الكلمة العربية (للتجربة)
-                const colorMap = {
-                    'أحمر': 'bg-red-600', 'أزرق': 'bg-blue-600', 'أصفر': 'bg-yellow-500', 
-                    'أخضر': 'bg-green-600', 'برتقالي': 'bg-orange-500', 'بنفسجي': 'bg-purple-600',
-                    'بني': 'bg-amber-800', 'وردي': 'bg-pink-500', 'أسود': 'bg-gray-800', 'أبيض': 'bg-gray-200'
-                };
-                return {
-                    main: item.word_tifinagh.trim(),
-                    word: item.word_arabic.trim(),
-                    imageUrl: item.image, 
-                    audioUrl: item.audio,
-                    colorClass: colorMap[item.word_arabic.trim()] || 'bg-gray-400',
-                };
-            }),
-             // فصول السنة (Seasons)
-            seasons: seasonsData.map(item => ({ 
-                main: item.word_tifinagh.trim(),
-                word: item.word_arabic.trim(),
-                imageUrl: item.image, 
-                audioUrl: item.audio,
-            })),
-            // قصص وألعاب (Games)
-            games: storiesData.map(item => ({ 
-                main: item.title, // العنوان
-                word: item.text, // محتوى القصة
-                imageUrl: item.image,
-                audioUrl: null, // لا يوجد صوت محدد هنا
-            })),
+        // --- 4. إدارة حالة التطبيق (State Management) ---
+
+        let appState = {
+            currentScreen: 'home', // 'home', 'tifinagh', 'numbers', 'animals', etc.
+            selectedCategory: null, // الكائن الكامل للفئة المختارة
+            currentIndex: 0, // مؤشر العنصر الحالي في قائمة الفئة
         };
 
+        const setState = (newState) => {
+            // تحديث الحالة
+            appState = { ...appState, ...newState };
 
-        const CATEGORIES = [
-            { id: 'tifinaghLetters', title: 'حروف تيفيناغ', subtitle: 'ⴰ, ⴱ, ⴳ...', iconName: 'AArrowUp', imageUrl: 'https://placehold.co/300x200/ff66b2/ffffff?text=حروف+تيفيناغ' },
-            { id: 'numbers', title: 'أرقام', subtitle: '0, 1, 2...', iconName: 'Hash', imageUrl: 'https://placehold.co/300x200/ffa500/ffffff?text=أرقام' },
-            { id: 'colors', title: 'ألوان', subtitle: 'ⴰⵣⴳⴳⵯⴰⵖ, ⴰⵥⵕⵡⴰⵍ', iconName: 'Palette', imageUrl: 'https://placehold.co/300x200/40e0d0/ffffff?text=ألوان' },
-            { id: 'tools', title: 'أدوات مدرسية', subtitle: 'ⴰⴽⵕⵕⴰⵊ, ⴰⴷⴰⵍⵉⵙ', iconName: 'PencilRuler', imageUrl: 'https://placehold.co/300x200/6a5acd/ffffff?text=أدوات+مدرسية' },
-            { id: 'family', title: 'العائلة', subtitle: 'ⵉⵎⵎⵉ, ⴱⴰⴱⴰ', iconName: 'Users', imageUrl: 'https://placehold.co/300x200/dc143c/ffffff?text=العائلة' },
-            { id: 'vegetables', title: 'خضر', subtitle: 'ⵜⴰⵎⴰⵟⵉⵛⵜ, ⴰⵖⵙⵙⵉⵎ', iconName: 'Carrot', imageUrl: 'https://placehold.co/300x200/228b22/ffffff?text=خضر' },
-            { id: 'fruits', title: 'فواكه', subtitle: 'ⵜⴰⴷⴼⴼⵓⵢⵜ, ⵜⴰⴱⴰⵏⴰⵏⵜ', iconName: 'Apple', imageUrl: 'https://placehold.co/300x200/ffd700/000000?text=فواكه' },
-            { id: 'animals', title: 'حيوانات', subtitle: 'ⴰⵎⵓⵛⵛ, ⴰⵢⴷⵉ', iconName: 'Cat', imageUrl: 'https://placehold.co/300x200/1e90ff/ffffff?text=حيوانات' },
-            { id: 'body', title: 'أجزاء الجسم', subtitle: 'ⵉⵅⴼ, ⴰⴼⵓⵙ', iconName: 'Hand', imageUrl: 'https://placehold.co/300x200/ff4500/ffffff?text=أجزاء+الجسم' },
-            { id: 'days', title: 'أيام الأسبوع', subtitle: 'ⴰⵢⵏⴰⵙ - ⴰⵙⴰⵎⴰⵙ', iconName: 'CalendarDays', imageUrl: 'https://placehold.co/300x200/800080/ffffff?text=أيام+الأسبوع' },
-            { id: 'months', title: 'أشهر السنة', subtitle: 'ⵉⵏⵏⴰⵢⵔ - ⴷⵓⵊⴰⵏⴱⵉⵔ', iconName: 'CalendarClock', imageUrl: 'https://placehold.co/300x200/008080/ffffff?text=أشهر+السنة' },
-            { id: 'seasons', title: 'فصول السنة', subtitle: 'ⵜⴰⴳⵔⵙⵜ, ⵜⴰⴼⵙⵓⵜ', iconName: 'CloudRain', imageUrl: 'https://placehold.co/300x200/4682b4/ffffff?text=فصول+السنة' },
-            { id: 'games', title: 'قصص وألعاب', subtitle: 'تسلية وتعلم', iconName: 'Gamepad', imageUrl: 'https://placehold.co/300x200/808080/ffffff?text=قصص+وألعاب' },
-        ];
+            // إعادة رسم التطبيق
+            renderApp();
+        };
 
+        // --- 5. دالة تشغيل الصوت ---
 
-        // --- 3. إدارة حالة التطبيق (متاحة عالمياً) ---
+        const playAudio = (audioPath) => {
+            if (!audioPath) return;
 
-        const appState = {
-            currentScreen: 'home',
-            selectedCategory: null,
-            currentIndex: 0,
+            // بناء مسار افتراضي (يجب أن تكون المسارات صحيحة في ملفاتك)
+            const fullPath = audioPath; 
+            
+            try {
+                const audio = new Audio(fullPath);
+                audio.play().catch(e => console.error("Error playing audio:", e));
+            } catch (error) {
+                console.error("Failed to create or play audio:", error);
+            }
         };
 
-        // دالة تحديث الحالة وإعادة رسم التطبيق
-        window.setState = (newState) => {
-            if (newState.currentScreen && newState.currentScreen !== appState.selectedCategory) {
-                appState.currentIndex = 0; 
-            }
 
-            Object.assign(appState, newState);
-            renderApp();
-        };
+        // --- 6. مكونات الرسم (Rendering Components) ---
 
-        // --- 4. مكونات الواجهة المشتركة (رأس الصفحة وتذييلها) ---
+        // *************** الشريط العلوي (Header) ***************
 
         const renderHeader = () => {
-            const headerElement = document.getElementById('app-header');
-            const categoryMeta = CATEGORIES.find(c => c.id === appState.selectedCategory);
+            const header = document.getElementById('app-header');
             
-            let title = APP_NAME;
-            // استخدام اسم الفئة إذا لم تكن الشاشة الرئيسية
-            if (categoryMeta && appState.currentScreen !== 'home') {
-                 title = categoryMeta.title; 
-            }
-
-            headerElement.innerHTML = `
-                <div class="flex items-center justify-between p-4 h-16 bg-blue-800 text-white shadow-lg rounded-b-xl">
-                    <button onclick="setState({currentScreen: 'home', selectedCategory: null})" 
-                            class="p-1 rounded-full hover:bg-white/10 transition-colors" aria-label="القائمة الرئيسية">
-                        ${renderIcon('Menu', 'w-6 h-6 text-white')}
-                    </button>
-                    <h1 class="text-xl font-extrabold text-white">${title}</h1>
-                    <div class="w-8 h-8 rounded-full bg-yellow-400 border-2 border-white flex items-center justify-center text-sm font-bold text-blue-900 shadow-md">
-                        ${renderIcon('User', 'w-4 h-4 text-blue-900', 3)}
+            if (appState.currentScreen === 'home') {
+                // شريط رئيسي في صفحة 'الرئيسية'
+                header.innerHTML = `
+                    <div class="flex items-center justify-between p-4 bg-white shadow-md border-b border-gray-100">
+                        <h1 class="text-xl font-black text-red-600 tracking-wider flex items-center">
+                             <span class="text-3xl">${APP_NAME.charAt(0)}</span>
+                             <span class="text-gray-700">${APP_NAME.substring(1)}</span>
+                        </h1>
+                        <button onclick="setState({currentScreen: 'settings'})" class="p-2 text-gray-500 hover:text-red-600">
+                            ${renderIcon('Settings', 'w-6 h-6')}
+                        </button>
                     </div>
-                </div>
-            `;
+                `;
+            } else if (CATEGORIES.some(c => c.id === appState.currentScreen)) {
+                // شريط الشاشة التعليمية
+                const category = CATEGORIES.find(c => c.id === appState.currentScreen);
+                header.innerHTML = `
+                    <div class="flex items-center justify-between p-3 bg-white shadow-lg border-b border-gray-100">
+                        <button onclick="setState({currentScreen: 'home', selectedCategory: null})" 
+                                class="p-2 text-red-600 hover:text-red-700 transition duration-150">
+                            ${renderIcon('ChevronRight', 'w-8 h-8')}
+                        </button>
+                        <h2 class="text-xl font-extrabold text-gray-700">${category.title}</h2>
+                        <button onclick="playAudio(appState.selectedCategory.data[appState.currentIndex].audio)"
+                                class="p-2 ${category.color} hover:opacity-80 transition duration-150 control-btn w-12 h-12 flex items-center justify-center bg-white shadow-lg">
+                            ${renderIcon('Volume2', 'w-6 h-6', 2.5)}
+                        </button>
+                    </div>
+                `;
+            } else {
+                // شريط الشاشات الفرعية الأخرى (مثل الإعدادات)
+                let title = '';
+                switch (appState.currentScreen) {
+                    case 'settings': title = 'الإعدادات'; break;
+                    case 'share': title = 'مشاركة التطبيق'; break;
+                    case 'profile': title = 'ملفي الشخصي'; break;
+                    case 'info': title = 'عن التطبيق'; break;
+                    default: title = 'عودة';
+                }
+                header.innerHTML = `
+                    <div class="flex items-center p-3 bg-white shadow-md border-b border-gray-100">
+                        <button onclick="setState({currentScreen: 'home'})" 
+                                class="p-2 text-red-600 hover:text-red-700 transition duration-150">
+                            ${renderIcon('ChevronRight', 'w-8 h-8')}
+                        </button>
+                        <h2 class="text-xl font-bold text-gray-700 mr-4">${title}</h2>
+                    </div>
+                `;
+            }
         };
+        
+        // *************** شريط التنقل السفلي (Footer / Navigation) ***************
 
         const renderFooter = () => {
-            const footerElement = document.getElementById('app-footer');
+            const footer = document.getElementById('app-footer');
+            
+            // لا تظهر الشريط السفلي إلا في الشاشة الرئيسية
+            if (appState.currentScreen !== 'home') {
+                footer.innerHTML = '';
+                return;
+            }
+
             const navItems = [
-                { id: 'home', iconName: 'Home', label: 'الرئيسية' },
-                { id: 'share', iconName: 'Share2', label: 'مشاركة' },
-                { id: 'profile', iconName: 'User', label: 'الملف' },
-                { id: 'settings', iconName: 'Settings', label: 'إعدادات' },
-                { id: 'info', iconName: 'Info', label: 'حول' },
+                { id: 'info', label: 'عن', icon: 'Info' },
+                { id: 'share', label: 'مشاركة', icon: 'Share2' },
+                { id: 'home', label: 'الرئيسية', icon: 'Home' },
+                { id: 'profile', label: 'ملفي', icon: 'User' },
+                { id: 'settings', label: 'إعدادات', icon: 'Settings' },
             ];
 
-            const activeScreen = appState.currentScreen === 'home' ? 'home' : 'home'; 
-
-            footerElement.innerHTML = `
-                <div class="bg-white p-2 rounded-t-3xl shadow-[0_-5px_15px_rgba(0,0,0,0.1)]">
-                    <div class="flex justify-around items-center">
-                        ${navItems.map(item => {
-                            const isActive = item.id === activeScreen;
-                            return `
-                                <button
-                                    onclick="setState({currentScreen: '${item.id === 'home' ? 'home' : appState.currentScreen}', selectedCategory: '${item.id === 'home' ? null : appState.selectedCategory}'})"
-                                    class="flex flex-col items-center p-2 rounded-xl transition-all ${isActive ? 'text-blue-600' : 'text-gray-400 hover:text-blue-400'}"
-                                    aria-label="${item.label}"
-                                >
-                                    <div class="p-2 rounded-full transition-all ${isActive ? 'bg-blue-100 shadow-md' : ''}">
-                                        ${renderIcon(item.iconName, 'w-5 h-5')}
-                                    </div>
-                                    <span class="text-xs font-medium mt-1">${item.label}</span>
-                                </button>
-                            `;
-                        }).join('')}
-                    </div>
-                </div>
-            `;
-        };
-
-        // --- 5. شاشة 1: الشاشة الرئيسية (Home Screen) ---
-
-        const renderHomeScreen = () => {
-            const content = document.getElementById('app-content');
-            
-            const cardsHTML = CATEGORIES.map(category => `
-                <button
-                    onclick="setState({currentScreen: '${category.id}', selectedCategory: '${category.id}'})"
-                    class="relative w-full h-32 rounded-2xl overflow-hidden card-shadow group"
-                    aria-label="الذهاب إلى قسم ${category.title}"
-                >
-                    <img 
-                        src="${category.imageUrl || 'https://placehold.co/300x200/cccccc/000000?text=صورة+بديلة'}" 
-                        alt="${category.title}" 
-                        class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
-                        onerror="this.onerror=null; this.src='https://placehold.co/300x200/cccccc/000000?text=صورة+${category.title}';"
-                    />
-                    
-                    <div class="absolute inset-0 flex flex-col items-center justify-center p-3 text-white font-extrabold text-lg image-overlay">
-                        <span class="text-xl font-black text-center leading-tight drop-shadow-md">${category.title}</span>
-                        <span class="text-xs opacity-80 mt-1 drop-shadow-sm">${category.subtitle}</span>
-                    </div>
+            const navHtml = navItems.map(item => `
+                <button onclick="setState({currentScreen: '${item.id}'})" 
+                        class="flex flex-col items-center justify-center p-2 text-sm transition-colors duration-200 
+                        ${appState.currentScreen === item.id ? 'text-red-600 font-bold' : 'text-gray-500 hover:text-red-600'}">
+                    ${renderIcon(item.icon, 'w-6 h-6')}
+                    <span class="mt-1">${item.label}</span>
                 </button>
             `).join('');
 
-            content.innerHTML = `
-                <div class="p-4 bg-gray-50 min-h-[calc(100vh-130px)]">
-                    <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">أقسام التعلم</h2>
-                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
-                        ${cardsHTML}
+            footer.innerHTML = `
+                <nav class="bg-white border-t border-gray-200 shadow-xl">
+                    <div class="flex justify-around items-center h-16 max-w-lg mx-auto">
+                        ${navHtml}
                     </div>
-                    <p class="text-center text-gray-500 mt-6 text-sm">
-                        اختر قسمًا لتبدأ رحلة التعلم الممتعة!
-                    </p>
-                </div>
+                </nav>
             `;
         };
 
-        // --- 6. شاشة 2 و 3: شاشة التعلم العامة (Learning Screen) ---
+        // *************** شاشة عرض فئة تعليمية (Learning Screen) ***************
 
         const renderLearningScreen = () => {
-            const categoryId = appState.selectedCategory;
             const content = document.getElementById('app-content');
-            // استخدام البيانات المدمجة
-            const data = LEARNING_DATA[categoryId] || [];
-            const categoryMeta = CATEGORIES.find(c => c.id === categoryId);
-
-            if (data.length === 0 || !categoryMeta) {
-                 content.innerHTML = `
-                    <div class="p-8 min-h-[calc(100vh-130px)] flex flex-col items-center justify-center bg-gray-50">
-                        <p class="text-xl font-bold text-red-500 mb-4">عفواً! لا توجد بيانات لهذا القسم.</p>
-                        <button onclick="setState({currentScreen: 'home', selectedCategory: null})"
-                                class="px-6 py-3 bg-blue-600 text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 card-shadow">
-                            العودة للرئيسية
-                        </button>
-                    </div>
-                `;
-                return;
+            const category = CATEGORIES.find(c => c.id === appState.currentScreen);
+            
+            // إذا لم يتم تحديد الفئة بعد، اضبطها
+            if (!appState.selectedCategory || appState.selectedCategory.id !== category.id) {
+                appState.selectedCategory = category;
+                appState.currentIndex = 0;
             }
 
-            const currentItem = data[appState.currentIndex];
-            const isLettersCategory = categoryId === 'tifinaghLetters'; // تم التحديث إلى tifinaghLetters
-            const isNumbersCategory = categoryId === 'numbers';
-            const isColorsCategory = categoryId === 'colors';
-            const isStoriesCategory = categoryId === 'games';
-            
-            // دالة تشغيل الصوت
-            window.playAudio = () => {
-                if (currentItem.audioUrl) {
-                    new Audio(currentItem.audioUrl).play().catch(e => console.error("Error playing audio:", e));
-                } else {
-                    // رسالة تنبيه يمكن استبدالها بواجهة أفضل
-                    alert('ملف صوتي غير متوفر لهذا العنصر.');
-                }
-            };
-            
-            // دوال التنقل
-            window.handleNext = () => {
-                const newIndex = (appState.currentIndex + 1) % data.length;
-                setState({ currentIndex: newIndex });
+            const data = category.data;
+            const index = appState.currentIndex;
+            const currentItem = data[index];
+            const totalItems = data.length;
+
+            const handleNext = () => {
+                const nextIndex = (index + 1) % totalItems;
+                setState({ currentIndex: nextIndex });
             };
-            window.handlePrev = () => {
-                const newIndex = (appState.currentIndex - 1 + data.length) % data.length;
-                setState({ currentIndex: newIndex });
+
+            const handlePrev = () => {
+                const prevIndex = (index - 1 + totalItems) % totalItems;
+                setState({ currentIndex: prevIndex });
             };
 
-            // تحديد تدرج لون البطاقة حسب الفئة (يمكن إضافة المزيد)
-            const mainCardGradient = isLettersCategory
-                ? 'from-orange-400 to-pink-300' 
-                : isNumbersCategory
-                ? 'from-green-500 to-teal-400'
-                : 'from-blue-400 to-purple-300'; 
+            const getWordParts = (word) => {
+                const parts = word.split('-');
+                if (parts.length === 2) {
+                    return { arabic: parts[0], tifinagh: parts[1] };
+                }
+                return { arabic: word, tifinagh: '' };
+            };
 
+            const wordParts = getWordParts(currentItem.word_arabic);
             
-            // تحديد محتوى الصورة/اللون
-            let illustrationContent;
-            if (isColorsCategory && currentItem.word !== 'أبيض') {
-                // للألوان: عرض مربع ملون كبير
-                illustrationContent = `
-                    <div class="w-36 h-36 sm:w-40 sm:h-40 rounded-full shadow-inner ${currentItem.colorClass || 'bg-gray-400'} border-4 border-white/80"></div>
-                `;
-            } else {
-                // للحروف والأرقام وبقية الفئات: عرض الصورة
-                illustrationContent = `
-                    <img 
-                        src="${currentItem.imageUrl || 'https://placehold.co/150x150/cccccc/000000?text=صورة'}" 
-                        alt="${currentItem.word}" 
-                        class="w-36 h-36 sm:w-40 sm:h-40 rounded-xl object-cover shadow-lg border-4 border-white/50"
-                        onerror="this.onerror=null; this.src='https://placehold.co/150x150/cccccc/000000?text=صورة+${categoryMeta.title}';"
-                    />
-                `;
-            }
-
-            // تحديد محتوى الكلمة الرئيسية والفرعية في المركز
-            let mainWordDisplay;
-            let secondaryText;
-
-            if (isLettersCategory) {
-                // للحروف: التركيز على كلمة تيفيناغ كمثال (ⴰⴳⴰⴷⵉⵔ)
-                mainWordDisplay = currentItem.transliteration;
-                secondaryText = `الحرف: ${currentItem.main} | ${currentItem.word}`; // الحرف (ⴰ) والكلمة العربية (جدار)
-            } else if (isNumbersCategory) {
-                // للأرقام: التركيز على الكلمة تيفيناغ (ⵢⴰⵏ )
-                mainWordDisplay = currentItem.transliteration;
-                secondaryText = `الرقم: ${currentItem.main} | ${currentItem.word}`; // الرقم (1) والكلمة العربية (واحد)
-            } else if (isStoriesCategory) {
-                // للقصص: العنوان والنص المختصر
-                mainWordDisplay = currentItem.main; // العنوان
-                secondaryText = currentItem.word.substring(0, 100) + '... (اضغط لتسجيل قراءتك)';
-            }
-            else {
-                // للمحاور الأخرى: التركيز على الكلمة تيفيناغ (ⴰⵎⵓⵛⵛ)
-                mainWordDisplay = currentItem.main;
-                secondaryText = currentItem.word; // الكلمة العربية (قط)
-            }
-
-            // إنشاء عنصر الزاوية الشرطي (فقط للحروف)
-            const cornerElementHTML = isLettersCategory ? `
-                <div class="absolute top-0 right-0 p-3 bg-white/20 backdrop-blur-sm rounded-tr-3xl rounded-bl-3xl shadow-md text-white">
-                    <h2 class="font-black text-4xl icon-shadow">
-                        ${currentItem.main}
-                    </h2>
-                </div>
-            ` : '';
-
+            // تشغيل الصوت تلقائيًا عند الانتقال (اختياري)
+             window.onload = () => {
+                 playAudio(currentItem.audio);
+             };
 
             content.innerHTML = `
-                <div class="p-4 flex flex-col items-center justify-between min-h-[calc(100vh-130px)] bg-gray-50">
+                <div class="p-4 pt-0 min-h-[calc(100vh-130px)] flex flex-col justify-between">
                     
-                    <div class="w-full bg-gradient-to-br ${mainCardGradient} rounded-3xl p-4 sm:p-6 shadow-2xl mt-2 flex flex-col justify-center items-center relative">
+                    <div class="bg-white rounded-2xl overflow-hidden shadow-2xl card-shadow mt-4">
                         
-                        ${cornerElementHTML}
-
-                        <h2 class="text-white text-2xl font-bold mb-4 drop-shadow-md mt-6">${categoryMeta.title}</h2>
-                        
-                        <div class="flex items-center justify-center w-full p-3 mb-4">
-                            ${illustrationContent}
+                        <div class="relative h-64 sm:h-80 w-full">
+                            <img src="${currentItem.image}" alt="${wordParts.arabic}" class="w-full h-full object-cover">
+                            <div class="absolute inset-0 image-overlay flex items-end justify-center pb-4">
+                                <span class="text-white text-5xl sm:text-7xl font-extrabold icon-shadow p-2 rounded-lg leading-tight">
+                                    ${currentItem.letter || wordParts.tifinagh || currentItem.word_tifinagh}
+                                </span>
+                            </div>
                         </div>
 
-                        <div class="mt-1 text-center text-white">
-                          <p class="text-4xl font-black mb-1 drop-shadow-lg leading-tight">${mainWordDisplay}</p>
-                          <p class="text-base font-medium opacity-80 italic drop-shadow-sm">
-                            ${secondaryText}
-                          </p>
+                        <div class="p-6 text-center">
+                            ${currentItem.letter ? `<p class="text-4xl font-black text-gray-800 mb-2">${currentItem.letter}</p>` : ''}
+                            <p class="text-2xl font-extrabold text-red-600 mb-1">${wordParts.arabic}</p>
+                            ${wordParts.tifinagh ? `<p class="text-3xl font-black text-gray-600">${wordParts.tifinagh}</p>` : ''}
+                            ${!currentItem.letter && !wordParts.tifinagh ? `<p class="text-3xl font-black text-gray-600">${currentItem.word_tifinagh}</p>` : ''}
                         </div>
                     </div>
+                    
+                    <div class="flex justify-between items-center p-4">
+                        <div class="text-sm font-semibold text-gray-500 p-2 border border-gray-300 rounded-full w-24 text-center">
+                            ${index + 1} / ${totalItems}
+                        </div>
 
-                    <div class="w-full mt-4 bg-white p-4 rounded-xl shadow-lg flex items-center gap-3">
-                        <button onclick="playAudio()" class="p-2 rounded-full bg-green-100 hover:bg-green-200 transition-colors" aria-label="تشغيل الصوت">
-                            ${renderIcon('Volume2', 'w-7 h-7 text-green-600 flex-shrink-0', 3)}
-                        </button>
-                        <div class="flex-grow">
-                             <p class="text-sm text-gray-700 font-bold">استمع إلى النطق</p>
-                             <p class="text-xs text-gray-500 mt-1 text-left">${currentItem.audioUrl ? 'ملف الصوت متوفر' : 'ملف الصوت غير متوفر'}</p>
+                        <div class="flex space-x-4 space-x-reverse">
+                            <button onclick="handlePrev()" 
+                                    class="control-btn bg-red-500 text-white shadow-xl hover:bg-red-600 flex items-center justify-center">
+                                ${renderIcon('ChevronRight', 'w-8 h-8', 2.5)}
+                            </button>
+                            <button onclick="handleNext()" 
+                                    class="control-btn bg-red-500 text-white shadow-xl hover:bg-red-600 flex items-center justify-center">
+                                ${renderIcon('ChevronLeft', 'w-8 h-8', 2.5)}
+                            </button>
                         </div>
-                         
-                        <p class="text-sm text-blue-800 font-bold flex-shrink-0">
-                           ${isStoriesCategory ? 'تسجيل قراءة' : 'نطق'}
-                        </p>
+                        
+                        <button onclick="playAudio(currentItem.audio)"
+                                class="control-btn bg-yellow-500 text-white shadow-xl hover:bg-yellow-600 flex items-center justify-center w-12 h-12 p-3">
+                            ${renderIcon('Volume2', 'w-6 h-6', 2.5)}
+                        </button>
                     </div>
+                </div>
+            `;
+        };
 
-                    <div class="flex justify-around w-full mt-4 mb-4">
-                        <button onclick="handlePrev()" class="control-btn bg-green-500 hover:bg-green-600 shadow-xl shadow-green-300/70" aria-label="العنصر السابق">
-                            ${renderIcon('ChevronRight', 'w-8 h-8 text-white', 3)}
-                        </button>
+        // *************** الشاشة الرئيسية (Home Screen) ***************
 
-                        <button onclick="console.log('Microphone Activated!')" class="control-btn p-6 bg-red-500 hover:bg-red-600 shadow-2xl shadow-red-400/70" aria-label="تسجيل النطق">
-                            ${renderIcon('Mic', 'w-10 h-10 text-white', 3)}
+        const renderHomeScreen = () => {
+            const content = document.getElementById('app-content');
+            
+            // إذا كانت الشاشة الحالية ليست الصفحة الرئيسية، نعرض شاشة "قيد الإنشاء"
+            if (appState.currentScreen !== 'home') {
+                 // شاشة قيد الإنشاء
+                content.innerHTML = `
+                    <div class="p-8 min-h-[calc(100vh-130px)] flex flex-col items-center justify-center bg-gray-50">
+                        <p class="text-xl font-bold text-purple-600 mb-4">هذا القسم قيد الإنشاء!</p>
+                        <button onclick="setState({currentScreen: 'home', selectedCategory: null})"
+                                class="px-6 py-3 bg-purple-600 text-white font-bold rounded-xl shadow-lg hover:bg-purple-700 card-shadow">
+                            العودة للرئيسية
                         </button>
+                    </div>
+                `;
+                 return;
+            }
 
-                        <button onclick="handleNext()" class="control-btn bg-blue-500 hover:bg-blue-600 shadow-xl shadow-blue-300/70" aria-label="العنصر التالي">
-                            ${renderIcon('ChevronLeft', 'w-8 h-8 text-white', 3)}
-                        </button>
+
+            const categoryCards = CATEGORIES.map(category => `
+                <div onclick="setState({currentScreen: '${category.id}'})" 
+                     class="flex items-center p-4 ${category.bg} rounded-xl card-shadow ${category.hoverBg} cursor-pointer transition duration-200">
+                    <div class="p-3 rounded-full ${category.color} bg-white shadow-md">
+                        ${renderIcon(category.icon, 'w-8 h-8')}
+                    </div>
+                    <div class="mr-4">
+                        <h3 class="text-lg font-extrabold text-gray-800">${category.title}</h3>
+                        <p class="text-sm text-gray-500">تعلم ${category.data.length} عنصر</p>
+                    </div>
+                     <div class="mr-auto text-gray-400">
+                        ${renderIcon('ChevronLeft', 'w-6 h-6')}
+                    </div>
+                </div>
+            `).join('');
+
+            content.innerHTML = `
+                <div class="p-4">
+                    <div class="grid grid-cols-1 gap-4">
+                        ${categoryCards}
                     </div>
                 </div>
             `;