// Visual Content System for KidsAI Explorer
// Maps topics and concepts to appropriate visual elements for kids aged 8-12

const VisualContent = {
    // Topic-based visual mappings
    topicVisuals: {
        // Science topics
        'sky': {
            emoji: '🌌',
            animation: 'sky-animation',
            illustration: `
                <div class="visual-concept" id="sky-concept">
                    <div class="sky-layers">
                        <div class="atmosphere-layer" style="background: linear-gradient(to bottom, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);">
                            <div class="light-rays">
                                <div class="light-ray"></div>
                                <div class="light-ray"></div>
                                <div class="light-ray"></div>
                            </div>
                            <div class="scattered-light">💙 Blue light scatters more!</div>
                        </div>
                    </div>
                </div>
            `,
            description: {
                en: "Watch how sunlight scatters in our atmosphere!",
                de: "Schau, wie das Sonnenlicht in unserer Atmosphäre gestreut wird!"
            }
        },
        
        'bird': {
            emoji: '🕊️',
            animation: 'bird-flight-animation',
            illustration: `
                <div class="visual-concept" id="bird-concept">
                    <div class="bird-flight">
                        <div class="bird">
                            <div class="wing wing-left">🪶</div>
                            <div class="bird-body">🐦</div>
                            <div class="wing wing-right">🪶</div>
                        </div>
                        <div class="air-currents">
                            <div class="air-flow up-flow">⬆️ Lift</div>
                            <div class="air-flow down-flow">⬇️ Gravity</div>
                        </div>
                    </div>
                </div>
            `,
            description: {
                en: "See how birds use their wings to create lift!",
                de: "Sieh, wie Vögel ihre Flügel nutzen, um Auftrieb zu erzeugen!"
            }
        },
        
        'water': {
            emoji: '💧',
            animation: 'water-molecule-animation',
            illustration: `
                <div class="visual-concept" id="water-concept">
                    <div class="water-molecules">
                        <div class="molecule">
                            <div class="atom hydrogen">H</div>
                            <div class="atom oxygen">O</div>
                            <div class="atom hydrogen">H</div>
                            <div class="bond"></div>
                        </div>
                        <div class="water-droplet">💧</div>
                        <div class="wetness-effect">Makes things wet because molecules stick!</div>
                    </div>
                </div>
            `,
            description: {
                en: "Discover why water feels wet!",
                de: "Entdecke, warum sich Wasser nass anfühlt!"
            }
        },
        
        'seasons': {
            emoji: '🌍',
            animation: 'earth-orbit-animation',
            illustration: `
                <div class="visual-concept" id="seasons-concept">
                    <div class="solar-system">
                        <div class="sun">☀️</div>
                        <div class="earth-orbit">
                            <div class="earth tilted">🌍</div>
                            <div class="season-labels">
                                <span class="season summer">Summer ☀️</span>
                                <span class="season winter">Winter ❄️</span>
                            </div>
                        </div>
                    </div>
                </div>
            `,
            description: {
                en: "See how Earth's tilt creates seasons!",
                de: "Sieh, wie die Neigung der Erde die Jahreszeiten entstehen lässt!"
            }
        },
        
        'computer': {
            emoji: '💻',
            animation: 'data-flow-animation',
            illustration: `
                <div class="visual-concept" id="computer-concept">
                    <div class="computer-brain">
                        <div class="cpu">🧠 CPU</div>
                        <div class="data-flow">
                            <div class="binary-code">1010101</div>
                            <div class="binary-code">0110011</div>
                        </div>
                        <div class="memory">💾 Memory</div>
                    </div>
                </div>
            `,
            description: {
                en: "Watch how computers think with 1s and 0s!",
                de: "Schau, wie Computer mit 1en und 0en denken!"
            }
        },
        
        'dream': {
            emoji: '💭',
            animation: 'brain-dream-animation',
            illustration: `
                <div class="visual-concept" id="dream-concept">
                    <div class="sleeping-brain">
                        <div class="brain">🧠</div>
                        <div class="dream-bubbles">
                            <div class="dream-bubble">🌈</div>
                            <div class="dream-bubble">🦄</div>
                            <div class="dream-bubble">🏰</div>
                        </div>
                        <div class="sleep-waves">~~~</div>
                    </div>
                </div>
            `,
            description: {
                en: "See your brain creating dreams while you sleep!",
                de: "Sieh, wie dein Gehirn Träume erschafft, während du schläfst!"
            }
        },
        
        'rainbow': {
            emoji: '🌈',
            animation: 'light-prism-animation',
            illustration: `
                <div class="visual-concept" id="rainbow-concept">
                    <div class="light-spectrum">
                        <div class="white-light">🌞 White Light</div>
                        <div class="prism">🔺</div>
                        <div class="rainbow-colors">
                            <span style="color: red;">Red</span>
                            <span style="color: orange;">Orange</span>
                            <span style="color: yellow;">Yellow</span>
                            <span style="color: green;">Green</span>
                            <span style="color: blue;">Blue</span>
                            <span style="color: indigo;">Indigo</span>
                            <span style="color: violet;">Violet</span>
                        </div>
                    </div>
                </div>
            `,
            description: {
                en: "Watch white light split into rainbow colors!",
                de: "Schau, wie weißes Licht in Regenbogenfarben aufgeteilt wird!"
            }
        }
    },

    // Get visual content for a question/topic
    getVisualForTopic: function(question) {
        const questionLower = question.toLowerCase();
        
        // Check for topic keywords
        for (const [topic, visual] of Object.entries(this.topicVisuals)) {
            if (questionLower.includes(topic) || 
                this.getTopicKeywords(topic).some(keyword => questionLower.includes(keyword))) {
                return visual;
            }
        }
        
        // Default visual for general questions
        return {
            emoji: '🤔',
            animation: 'thinking-animation',
            illustration: `
                <div class="visual-concept" id="general-concept">
                    <div class="thinking-process">
                        <div class="brain-icon">🧠</div>
                        <div class="thought-bubbles">
                            <div class="bubble">💡</div>
                            <div class="bubble">❓</div>
                            <div class="bubble">🔍</div>
                        </div>
                    </div>
                </div>
            `,
            description: {
                en: "Let's think about this together!",
                de: "Lass uns gemeinsam darüber nachdenken!"
            }
        };
    },

    // Get additional keywords for topic matching
    getTopicKeywords: function(topic) {
        const keywords = {
            'sky': ['blue', 'himmel', 'blau', 'atmosphere', 'atmosphäre'],
            'bird': ['fly', 'flying', 'fliegen', 'wing', 'flügel', 'vogel'],
            'water': ['wet', 'nass', 'liquid', 'flüssig', 'molecule', 'molekül'],
            'seasons': ['winter', 'summer', 'spring', 'autumn', 'jahreszeit', 'sommer', 'herbst', 'frühling'],
            'computer': ['work', 'funktioniert', 'processor', 'prozessor', 'digital'],
            'dream': ['sleep', 'schlafen', 'träume', 'night', 'nacht'],
            'rainbow': ['colors', 'farben', 'light', 'licht', 'regenbogen', 'prism', 'prisma']
        };
        return keywords[topic] || [];
    }
};

// Export for use in other files
if (typeof module !== 'undefined' && module.exports) {
    module.exports = VisualContent;
}