const cardSets = {
                body: {
                    nameUk: "🧍 Тіло людини",
                    nameEn: "🧍 Body",
                    nameFr: "🧍 Corps",
                    nameEs: "🧍 Cuerpo",
                    nameIt: "🧍 Corpo",
                    nameAr: "🧍 الجسم",
                    nameKu: "🧍 جەستە",
                    nameFa: "🧍 بدن",
                    icon: "🧍",
                    cards: [
                        { german: "der Kopf", ukrainian: "голова", english: "head", french: "tête", spanish: "cabeza", italian: "testa", arabic: "رأس", kurdish: "سەر", persian: "سر", article: "der", emoji: "👤" },
                        { german: "das Gesicht", ukrainian: "обличчя", english: "face", french: "visage", spanish: "cara", italian: "viso", arabic: "وجه", kurdish: "دەموچاو", persian: "صورت", article: "das", emoji: "😊" },
                        { german: "das Auge", ukrainian: "око", english: "eye", french: "œil", spanish: "ojo", italian: "occhio", arabic: "عين", kurdish: "چاو", persian: "چشم", article: "das", emoji: "👁️" },
                        { german: "die Nase", ukrainian: "ніс", english: "nose", french: "nez", spanish: "nariz", italian: "naso", arabic: "أنف", kurdish: "لوت", persian: "بینی", article: "die", emoji: "👃" },
                        { german: "der Mund", ukrainian: "рот", english: "mouth", french: "bouche", spanish: "boca", italian: "bocca", arabic: "فم", kurdish: "دەم", persian: "دهان", article: "der", emoji: "👄" },
                        { german: "das Ohr", ukrainian: "вухо", english: "ear", french: "oreille", spanish: "oreja", italian: "orecchio", arabic: "أذن", kurdish: "گوێ", persian: "گوش", article: "das", emoji: "👂" },
                        { german: "der Zahn", ukrainian: "зуб", english: "tooth", french: "dent", spanish: "diente", italian: "dente", arabic: "سن", kurdish: "ددان", persian: "دندان", article: "der", emoji: "🦷" },
                        { german: "die Lippe", ukrainian: "губа", english: "lip", french: "lèvre", spanish: "labio", italian: "labbro", arabic: "شفة", kurdish: "لێو", persian: "لب", article: "die", emoji: "💋" },
                        { german: "die Zunge", ukrainian: "язик", english: "tongue", french: "langue", spanish: "lengua", italian: "lingua", arabic: "لسان", kurdish: "زمان", persian: "زبان", article: "die", emoji: "👅" },
                        { german: "der Hals", ukrainian: "шия", english: "neck", french: "cou", spanish: "cuello", italian: "collo", arabic: "رقبة", kurdish: "ملی", persian: "گردن", article: "der", emoji: "🧣" },
                        { german: "die Schulter", ukrainian: "плече", english: "shoulder", french: "épaule", spanish: "hombro", italian: "spalla", arabic: "كتف", kurdish: "شان", persian: "شانه", article: "die", emoji: "💪" },
                        { german: "der Arm", ukrainian: "рука (від плеча)", english: "arm", french: "bras", spanish: "brazo", italian: "braccio", arabic: "ذراع", kurdish: "باڵ", persian: "بازو", article: "der", emoji: "💪" },
                        { german: "die Hand", ukrainian: "рука (кисть)", english: "hand", french: "main", spanish: "mano", italian: "mano", arabic: "يد", kurdish: "دەست", persian: "دست", article: "die", emoji: "✋" },
                        { german: "der Finger", ukrainian: "палець", english: "finger", french: "doigt", spanish: "dedo", italian: "dito", arabic: "إصبع", kurdish: "پەنجە", persian: "انگشت", article: "der", emoji: "👆" },
                        { german: "die Brust", ukrainian: "груди", english: "chest", french: "poitrine", spanish: "pecho", italian: "petto", arabic: "صدر", kurdish: "سنگ", persian: "سینه", article: "die", emoji: "🫁" },
                        { german: "der Bauch", ukrainian: "живіт", english: "belly", french: "ventre", spanish: "vientre", italian: "pancia", arabic: "بطن", kurdish: "سک", persian: "شکم", article: "der", emoji: "🤰" },
                        { german: "der Rücken", ukrainian: "спина", english: "back", french: "dos", spanish: "espalda", italian: "schiena", arabic: "ظهر", kurdish: "پشت", persian: "پشت", article: "der", emoji: "🧑" },
                        { german: "das Bein", ukrainian: "нога", english: "leg", french: "jambe", spanish: "pierna", italian: "gamba", arabic: "ساق", kurdish: "قاچ", persian: "پا", article: "das", emoji: "🦵" },
                        { german: "das Knie", ukrainian: "коліно", english: "knee", french: "genou", spanish: "rodilla", italian: "ginocchio", arabic: "ركبة", kurdish: "ئەژنۆ", persian: "زانو", article: "das", emoji: "🦵" },
                        { german: "der Fuß", ukrainian: "стопа", english: "foot", french: "pied", spanish: "pie", italian: "piede", arabic: "قدم", kurdish: "پێ", persian: "پا", article: "der", emoji: "🦶" },
                        { german: "das Haar", ukrainian: "волосся", english: "hair", french: "cheveux", spanish: "cabello", italian: "capelli", arabic: "شعر", kurdish: "پرچ", persian: "مو", article: "das", emoji: "💇" },
                        { german: "die Haut", ukrainian: "шкіра", english: "skin", french: "peau", spanish: "piel", italian: "pelle", arabic: "جلد", kurdish: "پێست", persian: "پوست", article: "die", emoji: "🤲" },
                        { german: "das Herz", ukrainian: "серце", english: "heart", french: "cœur", spanish: "corazón", italian: "cuore", arabic: "قلب", kurdish: "دڵ", persian: "قلب", article: "das", emoji: "❤️" },
                    ]
                },
                greetings: {
                    nameUk: "👋 Привітання",
                    nameEn: "👋 Greetings",
                    nameFr: "👋 Salutations",
                    nameEs: "👋 Saludos",
                    nameIt: "👋 Saluti",
                    nameAr: "👋 التحيات",
                    nameKu: "👋 سڵاوەکان",
                    nameFa: "👋 سلام",
                    icon: "👋",
                    cards: [
                        { german: "Guten Morgen", ukrainian: "Доброго ранку", english: "Good morning", french: "Bonjour", spanish: "Buenos días", italian: "Buongiorno", arabic: "صباح الخير", kurdish: "بەیانی باش", persian: "صبح بخیر", article: "", emoji: "🌅" },
                        { german: "Guten Tag", ukrainian: "Добридень", english: "Good day", french: "Bonjour", spanish: "Buen día", italian: "Buon pomeriggio", arabic: "نهارك سعيد", kurdish: "ڕۆژت باش", persian: "روز بخیر", article: "", emoji: "☀️" },
                        { german: "Guten Abend", ukrainian: "Добрий вечір", english: "Good evening", french: "Bonsoir", spanish: "Buenas tardes", italian: "Buonasera", arabic: "مساء الخير", kurdish: "ئێوارەت باش", persian: "عصر بخیر", article: "", emoji: "🌆" },
                        { german: "Gute Nacht", ukrainian: "На добраніч", english: "Good night", french: "Bonne nuit", spanish: "Buenas noches", italian: "Buonanotte", arabic: "تصبح على خير", kurdish: "شەوت باش", persian: "شب بخیر", article: "", emoji: "🌙" },
                        { german: "Hallo", ukrainian: "Привіт", english: "Hello", french: "Salut", spanish: "Hola", italian: "Ciao", arabic: "مرحبا", kurdish: "سڵاو", persian: "سلام", article: "", emoji: "👋" },
                        { german: "Tschüss", ukrainian: "Бувай", english: "Bye", french: "Au revoir", spanish: "Adiós", italian: "Ciao", arabic: "وداعا", kurdish: "خوا حافیز", persian: "خداحافظ", article: "", emoji: "👋" },
                        { german: "Danke", ukrainian: "Дякую", english: "Thank you", french: "Merci", spanish: "Gracias", italian: "Grazie", arabic: "شكرا", kurdish: "سوپاس", persian: "متشکرم", article: "", emoji: "🙏" },
                        { german: "Bitte", ukrainian: "Будь ласка", english: "Please", french: "S'il vous plaît", spanish: "Por favor", italian: "Prego", arabic: "من فضلك", kurdish: "تکایە", persian: "لطفا", article: "", emoji: "🙏" },
                        { german: "Entschuldigung", ukrainian: "Вибачте", english: "Excuse me", french: "Excusez-moi", spanish: "Disculpe", italian: "Scusi", arabic: "عفوا", kurdish: "ببورە", persian: "ببخشید", article: "", emoji: "🙇" },
                        { german: "Ja", ukrainian: "Так", english: "Yes", french: "Oui", spanish: "Sí", italian: "Sì", arabic: "نعم", kurdish: "بەڵێ", persian: "بله", article: "", emoji: "✅" },
                        { german: "Nein", ukrainian: "Ні", english: "No", french: "Non", spanish: "No", italian: "No", arabic: "لا", kurdish: "نەخێر", persian: "نه", article: "", emoji: "❌" },
                    ]
                },
                food: {
                    nameUk: "🍎 Їжа",
                    nameEn: "🍎 Food",
                    nameFr: "🍎 Nourriture",
                    nameEs: "🍎 Comida",
                    nameIt: "🍎 Cibo",
                    nameAr: "🍎 طعام",
                    nameKu: "🍎 خواردن",
                    nameFa: "🍎 غذا",
                    icon: "🍎",
                    cards: [
                        { german: "das Brot", ukrainian: "хліб", english: "bread", french: "pain", spanish: "pan", italian: "pane", arabic: "خبز", kurdish: "نان", persian: "نان", article: "das", emoji: "🍞" },
                        { german: "die Butter", ukrainian: "масло", english: "butter", french: "beurre", spanish: "mantequilla", italian: "burro", arabic: "زبدة", kurdish: "کەرە", persian: "کره", article: "die", emoji: "🧈" },
                        { german: "der Käse", ukrainian: "сир", english: "cheese", french: "fromage", spanish: "queso", italian: "formaggio", arabic: "جبن", kurdish: "پەنیر", persian: "پنیر", article: "der", emoji: "🧀" },
                        { german: "die Milch", ukrainian: "молоко", english: "milk", french: "lait", spanish: "leche", italian: "latte", arabic: "حليب", kurdish: "شیر", persian: "شیر", article: "die", emoji: "🥛" },
                        { german: "das Wasser", ukrainian: "вода", english: "water", french: "eau", spanish: "agua", italian: "acqua", arabic: "ماء", kurdish: "ئاو", persian: "آب", article: "das", emoji: "💧" },
                        { german: "der Kaffee", ukrainian: "кава", english: "coffee", french: "café", spanish: "café", italian: "caffè", arabic: "قهوة", kurdish: "قاوە", persian: "قهوه", article: "der", emoji: "☕" },
                        { german: "der Tee", ukrainian: "чай", english: "tea", french: "thé", spanish: "té", italian: "tè", arabic: "شاي", kurdish: "چا", persian: "چای", article: "der", emoji: "🍵" },
                        { german: "das Fleisch", ukrainian: "м'ясо", english: "meat", french: "viande", spanish: "carne", italian: "carne", arabic: "لحم", kurdish: "گۆشت", persian: "گوشت", article: "das", emoji: "🥩" },
                        { german: "der Fisch", ukrainian: "риба", english: "fish", french: "poisson", spanish: "pescado", italian: "pesce", arabic: "سمك", kurdish: "ماسی", persian: "ماهی", article: "der", emoji: "🐟" },
                        { german: "das Gemüse", ukrainian: "овочі", english: "vegetables", french: "légumes", spanish: "verduras", italian: "verdure", arabic: "خضروات", kurdish: "سەوزە", persian: "سبزیجات", article: "das", emoji: "🥬" },
                        { german: "das Obst", ukrainian: "фрукти", english: "fruit", french: "fruits", spanish: "frutas", italian: "frutta", arabic: "فواكه", kurdish: "میوە", persian: "میوه", article: "das", emoji: "🍇" },
                        { german: "der Apfel", ukrainian: "яблуко", english: "apple", french: "pomme", spanish: "manzana", italian: "mela", arabic: "تفاحة", kurdish: "سێو", persian: "سیب", article: "der", emoji: "🍎" },
                        { german: "die Banane", ukrainian: "банан", english: "banana", french: "banane", spanish: "plátano", italian: "banana", arabic: "موز", kurdish: "مۆز", persian: "موز", article: "die", emoji: "🍌" },
                        { german: "die Orange", ukrainian: "апельсин", english: "orange", french: "orange", spanish: "naranja", italian: "arancia", arabic: "برتقال", kurdish: "پرتەقاڵ", persian: "پرتقال", article: "die", emoji: "🍊" },
                        { german: "die Kartoffel", ukrainian: "картопля", english: "potato", french: "pomme de terre", spanish: "patata", italian: "patata", arabic: "بطاطس", kurdish: "پەتاتە", persian: "سیب‌زمینی", article: "die", emoji: "🥔" },
                    ]
                },
                colors: {
                    nameUk: "🎨 Кольори",
                    nameEn: "🎨 Colors",
                    nameFr: "🎨 Couleurs",
                    nameEs: "🎨 Colores",
                    nameIt: "🎨 Colori",
                    nameAr: "🎨 ألوان",
                    nameKu: "🎨 ڕەنگەکان",
                    nameFa: "🎨 رنگ‌ها",
                    icon: "🎨",
                    cards: [
                        { german: "rot", ukrainian: "червоний", english: "red", french: "rouge", spanish: "rojo", italian: "rosso", arabic: "أحمر", kurdish: "سوور", persian: "قرمز", article: "", emoji: "🔴" },
                        { german: "blau", ukrainian: "синій", english: "blue", french: "bleu", spanish: "azul", italian: "blu", arabic: "أزرق", kurdish: "شین", persian: "آبی", article: "", emoji: "🔵" },
                        { german: "grün", ukrainian: "зелений", english: "green", french: "vert", spanish: "verde", italian: "verde", arabic: "أخضر", kurdish: "سەوز", persian: "سبز", article: "", emoji: "🟢" },
                        { german: "gelb", ukrainian: "жовтий", english: "yellow", french: "jaune", spanish: "amarillo", italian: "giallo", arabic: "أصفر", kurdish: "زەرد", persian: "زرد", article: "", emoji: "🟡" },
                        { german: "schwarz", ukrainian: "чорний", english: "black", french: "noir", spanish: "negro", italian: "nero", arabic: "أسود", kurdish: "ڕەش", persian: "سیاه", article: "", emoji: "⚫" },
                        { german: "weiß", ukrainian: "білий", english: "white", french: "blanc", spanish: "blanco", italian: "bianco", arabic: "أبيض", kurdish: "سپی", persian: "سفید", article: "", emoji: "⚪" },
                        { german: "grau", ukrainian: "сірий", english: "gray", french: "gris", spanish: "gris", italian: "grigio", arabic: "رمادي", kurdish: "ڕەساسی", persian: "خاکستری", article: "", emoji: "🩶" },
                        { german: "braun", ukrainian: "коричневий", english: "brown", french: "marron", spanish: "marrón", italian: "marrone", arabic: "بني", kurdish: "قاوەیی", persian: "قهوه‌ای", article: "", emoji: "🟤" },
                        { german: "orange", ukrainian: "помаранчевий", english: "orange", french: "orange", spanish: "naranja", italian: "arancione", arabic: "برتقالي", kurdish: "پرتەقاڵی", persian: "نارنجی", article: "", emoji: "🟠" },
                        { german: "rosa", ukrainian: "рожевий", english: "pink", french: "rose", spanish: "rosa", italian: "rosa", arabic: "وردي", kurdish: "پەمەیی", persian: "صورتی", article: "", emoji: "🩷" },
                        { german: "lila", ukrainian: "фіолетовий", english: "purple", french: "violet", spanish: "morado", italian: "viola", arabic: "بنفسجي", kurdish: "مۆر", persian: "بنفش", article: "", emoji: "🟣" },
                    ]
                },
                numbers: {
                    nameUk: "🔢 Числа",
                    nameEn: "🔢 Numbers",
                    nameFr: "🔢 Nombres",
                    nameEs: "🔢 Números",
                    nameIt: "🔢 Numeri",
                    nameAr: "🔢 أرقام",
                    nameKu: "🔢 ژمارەکان",
                    nameFa: "🔢 اعداد",
                    icon: "🔢",
                    cards: [
                        { german: "null", ukrainian: "нуль", english: "zero", french: "zéro", spanish: "cero", italian: "zero", arabic: "صفر", kurdish: "سفر", persian: "صفر", article: "", emoji: "0️⃣" },
                        { german: "eins", ukrainian: "один", english: "one", french: "un", spanish: "uno", italian: "uno", arabic: "واحد", kurdish: "یەک", persian: "یک", article: "", emoji: "1️⃣" },
                        { german: "zwei", ukrainian: "два", english: "two", french: "deux", spanish: "dos", italian: "due", arabic: "اثنان", kurdish: "دوو", persian: "دو", article: "", emoji: "2️⃣" },
                        { german: "drei", ukrainian: "три", english: "three", french: "trois", spanish: "tres", italian: "tre", arabic: "ثلاثة", kurdish: "سێ", persian: "سه", article: "", emoji: "3️⃣" },
                        { german: "vier", ukrainian: "чотири", english: "four", french: "quatre", spanish: "cuatro", italian: "quattro", arabic: "أربعة", kurdish: "چوار", persian: "چهار", article: "", emoji: "4️⃣" },
                        { german: "fünf", ukrainian: "п'ять", english: "five", french: "cinq", spanish: "cinco", italian: "cinque", arabic: "خمسة", kurdish: "پێنج", persian: "پنج", article: "", emoji: "5️⃣" },
                        { german: "sechs", ukrainian: "шість", english: "six", french: "six", spanish: "seis", italian: "sei", arabic: "ستة", kurdish: "شەش", persian: "شش", article: "", emoji: "6️⃣" },
                        { german: "sieben", ukrainian: "сім", english: "seven", french: "sept", spanish: "siete", italian: "sette", arabic: "سبعة", kurdish: "حەوت", persian: "هفت", article: "", emoji: "7️⃣" },
                        { german: "acht", ukrainian: "вісім", english: "eight", french: "huit", spanish: "ocho", italian: "otto", arabic: "ثمانية", kurdish: "هەشت", persian: "هشت", article: "", emoji: "8️⃣" },
                        { german: "neun", ukrainian: "дев'ять", english: "nine", french: "neuf", spanish: "nueve", italian: "nove", arabic: "تسعة", kurdish: "نۆ", persian: "نه", article: "", emoji: "9️⃣" },
                        { german: "zehn", ukrainian: "десять", english: "ten", french: "dix", spanish: "diez", italian: "dieci", arabic: "عشرة", kurdish: "دە", persian: "ده", article: "", emoji: "🔟" },
                    ]
                },
                family: {
                    nameUk: "👨‍👩‍👧‍👦 Сім'я",
                    nameEn: "👨‍👩‍👧‍👦 Family",
                    nameFr: "👨‍👩‍👧‍👦 Famille",
                    nameEs: "👨‍👩‍👧‍👦 Familia",
                    nameIt: "👨‍👩‍👧‍👦 Famiglia",
                    nameAr: "👨‍👩‍👧‍👦 عائلة",
                    nameKu: "👨‍👩‍👧‍👦 خێزان",
                    nameFa: "👨‍👩‍👧‍👦 خانواده",
                    icon: "👨‍👩‍👧‍👦",
                    cards: [
                        { german: "die Familie", ukrainian: "сім'я", english: "family", french: "famille", spanish: "familia", italian: "famiglia", arabic: "عائلة", kurdish: "خێزان", persian: "خانواده", article: "die", emoji: "👨‍👩‍👧‍👦" },
                        { german: "der Vater", ukrainian: "батько", english: "father", french: "père", spanish: "padre", italian: "padre", arabic: "أب", kurdish: "باوک", persian: "پدر", article: "der", emoji: "👨" },
                        { german: "die Mutter", ukrainian: "мати", english: "mother", french: "mère", spanish: "madre", italian: "madre", arabic: "أم", kurdish: "دایک", persian: "مادر", article: "die", emoji: "👩" },
                        { german: "der Bruder", ukrainian: "брат", english: "brother", french: "frère", spanish: "hermano", italian: "fratello", arabic: "أخ", kurdish: "برا", persian: "برادر", article: "der", emoji: "👦" },
                        { german: "die Schwester", ukrainian: "сестра", english: "sister", french: "sœur", spanish: "hermana", italian: "sorella", arabic: "أخت", kurdish: "خوشک", persian: "خواهر", article: "die", emoji: "👧" },
                        { german: "der Sohn", ukrainian: "син", english: "son", french: "fils", spanish: "hijo", italian: "figlio", arabic: "ابن", kurdish: "کوڕ", persian: "پسر", article: "der", emoji: "👶" },
                        { german: "die Tochter", ukrainian: "дочка", english: "daughter", french: "fille", spanish: "hija", italian: "figlia", arabic: "ابنة", kurdish: "کچ", persian: "دختر", article: "die", emoji: "👶" },
                        { german: "der Großvater", ukrainian: "дідусь", english: "grandfather", french: "grand-père", spanish: "abuelo", italian: "nonno", arabic: "جد", kurdish: "باپیر", persian: "پدربزرگ", article: "der", emoji: "👴" },
                        { german: "die Großmutter", ukrainian: "бабуся", english: "grandmother", french: "grand-mère", spanish: "abuela", italian: "nonna", arabic: "جدة", kurdish: "داپیر", persian: "مادربزرگ", article: "die", emoji: "👵" },
                        { german: "das Kind", ukrainian: "дитина", english: "child", french: "enfant", spanish: "niño", italian: "bambino", arabic: "طفل", kurdish: "منداڵ", persian: "کودک", article: "das", emoji: "🧒" },
                    ]
                },
                transport: {
                    nameUk: "🚗 Транспорт",
                    nameEn: "🚗 Transport",
                    nameFr: "🚗 Transport",
                    nameEs: "🚗 Transporte",
                    nameIt: "🚗 Trasporto",
                    nameAr: "🚗 نقل",
                    nameKu: "🚗 گواستنەوە",
                    nameFa: "🚗 حمل و نقل",
                    icon: "🚗",
                    cards: [
                        { german: "das Auto", ukrainian: "автомобіль", english: "car", french: "voiture", spanish: "coche", italian: "auto", arabic: "سيارة", kurdish: "ئۆتۆمبێل", persian: "اتومبیل", article: "das", emoji: "🚗" },
                        { german: "der Bus", ukrainian: "автобус", english: "bus", french: "bus", spanish: "autobús", italian: "autobus", arabic: "حافلة", kurdish: "پاس", persian: "اتوبوس", article: "der", emoji: "🚌" },
                        { german: "die Straßenbahn", ukrainian: "трамвай", english: "tram", french: "tramway", spanish: "tranvía", italian: "tram", arabic: "ترام", kurdish: "ترام", persian: "تراموا", article: "die", emoji: "🚊" },
                        { german: "der Zug", ukrainian: "поїзд", english: "train", french: "train", spanish: "tren", italian: "treno", arabic: "قطار", kurdish: "شەمەندەفەر", persian: "قطار", article: "der", emoji: "🚂" },
                        { german: "das Flugzeug", ukrainian: "літак", english: "airplane", french: "avion", spanish: "avión", italian: "aereo", arabic: "طائرة", kurdish: "فڕۆکە", persian: "هواپیما", article: "das", emoji: "✈️" },
                        { german: "das Schiff", ukrainian: "корабель", english: "ship", french: "navire", spanish: "barco", italian: "nave", arabic: "سفينة", kurdish: "کەشتی", persian: "کشتی", article: "das", emoji: "🚢" },
                        { german: "das Fahrrad", ukrainian: "велосипед", english: "bicycle", french: "vélo", spanish: "bicicleta", italian: "bicicletta", arabic: "دراجة", kurdish: "پاسکێل", persian: "دوچرخه", article: "das", emoji: "🚴" },
                        { german: "das Motorrad", ukrainian: "мотоцикл", english: "motorcycle", french: "moto", spanish: "moto", italian: "moto", arabic: "دراجة نارية", kurdish: "موتۆرسیکل", persian: "موتورسیکلت", article: "das", emoji: "🏍️" },
                        { german: "das Taxi", ukrainian: "таксі", english: "taxi", french: "taxi", spanish: "taxi", italian: "taxi", arabic: "تاكسي", kurdish: "تاکسی", persian: "تاکسی", article: "das", emoji: "🚕" },
                        { german: "die U-Bahn", ukrainian: "метро", english: "subway", french: "métro", spanish: "metro", italian: "metro", arabic: "مترو", kurdish: "مەترۆ", persian: "مترو", article: "die", emoji: "🚇" },
                        { german: "der Lastwagen", ukrainian: "вантажівка", english: "truck", french: "camion", spanish: "camión", italian: "camion", arabic: "شاحنة", kurdish: "بارهەڵگر", persian: "کامیون", article: "der", emoji: "🚚" },
                        { german: "das Boot", ukrainian: "човен", english: "boat", french: "bateau", spanish: "bote", italian: "barca", arabic: "قارب", kurdish: "بەلەم", persian: "قایق", article: "das", emoji: "⛵" },
                        { german: "der Hubschrauber", ukrainian: "гелікоптер", english: "helicopter", french: "hélicoptère", spanish: "helicóptero", italian: "elicottero", arabic: "هليكوبتر", kurdish: "هەلیکۆپتەر", persian: "هلیکوپتر", article: "der", emoji: "🚁" },
                        { german: "der Roller", ukrainian: "самокат", english: "scooter", french: "trottinette", spanish: "patinete", italian: "monopattino", arabic: "سكوتر", kurdish: "سکوتەر", persian: "اسکوتر", article: "der", emoji: "🛴" },
                    ]
                }
            };

            const getCategoryName = (setKey) => {
                const set = cardSets[setKey];
                switch(selectedLanguage) {
                    case 'ukrainian': return set.nameUk;
                    case 'english': return set.nameEn;
                    case 'french': return set.nameFr;
                    case 'spanish': return set.nameEs;
                    case 'italian': return set.nameIt;
                    case 'arabic': return set.nameAr;
                    case 'kurdish': return set.nameKu;
                    case 'persian': return set.nameFa;
                    default: return set.nameUk;
                }
            };<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    
    <!-- SEO Meta Tags -->
    <title>Картки для вивчення німецької мови онлайн безкоштовно | Deutsch lernen</title>
    <meta name="description" content="Безкоштовні інтерактивні картки для вивчення німецької мови. Вивчайте німецькі слова з перекладом українською, англійською, французькою, іспанською та італійською. Тіло людини, їжа, кольори, числа, сім'я, транспорт німецькою.">
    <meta name="keywords" content="німецька мова, вивчення німецької, німецькі слова, картки німецькою, Deutsch lernen, вивчення мов онлайн, німецька для початківців, артиклі der die das, німецька безкоштовно, flashcards German">
    <meta name="author" content="German Language Learning">
    <meta name="robots" content="index, follow">
    <meta name="language" content="Ukrainian">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Вивчення німецької мови - Інтерактивні картки безкоштовно">
    <meta property="og:description" content="Безкоштовні картки для вивчення німецьких слів. 7 тем, 5 мов перекладу. Навчайтеся онлайн!">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="uk_UA">
    
    <!-- Mobile Optimization -->
    <meta name="theme-color" content="#6366f1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Deutsch Lernen">
    
    <!-- Favicon -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🇩🇪</text></svg>">
    
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        /* 3D Flip Animation */
        .perspective {
            perspective: 1000px;
        }
        .transform-style-3d {
            transform-style: preserve-3d;
        }
        .backface-hidden {
            backface-visibility: hidden;
        }
        .rotate-y-180 {
            transform: rotateY(180deg);
        }
        
        /* Mobile Optimization */
        @media (max-width: 640px) {
            .card-text-mobile {
                font-size: 2.5rem !important;
            }
            .card-height-mobile {
                height: 300px !important;
            }
        }
        
        /* Smooth Scrolling */
        html {
            scroll-behavior: smooth;
        }
        
        /* Print Styles */
        @media print {
            .no-print {
                display: none !important;
            }
        }
        
        /* Loading Animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        .animate-fade-in {
            animation: fadeIn 0.3s ease-out;
        }
        
        /* RTL Support for Arabic, Kurdish, Persian */
        .rtl {
            direction: rtl;
        }
    </style>
</head>
<body>
    <!-- Structured Data for SEO -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Картки для вивчення німецької мови",
        "description": "Безкоштовні інтерактивні картки для вивчення німецьких слів онлайн",
        "applicationCategory": "EducationalApplication",
        "operatingSystem": "Any",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
        },
        "inLanguage": ["de", "uk", "en", "fr", "es", "it"],
        "educationalLevel": "Beginner to Intermediate",
        "learningResourceType": "Flashcards"
    }
    </script>

    <div id="root"></div>

    <script type="text/babel">
        const { useState, useEffect } = React;

        const FlashcardApp = () => {
            const cardSets = {
                body: {
                    name: "🧍 Тіло людини",
                    icon: "🧍",
                    cards: [
                        { german: "der Kopf", ukrainian: "голова", english: "head", french: "tête", spanish: "cabeza", italian: "testa", arabic: "رأس", kurdish: "سەر", persian: "سر", article: "der" },
                        { german: "das Gesicht", ukrainian: "обличчя", english: "face", french: "visage", spanish: "cara", italian: "viso", arabic: "وجه", kurdish: "دەموچاو", persian: "صورت", article: "das" },
                        { german: "das Auge", ukrainian: "око", english: "eye", french: "œil", spanish: "ojo", italian: "occhio", arabic: "عين", kurdish: "چاو", persian: "چشم", article: "das" },
                        { german: "die Nase", ukrainian: "ніс", english: "nose", french: "nez", spanish: "nariz", italian: "naso", arabic: "أنف", kurdish: "لوت", persian: "بینی", article: "die" },
                        { german: "der Mund", ukrainian: "рот", english: "mouth", french: "bouche", spanish: "boca", italian: "bocca", arabic: "فم", kurdish: "دەم", persian: "دهان", article: "der" },
                        { german: "das Ohr", ukrainian: "вухо", english: "ear", french: "oreille", spanish: "oreja", italian: "orecchio", arabic: "أذن", kurdish: "گوێ", persian: "گوش", article: "das" },
                        { german: "der Zahn", ukrainian: "зуб", english: "tooth", french: "dent", spanish: "diente", italian: "dente", arabic: "سن", kurdish: "ددان", persian: "دندان", article: "der" },
                        { german: "die Lippe", ukrainian: "губа", english: "lip", french: "lèvre", spanish: "labio", italian: "labbro", arabic: "شفة", kurdish: "لێو", persian: "لب", article: "die" },
                        { german: "die Zunge", ukrainian: "язик", english: "tongue", french: "langue", spanish: "lengua", italian: "lingua", arabic: "لسان", kurdish: "زمان", persian: "زبان", article: "die" },
                        { german: "der Hals", ukrainian: "шия", english: "neck", french: "cou", spanish: "cuello", italian: "collo", arabic: "رقبة", kurdish: "ملی", persian: "گردن", article: "der" },
                        { german: "die Schulter", ukrainian: "плече", english: "shoulder", french: "épaule", spanish: "hombro", italian: "spalla", arabic: "كتف", kurdish: "شان", persian: "شانه", article: "die" },
                        { german: "der Arm", ukrainian: "рука (від плеча)", english: "arm", french: "bras", spanish: "brazo", italian: "braccio", arabic: "ذراع", kurdish: "باڵ", persian: "بازو", article: "der" },
                        { german: "die Hand", ukrainian: "рука (кисть)", english: "hand", french: "main", spanish: "mano", italian: "mano", arabic: "يد", kurdish: "دەست", persian: "دست", article: "die" },
                        { german: "der Finger", ukrainian: "палець", english: "finger", french: "doigt", spanish: "dedo", italian: "dito", arabic: "إصبع", kurdish: "پەنجە", persian: "انگشت", article: "der" },
                        { german: "die Brust", ukrainian: "груди", english: "chest", french: "poitrine", spanish: "pecho", italian: "petto", arabic: "صدر", kurdish: "سنگ", persian: "سینه", article: "die" },
                        { german: "der Bauch", ukrainian: "живіт", english: "belly", french: "ventre", spanish: "vientre", italian: "pancia", arabic: "بطن", kurdish: "سک", persian: "شکم", article: "der" },
                        { german: "der Rücken", ukrainian: "спина", english: "back", french: "dos", spanish: "espalda", italian: "schiena", arabic: "ظهر", kurdish: "پشت", persian: "پشت", article: "der" },
                        { german: "das Bein", ukrainian: "нога", english: "leg", french: "jambe", spanish: "pierna", italian: "gamba", arabic: "ساق", kurdish: "قاچ", persian: "پا", article: "das" },
                        { german: "das Knie", ukrainian: "коліно", english: "knee", french: "genou", spanish: "rodilla", italian: "ginocchio", arabic: "ركبة", kurdish: "ئەژنۆ", persian: "زانو", article: "das" },
                        { german: "der Fuß", ukrainian: "стопа", english: "foot", french: "pied", spanish: "pie", italian: "piede", arabic: "قدم", kurdish: "پێ", persian: "پا", article: "der" },
                        { german: "das Haar", ukrainian: "волосся", english: "hair", french: "cheveux", spanish: "cabello", italian: "capelli", arabic: "شعر", kurdish: "پرچ", persian: "مو", article: "das" },
                        { german: "die Haut", ukrainian: "шкіра", english: "skin", french: "peau", spanish: "piel", italian: "pelle", arabic: "جلد", kurdish: "پێست", persian: "پوست", article: "die" },
                        { german: "das Herz", ukrainian: "серце", english: "heart", french: "cœur", spanish: "corazón", italian: "cuore", arabic: "قلب", kurdish: "دڵ", persian: "قلب", article: "das" },
                    ]
                },
                greetings: {
                    name: "👋 Привітання",
                    icon: "👋",
                    cards: [
                        { german: "Guten Morgen", ukrainian: "Доброго ранку", english: "Good morning", french: "Bonjour", spanish: "Buenos días", italian: "Buongiorno", article: "" },
                        { german: "Guten Tag", ukrainian: "Добридень", english: "Good day", french: "Bonjour", spanish: "Buen día", italian: "Buon pomeriggio", article: "" },
                        { german: "Guten Abend", ukrainian: "Добрий вечір", english: "Good evening", french: "Bonsoir", spanish: "Buenas tardes", italian: "Buonasera", article: "" },
                        { german: "Gute Nacht", ukrainian: "На добраніч", english: "Good night", french: "Bonne nuit", spanish: "Buenas noches", italian: "Buonanotte", article: "" },
                        { german: "Hallo", ukrainian: "Привіт", english: "Hello", french: "Salut", spanish: "Hola", italian: "Ciao", article: "" },
                        { german: "Tschüss", ukrainian: "Бувай", english: "Bye", french: "Au revoir", spanish: "Adiós", italian: "Ciao", article: "" },
                        { german: "Danke", ukrainian: "Дякую", english: "Thank you", french: "Merci", spanish: "Gracias", italian: "Grazie", article: "" },
                        { german: "Bitte", ukrainian: "Будь ласка", english: "Please", french: "S'il vous plaît", spanish: "Por favor", italian: "Prego", article: "" },
                        { german: "Entschuldigung", ukrainian: "Вибачте", english: "Excuse me", french: "Excusez-moi", spanish: "Disculpe", italian: "Scusi", article: "" },
                        { german: "Ja", ukrainian: "Так", english: "Yes", french: "Oui", spanish: "Sí", italian: "Sì", article: "" },
                        { german: "Nein", ukrainian: "Ні", english: "No", french: "Non", spanish: "No", italian: "No", article: "" },
                    ]
                },
                food: {
                    name: "🍎 Їжа",
                    icon: "🍎",
                    cards: [
                        { german: "das Brot", ukrainian: "хліб", english: "bread", french: "pain", spanish: "pan", italian: "pane", article: "das" },
                        { german: "die Butter", ukrainian: "масло", english: "butter", french: "beurre", spanish: "mantequilla", italian: "burro", article: "die" },
                        { german: "der Käse", ukrainian: "сир", english: "cheese", french: "fromage", spanish: "queso", italian: "formaggio", article: "der" },
                        { german: "die Milch", ukrainian: "молоко", english: "milk", french: "lait", spanish: "leche", italian: "latte", article: "die" },
                        { german: "das Wasser", ukrainian: "вода", english: "water", french: "eau", spanish: "agua", italian: "acqua", article: "das" },
                        { german: "der Kaffee", ukrainian: "кава", english: "coffee", french: "café", spanish: "café", italian: "caffè", article: "der" },
                        { german: "der Tee", ukrainian: "чай", english: "tea", french: "thé", spanish: "té", italian: "tè", article: "der" },
                        { german: "das Fleisch", ukrainian: "м'ясо", english: "meat", french: "viande", spanish: "carne", italian: "carne", article: "das" },
                        { german: "der Fisch", ukrainian: "риба", english: "fish", french: "poisson", spanish: "pescado", italian: "pesce", article: "der" },
                        { german: "das Gemüse", ukrainian: "овочі", english: "vegetables", french: "légumes", spanish: "verduras", italian: "verdure", article: "das" },
                        { german: "das Obst", ukrainian: "фрукти", english: "fruit", french: "fruits", spanish: "frutas", italian: "frutta", article: "das" },
                        { german: "der Apfel", ukrainian: "яблуко", english: "apple", french: "pomme", spanish: "manzana", italian: "mela", article: "der" },
                        { german: "die Banane", ukrainian: "банан", english: "banana", french: "banane", spanish: "plátano", italian: "banana", article: "die" },
                        { german: "die Orange", ukrainian: "апельсин", english: "orange", french: "orange", spanish: "naranja", italian: "arancia", article: "die" },
                        { german: "die Kartoffel", ukrainian: "картопля", english: "potato", french: "pomme de terre", spanish: "patata", italian: "patata", article: "die" },
                    ]
                },
                colors: {
                    name: "🎨 Кольори",
                    icon: "🎨",
                    cards: [
                        { german: "rot", ukrainian: "червоний", english: "red", french: "rouge", spanish: "rojo", italian: "rosso", article: "" },
                        { german: "blau", ukrainian: "синій", english: "blue", french: "bleu", spanish: "azul", italian: "blu", article: "" },
                        { german: "grün", ukrainian: "зелений", english: "green", french: "vert", spanish: "verde", italian: "verde", article: "" },
                        { german: "gelb", ukrainian: "жовтий", english: "yellow", french: "jaune", spanish: "amarillo", italian: "giallo", article: "" },
                        { german: "schwarz", ukrainian: "чорний", english: "black", french: "noir", spanish: "negro", italian: "nero", article: "" },
                        { german: "weiß", ukrainian: "білий", english: "white", french: "blanc", spanish: "blanco", italian: "bianco", article: "" },
                        { german: "grau", ukrainian: "сірий", english: "gray", french: "gris", spanish: "gris", italian: "grigio", article: "" },
                        { german: "braun", ukrainian: "коричневий", english: "brown", french: "marron", spanish: "marrón", italian: "marrone", article: "" },
                        { german: "orange", ukrainian: "помаранчевий", english: "orange", french: "orange", spanish: "naranja", italian: "arancione", article: "" },
                        { german: "rosa", ukrainian: "рожевий", english: "pink", french: "rose", spanish: "rosa", italian: "rosa", article: "" },
                        { german: "lila", ukrainian: "фіолетовий", english: "purple", french: "violet", spanish: "morado", italian: "viola", article: "" },
                    ]
                },
                numbers: {
                    name: "🔢 Числа",
                    icon: "🔢",
                    cards: [
                        { german: "null", ukrainian: "нуль", english: "zero", french: "zéro", spanish: "cero", italian: "zero", article: "" },
                        { german: "eins", ukrainian: "один", english: "one", french: "un", spanish: "uno", italian: "uno", article: "" },
                        { german: "zwei", ukrainian: "два", english: "two", french: "deux", spanish: "dos", italian: "due", article: "" },
                        { german: "drei", ukrainian: "три", english: "three", french: "trois", spanish: "tres", italian: "tre", article: "" },
                        { german: "vier", ukrainian: "чотири", english: "four", french: "quatre", spanish: "cuatro", italian: "quattro", article: "" },
                        { german: "fünf", ukrainian: "п'ять", english: "five", french: "cinq", spanish: "cinco", italian: "cinque", article: "" },
                        { german: "sechs", ukrainian: "шість", english: "six", french: "six", spanish: "seis", italian: "sei", article: "" },
                        { german: "sieben", ukrainian: "сім", english: "seven", french: "sept", spanish: "siete", italian: "sette", article: "" },
                        { german: "acht", ukrainian: "вісім", english: "eight", french: "huit", spanish: "ocho", italian: "otto", article: "" },
                        { german: "neun", ukrainian: "дев'ять", english: "nine", french: "neuf", spanish: "nueve", italian: "nove", article: "" },
                        { german: "zehn", ukrainian: "десять", english: "ten", french: "dix", spanish: "diez", italian: "dieci", article: "" },
                    ]
                },
                family: {
                    name: "👨‍👩‍👧‍👦 Сім'я",
                    icon: "👨‍👩‍👧‍👦",
                    cards: [
                        { german: "die Familie", ukrainian: "сім'я", english: "family", french: "famille", spanish: "familia", italian: "famiglia", article: "die" },
                        { german: "der Vater", ukrainian: "батько", english: "father", french: "père", spanish: "padre", italian: "padre", article: "der" },
                        { german: "die Mutter", ukrainian: "мати", english: "mother", french: "mère", spanish: "madre", italian: "madre", article: "die" },
                        { german: "der Bruder", ukrainian: "брат", english: "brother", french: "frère", spanish: "hermano", italian: "fratello", article: "der" },
                        { german: "die Schwester", ukrainian: "сестра", english: "sister", french: "sœur", spanish: "hermana", italian: "sorella", article: "die" },
                        { german: "der Sohn", ukrainian: "син", english: "son", french: "fils", spanish: "hijo", italian: "figlio", article: "der" },
                        { german: "die Tochter", ukrainian: "дочка", english: "daughter", french: "fille", spanish: "hija", italian: "figlia", article: "die" },
                        { german: "der Großvater", ukrainian: "дідусь", english: "grandfather", french: "grand-père", spanish: "abuelo", italian: "nonno", article: "der" },
                        { german: "die Großmutter", ukrainian: "бабуся", english: "grandmother", french: "grand-mère", spanish: "abuela", italian: "nonna", article: "die" },
                        { german: "das Kind", ukrainian: "дитина", english: "child", french: "enfant", spanish: "niño", italian: "bambino", article: "das" },
                    ]
                },
                transport: {
                    name: "🚗 Транспорт",
                    icon: "🚗",
                    cards: [
                        { german: "das Auto", ukrainian: "автомобіль", english: "car", french: "voiture", spanish: "coche", italian: "auto", article: "das" },
                        { german: "der Bus", ukrainian: "автобус", english: "bus", french: "bus", spanish: "autobús", italian: "autobus", article: "der" },
                        { german: "die Straßenbahn", ukrainian: "трамвай", english: "tram", french: "tramway", spanish: "tranvía", italian: "tram", article: "die" },
                        { german: "der Zug", ukrainian: "поїзд", english: "train", french: "train", spanish: "tren", italian: "treno", article: "der" },
                        { german: "das Flugzeug", ukrainian: "літак", english: "airplane", french: "avion", spanish: "avión", italian: "aereo", article: "das" },
                        { german: "das Schiff", ukrainian: "корабель", english: "ship", french: "navire", spanish: "barco", italian: "nave", article: "das" },
                        { german: "das Fahrrad", ukrainian: "велосипед", english: "bicycle", french: "vélo", spanish: "bicicleta", italian: "bicicletta", article: "das" },
                        { german: "das Motorrad", ukrainian: "мотоцикл", english: "motorcycle", french: "moto", spanish: "moto", italian: "moto", article: "das" },
                        { german: "das Taxi", ukrainian: "таксі", english: "taxi", french: "taxi", spanish: "taxi", italian: "taxi", article: "das" },
                        { german: "die U-Bahn", ukrainian: "метро", english: "subway", french: "métro", spanish: "metro", italian: "metro", article: "die" },
                        { german: "der Lastwagen", ukrainian: "вантажівка", english: "truck", french: "camion", spanish: "camión", italian: "camion", article: "der" },
                        { german: "das Boot", ukrainian: "човен", english: "boat", french: "bateau", spanish: "bote", italian: "barca", article: "das" },
                        { german: "der Hubschrauber", ukrainian: "гелікоптер", english: "helicopter", french: "hélicoptère", spanish: "helicóptero", italian: "elicottero", article: "der" },
                        { german: "der Roller", ukrainian: "самокат", english: "scooter", french: "trottinette", spanish: "patinete", italian: "monopattino", article: "der" },
                    ]
                }
            };

            const [selectedSet, setSelectedSet] = useState('body');
            const [cards, setCards] = useState([...cardSets.body.cards]);
            const [currentIndex, setCurrentIndex] = useState(0);
            const [isFlipped, setIsFlipped] = useState(false);
            const [showArticle, setShowArticle] = useState(true);
            const [isEditing, setIsEditing] = useState(false);
            const [selectedLanguage, setSelectedLanguage] = useState('ukrainian');
            const [isMobile, setIsMobile] = useState(false);
            const [showLanguageModal, setShowLanguageModal] = useState(true);
            const [newCard, setNewCard] = useState({ german: '', ukrainian: '', english: '', french: '', spanish: '', italian: '', arabic: '', kurdish: '', persian: '', article: 'der' });

            // Detect mobile device
            useEffect(() => {
                const checkMobile = () => {
                    setIsMobile(window.innerWidth < 768);
                };
                checkMobile();
                window.addEventListener('resize', checkMobile);
                return () => window.removeEventListener('resize', checkMobile);
            }, []);

            const languageOptions = [
                { code: 'ukrainian', name: '🇺🇦 Українська', flag: '🇺🇦' },
                { code: 'english', name: '🇬🇧 English', flag: '🇬🇧' },
                { code: 'french', name: '🇫🇷 Français', flag: '🇫🇷' },
                { code: 'spanish', name: '🇪🇸 Español', flag: '🇪🇸' },
                { code: 'italian', name: '🇮🇹 Italiano', flag: '🇮🇹' },
                { code: 'arabic', name: '🇸🇦 العربية', flag: '🇸🇦' },
                { code: 'kurdish', name: '🟨🟩🟥 کوردی', flag: '🟨' },
                { code: 'persian', name: '🇮🇷 فارسی', flag: '🇮🇷' }
            ];

            const translations = {
                ukrainian: {
                    title: '🇩🇪 Вивчення німецької мови онлайн',
                    subtitle: 'Безкоштовні інтерактивні картки для вивчення німецьких слів',
                    stats: 'тем • мов • карток',
                    settings: 'Налаштування',
                    languageLabel: 'Мова перекладу:',
                    addCard: 'Додати нову картку',
                    article: 'Артикль',
                    noArticle: 'без артикля',
                    germanWord: '🇩🇪 Німецьке слово',
                    translation: 'Переклад',
                    addButton: 'Додати картку',
                    totalCards: 'Всього карток:',
                    card: 'Картка',
                    showArticle: 'Показувати артикль',
                    german: '🇩🇪 Німецька',
                    clickToFlip: 'Натисніть для перевороту',
                    back: 'Назад',
                    restart: 'Спочатку',
                    next: 'Далі',
                    tips: '💡 Підказки:',
                    tip1: 'чоловічий рід (синій колір)',
                    tip2: 'жіночий рід (червоний колір)',
                    tip3: 'середній рід (зелений колір)',
                    tip4: '📱 Використовуйте стрілки ← → для навігації на клавіатурі',
                    tip5: '⌨️ Натисніть пробіл для перевороту картки',
                    tip6: '🎨 Виберіть одну з 7 тем для вивчення',
                    tip7: '🌍 Перекладайте на 8 різних мов',
                    tip8: '➕ Додавайте свої власні картки для вивчення'
                },
                english: {
                    title: '🇩🇪 Learn German Online',
                    subtitle: 'Free interactive flashcards for learning German words',
                    stats: 'themes • languages • cards',
                    settings: 'Settings',
                    languageLabel: 'Translation language:',
                    addCard: 'Add new card',
                    article: 'Article',
                    noArticle: 'no article',
                    germanWord: '🇩🇪 German word',
                    translation: 'Translation',
                    addButton: 'Add card',
                    totalCards: 'Total cards:',
                    card: 'Card',
                    showArticle: 'Show article',
                    german: '🇩🇪 German',
                    clickToFlip: 'Click to flip',
                    back: 'Back',
                    restart: 'Restart',
                    next: 'Next',
                    tips: '💡 Tips:',
                    tip1: 'masculine gender (blue)',
                    tip2: 'feminine gender (red)',
                    tip3: 'neuter gender (green)',
                    tip4: '📱 Use arrow keys ← → for navigation',
                    tip5: '⌨️ Press space to flip card',
                    tip6: '🎨 Choose from 7 learning themes',
                    tip7: '🌍 Translate to 8 different languages',
                    tip8: '➕ Add your own custom cards'
                },
                french: {
                    title: '🇩🇪 Apprendre l\'allemand en ligne',
                    subtitle: 'Cartes mémoire interactives gratuites pour apprendre des mots allemands',
                    stats: 'thèmes • langues • cartes',
                    settings: 'Paramètres',
                    languageLabel: 'Langue de traduction:',
                    addCard: 'Ajouter une nouvelle carte',
                    article: 'Article',
                    noArticle: 'sans article',
                    germanWord: '🇩🇪 Mot allemand',
                    translation: 'Traduction',
                    addButton: 'Ajouter',
                    totalCards: 'Total de cartes:',
                    card: 'Carte',
                    showArticle: 'Afficher l\'article',
                    german: '🇩🇪 Allemand',
                    clickToFlip: 'Cliquez pour retourner',
                    back: 'Retour',
                    restart: 'Recommencer',
                    next: 'Suivant',
                    tips: '💡 Conseils:',
                    tip1: 'genre masculin (bleu)',
                    tip2: 'genre féminin (rouge)',
                    tip3: 'genre neutre (vert)',
                    tip4: '📱 Utilisez les flèches ← → pour naviguer',
                    tip5: '⌨️ Appuyez sur espace pour retourner',
                    tip6: '🎨 Choisissez parmi 7 thèmes',
                    tip7: '🌍 Traduisez en 8 langues différentes',
                    tip8: '➕ Ajoutez vos propres cartes'
                },
                spanish: {
                    title: '🇩🇪 Aprender alemán en línea',
                    subtitle: 'Tarjetas interactivas gratuitas para aprender palabras alemanas',
                    stats: 'temas • idiomas • tarjetas',
                    settings: 'Ajustes',
                    languageLabel: 'Idioma de traducción:',
                    addCard: 'Agregar nueva tarjeta',
                    article: 'Artículo',
                    noArticle: 'sin artículo',
                    germanWord: '🇩🇪 Palabra alemana',
                    translation: 'Traducción',
                    addButton: 'Agregar',
                    totalCards: 'Total de tarjetas:',
                    card: 'Tarjeta',
                    showArticle: 'Mostrar artículo',
                    german: '🇩🇪 Alemán',
                    clickToFlip: 'Haz clic para voltear',
                    back: 'Atrás',
                    restart: 'Reiniciar',
                    next: 'Siguiente',
                    tips: '💡 Consejos:',
                    tip1: 'género masculino (azul)',
                    tip2: 'género femenino (rojo)',
                    tip3: 'género neutro (verde)',
                    tip4: '📱 Usa las flechas ← → para navegar',
                    tip5: '⌨️ Presiona espacio para voltear',
                    tip6: '🎨 Elige entre 7 temas',
                    tip7: '🌍 Traduce a 8 idiomas diferentes',
                    tip8: '➕ Agrega tus propias tarjetas'
                },
                italian: {
                    title: '🇩🇪 Imparare il tedesco online',
                    subtitle: 'Flashcard interattive gratuite per imparare parole tedesche',
                    stats: 'temi • lingue • carte',
                    settings: 'Impostazioni',
                    languageLabel: 'Lingua di traduzione:',
                    addCard: 'Aggiungi nuova carta',
                    article: 'Articolo',
                    noArticle: 'senza articolo',
                    germanWord: '🇩🇪 Parola tedesca',
                    translation: 'Traduzione',
                    addButton: 'Aggiungi',
                    totalCards: 'Totale carte:',
                    card: 'Carta',
                    showArticle: 'Mostra articolo',
                    german: '🇩🇪 Tedesco',
                    clickToFlip: 'Clicca per girare',
                    back: 'Indietro',
                    restart: 'Ricomincia',
                    next: 'Avanti',
                    tips: '💡 Suggerimenti:',
                    tip1: 'genere maschile (blu)',
                    tip2: 'genere femminile (rosso)',
                    tip3: 'genere neutro (verde)',
                    tip4: '📱 Usa le frecce ← → per navigare',
                    tip5: '⌨️ Premi spazio per girare',
                    tip6: '🎨 Scegli tra 7 temi',
                    tip7: '🌍 Traduci in 8 lingue diverse',
                    tip8: '➕ Aggiungi le tue carte personalizzate'
                },
                arabic: {
                    title: '🇩🇪 تعلم الألمانية عبر الإنترنت',
                    subtitle: 'بطاقات تعليمية تفاعلية مجانية لتعلم الكلمات الألمانية',
                    stats: 'مواضيع • لغات • بطاقات',
                    settings: 'الإعدادات',
                    languageLabel: 'لغة الترجمة:',
                    addCard: 'إضافة بطاقة جديدة',
                    article: 'أداة التعريف',
                    noArticle: 'بدون أداة',
                    germanWord: '🇩🇪 الكلمة الألمانية',
                    translation: 'الترجمة',
                    addButton: 'إضافة',
                    totalCards: 'إجمالي البطاقات:',
                    card: 'بطاقة',
                    showArticle: 'إظهار الأداة',
                    german: '🇩🇪 الألمانية',
                    clickToFlip: 'انقر للقلب',
                    back: 'السابق',
                    restart: 'إعادة',
                    next: 'التالي',
                    tips: '💡 نصائح:',
                    tip1: 'المذكر (أزرق)',
                    tip2: 'المؤنث (أحمر)',
                    tip3: 'المحايد (أخضر)',
                    tip4: '📱 استخدم الأسهم ← → للتنقل',
                    tip5: '⌨️ اضغط مسافة للقلب',
                    tip6: '🎨 اختر من 7 مواضيع',
                    tip7: '🌍 ترجم إلى 8 لغات مختلفة',
                    tip8: '➕ أضف بطاقاتك الخاصة'
                },
                kurdish: {
                    title: '🇩🇪 فێربوونی زمانی ئەڵمانی',
                    subtitle: 'کارتی فێربوونی خۆڕایی بۆ فێربوونی وشەکانی ئەڵمانی',
                    stats: 'بابەت • زمان • کارت',
                    settings: 'ڕێکخستنەکان',
                    languageLabel: 'زمانی وەرگێڕان:',
                    addCard: 'زیادکردنی کارتی نوێ',
                    article: 'ئارتیکڵ',
                    noArticle: 'بێ ئارتیکڵ',
                    germanWord: '🇩🇪 وشەی ئەڵمانی',
                    translation: 'وەرگێڕان',
                    addButton: 'زیادکردن',
                    totalCards: 'کۆی کارتەکان:',
                    card: 'کارت',
                    showArticle: 'نیشاندانی ئارتیکڵ',
                    german: '🇩🇪 ئەڵمانی',
                    clickToFlip: 'کرتە بکە بۆ وەرگێڕان',
                    back: 'گەڕانەوە',
                    restart: 'دەستپێکردنەوە',
                    next: 'دواتر',
                    tips: '💡 ئامۆژگاری:',
                    tip1: 'نێرینە (شین)',
                    tip2: 'مێینە (سوور)',
                    tip3: 'ناوەند (سەوز)',
                    tip4: '📱 تیرەکان ← → بەکاربهێنە',
                    tip5: '⌨️ Space دابگرە بۆ وەرگێڕان',
                    tip6: '🎨 لە 7 بابەت هەڵبژێرە',
                    tip7: '🌍 بۆ 8 زمان وەربگێڕە',
                    tip8: '➕ کارتەکانی خۆت زیاد بکە'
                },
                persian: {
                    title: '🇩🇪 یادگیری زبان آلمانی',
                    subtitle: 'فلش کارت‌های رایگان برای یادگیری کلمات آلمانی',
                    stats: 'موضوع • زبان • کارت',
                    settings: 'تنظیمات',
                    languageLabel: 'زبان ترجمه:',
                    addCard: 'افزودن کارت جدید',
                    article: 'حرف تعریف',
                    noArticle: 'بدون حرف تعریف',
                    germanWord: '🇩🇪 کلمه آلمانی',
                    translation: 'ترجمه',
                    addButton: 'افزودن',
                    totalCards: 'مجموع کارت‌ها:',
                    card: 'کارت',
                    showArticle: 'نمایش حرف تعریف',
                    german: '🇩🇪 آلمانی',
                    clickToFlip: 'برای چرخش کلیک کنید',
                    back: 'قبلی',
                    restart: 'شروع دوباره',
                    next: 'بعدی',
                    tips: '💡 نکات:',
                    tip1: 'مذکر (آبی)',
                    tip2: 'مؤنث (قرمز)',
                    tip3: 'خنثی (سبز)',
                    tip4: '📱 از فلش‌های ← → استفاده کنید',
                    tip5: '⌨️ فاصله را برای چرخش فشار دهید',
                    tip6: '🎨 از بین 7 موضوع انتخاب کنید',
                    tip7: '🌍 به 8 زبان مختلف ترجمه کنید',
                    tip8: '➕ کارت‌های خود را اضافه کنید'
                }
            };

            const t = translations[selectedLanguage] || translations.ukrainian;

            const getCategoryName = (setKey) => {
                const set = cardSets[setKey];
                switch(selectedLanguage) {
                    case 'ukrainian': return set.nameUk;
                    case 'english': return set.nameEn;
                    case 'french': return set.nameFr;
                    case 'spanish': return set.nameEs;
                    case 'italian': return set.nameIt;
                    case 'arabic': return set.nameAr;
                    case 'kurdish': return set.nameKu;
                    case 'persian': return set.nameFa;
                    default: return set.nameUk;
                }
            };

            const handleSetChange = (setKey) => {
                setSelectedSet(setKey);
                setCards([...cardSets[setKey].cards]);
                setCurrentIndex(0);
                setIsFlipped(false);
            };

            const handleNext = () => {
                setIsFlipped(false);
                setCurrentIndex((prev) => (prev + 1) % cards.length);
            };

            const handlePrev = () => {
                setIsFlipped(false);
                setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length);
            };

            const handleFlip = () => {
                setIsFlipped(!isFlipped);
            };

            const handleAddCard = () => {
                if (newCard.german.trim() && newCard[selectedLanguage].trim()) {
                    setCards([...cards, { ...newCard }]);
                    setNewCard({ german: '', ukrainian: '', english: '', french: '', spanish: '', italian: '', article: 'der' });
                }
            };

            const handleDeleteCard = (index) => {
                if (cards.length > 1) {
                    const newCards = cards.filter((_, i) => i !== index);
                    setCards(newCards);
                    if (currentIndex >= newCards.length) {
                        setCurrentIndex(newCards.length - 1);
                    }
                }
            };

            // Keyboard navigation
            useEffect(() => {
                const handleKeyPress = (e) => {
                    if (e.key === 'ArrowRight') handleNext();
                    if (e.key === 'ArrowLeft') handlePrev();
                    if (e.key === ' ') {
                        e.preventDefault();
                        handleFlip();
                    }
                };
                window.addEventListener('keydown', handleKeyPress);
                return () => window.removeEventListener('keydown', handleKeyPress);
            }, [currentIndex, cards.length]);

            const currentCard = cards[currentIndex];

            const getArticleColor = (article) => {
                if (article.includes('der')) return 'text-blue-600';
                if (article.includes('die')) return 'text-red-600';
                if (article.includes('das')) return 'text-green-600';
                return 'text-gray-600';
            };

            // SVG Icons (same as before)
            const ChevronLeft = () => (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
            );

            const ChevronRight = () => (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            );

            const RotateCcw = () => (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="1 4 1 10 7 10"></polyline>
                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                </svg>
            );

            const Plus = () => (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
            );

            const Edit2 = () => (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                </svg>
            );

            const Trash2 = () => (
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                </svg>
            );

            return (
                <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-2 sm:p-4 md:p-6 fade-in">
                    {/* Language Selection Modal */}
                    {showLanguageModal && (
                        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
                            <div className="bg-white rounded-3xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto p-6 sm:p-8 md:p-12 animate-fade-in">
                                <div className="text-center mb-8">
                                    <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-800 mb-4">
                                        🇩🇪 Deutsch lernen
                                    </h2>
                                    <p className="text-lg sm:text-xl text-gray-600 mb-2">
                                        {selectedLanguage === 'ukrainian' && 'Виберіть мову інтерфейсу'}
                                        {selectedLanguage === 'english' && 'Choose your interface language'}
                                        {selectedLanguage === 'french' && 'Choisissez votre langue'}
                                        {selectedLanguage === 'spanish' && 'Elige tu idioma'}
                                        {selectedLanguage === 'italian' && 'Scegli la tua lingua'}
                                        {selectedLanguage === 'arabic' && 'اختر لغتك'}
                                        {selectedLanguage === 'kurdish' && 'زمانەکەت هەڵبژێرە'}
                                        {selectedLanguage === 'persian' && 'زبان خود را انتخاب کنید'}
                                    </p>
                                    <p className="text-sm text-gray-500">
                                        {selectedLanguage === 'ukrainian' && 'Оберіть мову для навчання та інтерфейсу'}
                                        {selectedLanguage === 'english' && 'Select your learning and interface language'}
                                        {selectedLanguage === 'french' && 'Sélectionnez votre langue d\'apprentissage'}
                                        {selectedLanguage === 'spanish' && 'Selecciona tu idioma de aprendizaje'}
                                        {selectedLanguage === 'italian' && 'Seleziona la lingua di apprendimento'}
                                        {selectedLanguage === 'arabic' && 'اختر لغة التعلم والواجهة'}
                                        {selectedLanguage === 'kurdish' && 'زمانی فێربوون و ڕووکار هەڵبژێرە'}
                                        {selectedLanguage === 'persian' && 'زبان یادگیری و رابط کاربری را انتخاب کنید'}
                                    </p>
                                </div>

                                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                                    {languageOptions.map(lang => (
                                        <button
                                            key={lang.code}
                                            onClick={() => setSelectedLanguage(lang.code)}
                                            className={`p-4 sm:p-6 rounded-2xl font-semibold transition-all transform hover:scale-105 active:scale-95 ${
                                                selectedLanguage === lang.code
                                                    ? 'bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-xl ring-4 ring-indigo-300'
                                                    : 'bg-white text-gray-700 hover:bg-gray-50 shadow-md border-2 border-gray-200'
                                            }`}
                                        >
                                            <div className="text-4xl mb-2">{lang.flag}</div>
                                            <div className="text-base sm:text-lg">{lang.name.split(' ')[1]}</div>
                                        </button>
                                    ))}
                                </div>

                                <button
                                    onClick={() => setShowLanguageModal(false)}
                                    className="w-full py-4 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white rounded-xl font-bold text-lg shadow-lg transform hover:scale-105 active:scale-95 transition-all"
                                >
                                    {selectedLanguage === 'ukrainian' && '✓ Почати навчання'}
                                    {selectedLanguage === 'english' && '✓ Start Learning'}
                                    {selectedLanguage === 'french' && '✓ Commencer'}
                                    {selectedLanguage === 'spanish' && '✓ Comenzar'}
                                    {selectedLanguage === 'italian' && '✓ Inizia'}
                                    {selectedLanguage === 'arabic' && '✓ ابدأ التعلم'}
                                    {selectedLanguage === 'kurdish' && '✓ دەستپێکردن'}
                                    {selectedLanguage === 'persian' && '✓ شروع یادگیری'}
                                </button>

                                <p className="text-center text-sm text-gray-500 mt-4">
                                    {selectedLanguage === 'ukrainian' && 'Ви можете змінити мову пізніше в налаштуваннях'}
                                    {selectedLanguage === 'english' && 'You can change the language later in settings'}
                                    {selectedLanguage === 'french' && 'Vous pouvez changer la langue plus tard'}
                                    {selectedLanguage === 'spanish' && 'Puedes cambiar el idioma más tarde'}
                                    {selectedLanguage === 'italian' && 'Puoi cambiare la lingua in seguito'}
                                    {selectedLanguage === 'arabic' && 'يمكنك تغيير اللغة لاحقًا في الإعدادات'}
                                    {selectedLanguage === 'kurdish' && 'دەتوانیت دواتر زمانەکە بگۆڕیت'}
                                    {selectedLanguage === 'persian' && 'می‌توانید بعداً زبان را تغییر دهید'}
                                </p>
                            </div>
                        </div>
                    )}

                    <div className="max-w-7xl mx-auto">
                        {/* Header */}
                        <header className="text-center mb-4 sm:mb-6 md:mb-8">
                            <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 mb-2">
                                {t.title}
                            </h1>
                            <p className="text-sm sm:text-base text-gray-600">
                                {t.subtitle}
                            </p>
                            <p className="text-xs sm:text-sm text-gray-500 mt-1">
                                7 {t.stats.split('•')[0].trim()} • 8 {t.stats.split('•')[1].trim()} • {cards.length} {t.stats.split('•')[2].trim()}
                            </p>
                            <button
                                onClick={() => setShowLanguageModal(true)}
                                className="mt-3 px-4 py-2 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-lg text-sm font-medium transition-colors"
                            >
                                🌐 {selectedLanguage === 'ukrainian' && 'Змінити мову'}
                                {selectedLanguage === 'english' && 'Change language'}
                                {selectedLanguage === 'french' && 'Changer la langue'}
                                {selectedLanguage === 'spanish' && 'Cambiar idioma'}
                                {selectedLanguage === 'italian' && 'Cambia lingua'}
                                {selectedLanguage === 'arabic' && 'تغيير اللغة'}
                                {selectedLanguage === 'kurdish' && 'گۆڕینی زمان'}
                                {selectedLanguage === 'persian' && 'تغییر زبان'}
                            </button>
                        </header>

                        {/* Theme selector */}
                        <nav className="mb-4 sm:mb-6 bg-white rounded-xl shadow-lg p-3 sm:p-4" aria-label="Вибір теми">
                            <div className="flex flex-wrap gap-2 sm:gap-3 justify-center">
                                {Object.entries(cardSets).map(([key, set]) => (
                                    <button
                                        key={key}
                                        onClick={() => handleSetChange(key)}
                                        className={`px-3 sm:px-4 md:px-6 py-2 sm:py-3 rounded-lg font-medium transition-all text-sm sm:text-base ${
                                            selectedSet === key
                                                ? 'bg-indigo-600 text-white shadow-md transform scale-105'
                                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:scale-95'
                                        }`}
                                        aria-label={`Вибрати тему: ${getCategoryName(key)}`}
                                    >
                                        <span className="inline sm:hidden">{set.icon}</span>
                                        <span className="hidden sm:inline">{getCategoryName(key)}</span>
                                    </button>
                                ))}
                            </div>
                        </nav>

                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
                            {/* Editor Panel */}
                            <aside className="lg:col-span-1 order-2 lg:order-1">
                                <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 lg:sticky lg:top-4">
                                    <div className="flex items-center justify-between mb-4">
                                        <h2 className="text-lg sm:text-xl font-bold text-gray-800">{t.settings}</h2>
                                        <button
                                            onClick={() => setIsEditing(!isEditing)}
                                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                                            aria-label={isEditing ? "Вимкнути режим редагування" : "Увімкнути режим редагування"}
                                        >
                                            <Edit2 />
                                        </button>
                                    </div>

                                    {/* Language selector */}
                                    <div className="mb-4 sm:mb-6">
                                        <label className="block text-sm font-medium text-gray-700 mb-2">
                                            {t.languageLabel}
                                        </label>
                                        <select
                                            value={selectedLanguage}
                                            onChange={(e) => setSelectedLanguage(e.target.value)}
                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-base sm:text-lg"
                                            aria-label="Виберіть мову перекладу"
                                        >
                                            {languageOptions.map(lang => (
                                                <option key={lang.code} value={lang.code}>
                                                    {lang.name}
                                                </option>
                                            ))}
                                        </select>
                                    </div>

                                    {/* Add new card */}
                                    <div className="border-t pt-4 mb-4 sm:mb-6">
                                        <h3 className="text-sm font-semibold text-gray-700 mb-3">{t.addCard}</h3>
                                        <div className="space-y-3">
                                            <div>
                                                <label className="block text-sm font-medium text-gray-700 mb-1">
                                                    {t.article}
                                                </label>
                                                <select
                                                    value={newCard.article}
                                                    onChange={(e) => setNewCard({ ...newCard, article: e.target.value })}
                                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"
                                                >
                                                    <option value="">{t.noArticle}</option>
                                                    <option value="der">der ({t.tip1.split('(')[0].trim()})</option>
                                                    <option value="die">die ({t.tip2.split('(')[0].trim()})</option>
                                                    <option value="das">das ({t.tip3.split('(')[0].trim()})</option>
                                                </select>
                                            </div>

                                            <div>
                                                <label className="block text-sm font-medium text-gray-700 mb-1">
                                                    {t.germanWord}
                                                </label>
                                                <input
                                                    type="text"
                                                    value={newCard.german}
                                                    onChange={(e) => setNewCard({ ...newCard, german: e.target.value })}
                                                    placeholder="Kopf"
                                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"
                                                />
                                            </div>

                                            <div>
                                                <label className="block text-sm font-medium text-gray-700 mb-1">
                                                    {languageOptions.find(l => l.code === selectedLanguage)?.flag} {t.translation}
                                                </label>
                                                <input
                                                    type="text"
                                                    value={newCard[selectedLanguage]}
                                                    onChange={(e) => setNewCard({ ...newCard, [selectedLanguage]: e.target.value })}
                                                    placeholder={t.translation}
                                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"
                                                />
                                            </div>

                                            <button
                                                onClick={handleAddCard}
                                                className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 active:scale-95 text-white rounded-lg transition-all font-medium text-sm"
                                                aria-label="Додати нову картку"
                                            >
                                                <Plus />
                                                {t.addButton}
                                            </button>
                                        </div>
                                    </div>

                                    {/* Cards list */}
                                    <div className="border-t pt-4">
                                        <h3 className="text-sm font-semibold text-gray-700 mb-3">
                                            {t.totalCards} {cards.length}
                                        </h3>
                                        <div className="space-y-2 max-h-60 sm:max-h-80 overflow-y-auto">
                                            {cards.map((card, index) => (
                                                <div
                                                    key={index}
                                                    className={`flex items-center justify-between p-2 sm:p-3 rounded-lg transition-colors ${
                                                        index === currentIndex ? 'bg-indigo-50 border-2 border-indigo-300' : 'bg-gray-50 hover:bg-gray-100'
                                                    }`}
                                                >
                                                    <div className="flex-1 min-w-0">
                                                        <p className="text-xs sm:text-sm font-medium text-gray-800 truncate">
                                                            {card.article && <span className={getArticleColor(card.article)}>{card.article} </span>}
                                                            {card.german.replace(/^(der|die|das) /, '')}
                                                        </p>
                                                        <p className="text-xs text-gray-600 truncate">{card[selectedLanguage]}</p>
                                                    </div>
                                                    {isEditing && (
                                                        <button
                                                            onClick={() => handleDeleteCard(index)}
                                                            className="ml-2 p-1 hover:bg-red-100 rounded transition-colors"
                                                            aria-label={`Видалити картку: ${card.german}`}
                                                        >
                                                            <Trash2 />
                                                        </button>
                                                    )}
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            </aside>

                            {/* Flashcard Panel */}
                            <main className="lg:col-span-2 order-1 lg:order-2">
                                <article className="bg-white rounded-2xl shadow-2xl p-4 sm:p-6 md:p-8 mb-4 sm:mb-6">
                                    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-0 mb-4 sm:mb-6">
                                        <span className="text-xs sm:text-sm font-medium text-gray-500">
                                            {t.card} {currentIndex + 1} / {cards.length}
                                        </span>
                                        <label className="flex items-center cursor-pointer">
                                            <input
                                                type="checkbox"
                                                checked={showArticle}
                                                onChange={(e) => setShowArticle(e.target.checked)}
                                                className="mr-2 w-4 h-4"
                                                aria-label="Показувати артиклі"
                                            />
                                            <span className="text-xs sm:text-sm text-gray-600">{t.showArticle}</span>
                                        </label>
                                    </div>

                                    <div
                                        onClick={handleFlip}
                                        className={`relative cursor-pointer perspective ${isMobile ? 'card-height-mobile' : 'h-64 sm:h-72 md:h-80'}`}
                                        role="button"
                                        tabIndex="0"
                                        aria-label={`Картка: ${currentCard.german}. Натисніть для перевороту`}
                                        onKeyPress={(e) => {
                                            if (e.key === 'Enter') handleFlip();
                                        }}
                                    >
                                        <div
                                            className={`absolute w-full h-full transition-all duration-500 transform-style-3d ${
                                                isFlipped ? 'rotate-y-180' : ''
                                            }`}
                                        >
                                            {/* Front side - German */}
                                            <div className="absolute w-full h-full backface-hidden bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex flex-col items-center justify-center text-white p-4 sm:p-6 md:p-8">
                                                <div className="text-6xl sm:text-7xl md:text-8xl mb-4">{currentCard.emoji}</div>
                                                {showArticle && currentCard.article && (
                                                    <span className={`text-lg sm:text-xl md:text-2xl font-semibold mb-2 ${getArticleColor(currentCard.article)} bg-white px-3 sm:px-4 py-1 rounded-full`}>
                                                        {currentCard.article}
                                                    </span>
                                                )}
                                                <h2 className={`font-bold text-center ${isMobile ? 'text-3xl' : 'text-3xl sm:text-4xl md:text-5xl'}`}>
                                                    {currentCard.german.replace(/^(der|die|das) /, '')}
                                                </h2>
                                                <p className="text-indigo-200 mt-3 sm:mt-4 text-base sm:text-lg">{t.german}</p>
                                                <p className="text-indigo-300 mt-2 text-xs sm:text-sm">{t.clickToFlip}</p>
                                            </div>

                                            {/* Back side - Translation */}
                                            <div className="absolute w-full h-full backface-hidden bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl flex flex-col items-center justify-center text-white p-4 sm:p-6 md:p-8 rotate-y-180">
                                                <div className="text-6xl sm:text-7xl md:text-8xl mb-4">{currentCard.emoji}</div>
                                                <h2 className={`font-bold text-center mb-3 sm:mb-4 ${isMobile ? 'text-3xl' : 'text-3xl sm:text-4xl md:text-5xl'}`}>
                                                    {currentCard[selectedLanguage]}
                                                </h2>
                                                <p className="text-emerald-200 text-base sm:text-lg">
                                                    {languageOptions.find(l => l.code === selectedLanguage)?.name}
                                                </p>
                                                <p className="text-emerald-300 mt-2 text-xs sm:text-sm">{t.clickToFlip}</p>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Navigation */}
                                    <nav className="flex justify-between items-center mt-6 sm:mt-8 gap-2" aria-label="Навігація по картках">
                                        <button
                                            onClick={handlePrev}
                                            className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 md:px-6 py-2 sm:py-3 bg-gray-200 hover:bg-gray-300 active:scale-95 rounded-lg transition-all font-medium text-gray-700 text-sm sm:text-base"
                                            aria-label="Попередня картка"
                                        >
                                            <ChevronLeft />
                                            <span className="hidden sm:inline">{t.back}</span>
                                        </button>

                                        <button
                                            onClick={() => {
                                                setCurrentIndex(0);
                                                setIsFlipped(false);
                                            }}
                                            className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 md:px-6 py-2 sm:py-3 bg-indigo-100 hover:bg-indigo-200 active:scale-95 rounded-lg transition-all font-medium text-indigo-700 text-sm sm:text-base"
                                            aria-label="Повернутися до початку"
                                        >
                                            <RotateCcw />
                                            <span className="hidden sm:inline">{t.restart}</span>
                                        </button>

                                        <button
                                            onClick={handleNext}
                                            className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 md:px-6 py-2 sm:py-3 bg-indigo-600 hover:bg-indigo-700 active:scale-95 text-white rounded-lg transition-all font-medium text-sm sm:text-base"
                                            aria-label="Наступна картка"
                                        >
                                            <span className="hidden sm:inline">{t.next}</span>
                                            <ChevronRight />
                                        </button>
                                    </nav>
                                </article>

                                {/* Tips section */}
                                <section className="bg-white rounded-xl shadow-lg p-4 sm:p-6 no-print">
                                    <h3 className="font-bold text-gray-800 mb-3 text-base sm:text-lg">{t.tips}</h3>
                                    <ul className="space-y-2 text-gray-600 text-xs sm:text-sm">
                                        <li><span className="text-blue-600 font-semibold">der</span> - {t.tip1}</li>
                                        <li><span className="text-red-600 font-semibold">die</span> - {t.tip2}</li>
                                        <li><span className="text-green-600 font-semibold">das</span> - {t.tip3}</li>
                                        <li>{t.tip4}</li>
                                        <li>{t.tip5}</li>
                                        <li>{t.tip6}</li>
                                        <li>{t.tip7}</li>
                                        <li>{t.tip8}</li>
                                    </ul>
                                </section>
                            </main>
                        </div>

                        {/* Footer */}
                        <footer className="mt-8 text-center text-xs sm:text-sm text-gray-600 pb-4">
                            <p>© 2024 Вивчення німецької мови онлайн | Deutsch lernen | German flashcards</p>
                            <p className="mt-1">Безкоштовні картки для вивчення німецьких слів з артиклями der, die, das</p>
                        </footer>
                    </div>
                </div>
            );
        };

        ReactDOM.render(<FlashcardApp />, document.getElementById('root'));
    </script>
</body>
</html>