script.js

// Generation Bridge Wiki - Main JavaScript

// Mock data for terms
const termsData = [
    {
        id: 1,
        term: "No Cap",
        generation: "genz",
        meaning: "No lie, for real, truthfully",
        example: "This pizza is the best, no cap!",
        category: "slang",
        popularity: 95,
        tags: ["truth", "honesty", "slang"]
    },
    {
        id: 2,
        term: "Lit",
        generation: "millennial",
        meaning: "Amazing, exciting, fun",
        example: "That party was so lit last night!",
        category: "slang",
        popularity: 85,
        tags: ["fun", "exciting", "awesome"]
    },
    {
        id: 3,
        term: "Groovy",
        generation: "boomer",
        meaning: "Cool, fashionable, or pleasant",
        example: "That music is really groovy!",
        category: "slang",
        popularity: 60,
        tags: ["cool", "music", "vintage"]
    },
    {
        id: 4,
        term: "Slay",
        generation: "genz",
        meaning: "To do something exceptionally well",
        example: "You absolutely slayed that presentation!",
        category: "slang",
        popularity: 98,
        tags: ["success", "fashion", "performance"]
    },
    {
        id: 5,
        term: "Whatever",
        generation: "genx",
        meaning: "Indifference, dismissive",
        example: "You don't like my idea? Whatever.",
        category: "attitude",
        popularity: 70,
        tags: ["indifferent", "sarcastic", "dismissive"]
    },
    {
        id: 6,
        term: "Bussin",
        generation: "genz",
        meaning: "Really good, especially food",
        example: "This burger is bussin!",
        category: "food",
        popularity: 88,
        tags: ["food", "delicious", "good"]
    },
    {
        id: 7,
        term: "Rad",
        generation: "genx",
        meaning: "Radical, excellent, cool",
        example: "That skateboard trick was rad!",
        category: "slang",
        popularity: 65,
        tags: ["cool", "awesome", "extreme"]
    },
    {
        id: 8,
        term: "Skibidi",
        generation: "genalpha",
        meaning: "Fun, silly, nonsensical (from YouTube series)",
        example: "Skibidi toilet is so funny!",
        category: "meme",
        popularity: 75,
        tags: ["meme", "funny", "youtube"]
    },
    {
        id: 9,
        term: "Adulting",
        generation: "millennial",
        meaning: "Doing adult responsibilities",
        example: "I spent my Saturday doing taxes, adulting is hard.",
        category: "lifestyle",
        popularity: 90,
        tags: ["responsibility", "growing up", "life"]
    },
    {
        id: 10,
        term: "Bet",
        generation: "genz",
        meaning: "Okay, agreement, or confirmation",
        example: "Want to hang out later? Bet.",
        category: "slang",
        popularity: 92,
        tags: ["agreement", "yes", "cool"]
    },
    {
        id: 11,
        term: "FOMO",
        generation: "millennial",
        meaning: "Fear Of Missing Out",
        example: "I have serious FOMO seeing everyone's vacation photos.",
        category: "psychology",
        popularity: 88,
        tags: ["anxiety", "social", "missing out"]
    },
    {
        id: 12,
        term: "Cool Beans",
        generation: "genx",
        meaning: "Agreeable, good idea",
        example: "Want to grab pizza? Cool beans!",
        category: "slang",
        popularity: 55,
        tags: ["agreement", "casual", "friendly"]
    }
];

// Translation dictionary
const translationDictionary = {
    "awesome": { boomer: "groovy", genx: "rad", millennial: "lit", genz: "slaps" },
    "cool": { boomer: "hip", genx: "cool", millennial: "chill", genz: "fire" },
    "great": { boomer: "fabulous", genx: "excellent", millennial: "amazing", genz: "bussin" },
    "bad": { boomer: "bummer", genx: "lame", millennial: "trash", genz: "mid" },
    "friend": { boomer: "pal", genx: "buddy", millennial: "homie", genz: "fam" },
    "very": { boomer: "real", genx: "totally", millennial: "super", genz: "lowkey" },
    "yes": { boomer: "right on", genx: "for sure", millennial: "absolutely", genz: "bet" }
};

// DOM Elements
let searchInput, featuredTermsContainer, translateBtn, translateInput, 
    fromGenSelect, toGenSelect, translationResult, translatedText, 
    translationContext, generationButtons;

// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
    initializeElements();
    setupEventListeners();
    loadFeaturedTerms();
});

function initializeElements() {
    searchInput = document.getElementById('mainSearch');
    featuredTermsContainer = document.getElementById('featuredTerms');
    translateBtn = document.getElementById('translateBtn');
    translateInput = document.getElementById('translateInput');
    fromGenSelect = document.getElementById('fromGen');
    toGenSelect = document.getElementById('toGen');
    translationResult = document.getElementById('translationResult');
    translatedText = document.getElementById('translatedText');
    translationContext = document.getElementById('translationContext');
    generationButtons = document.querySelectorAll('.generation-btn');
}

function setupEventListeners() {
    // Search functionality
    searchInput.addEventListener('input', handleSearch);
    searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            performSearch();
        }
    });

    // Translation
    translateBtn.addEventListener('click', performTranslation);
    translateInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter' && e.ctrlKey) {
            performTranslation();
        }
    });

    // Generation buttons
    generationButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            const gen = btn.dataset.gen;
            filterByGeneration(gen);
        });
    });

    // Navbar interactions
    document.addEventListener('click', (e) => {
        if (e.target.matches('[data-action]')) {
            handleNavbarAction(e.target.dataset.action);
        }
    });
}

function loadFeaturedTerms() {
    // Sort by popularity and get top terms
    const topTerms = [...termsData]
        .sort((a, b) => b.popularity - a.popularity)
        .slice(0, 9);

    featuredTermsContainer.innerHTML = topTerms.map(term => createTermCard(term)).join('');
    
    // Re-initialize feather icons for new content
    if (typeof feather !== 'undefined') {
        feather.replace();
    }
}

function createTermCard(term) {
    const generationColors = {
        boomer: 'from-blue-500/30 to-blue-600/30',
        genx: 'from-purple-500/30 to-purple-600/30',
        millennial: 'from-pink-500/30 to-pink-600/30',
        genz: 'from-orange-500/30 to-orange-600/30',
        genalpha: 'from-green-500/30 to-teal-600/30'
    };

    const generationEmojis = {
        boomer: '👴',
        genx: '🎸',
        millennial: '📱',
        genz: '💫',
        genalpha: '🚀'
    };

    return `
        <div class="term-card" data-term-id="${term.id}">
            <div class="flex items-start justify-between mb-4">
                <span class="px-3 py-1 rounded-full text-xs font-bold bg-gradient-to-r ${generationColors[term.generation]} border border-white/20 backdrop-blur-sm">
                    ${generationEmojis[term.generation]} ${term.generation.toUpperCase()}
                </span>
                <div class="flex items-center text-sm text-gray-300">
                    <i data-feather="trending-up" class="w-4 h-4 mr-1 text-green-400"></i>
                    ${term.popularity}%
                </div>
            </div>
            
            <h3 class="text-2xl font-bold mb-2 text-white">${term.term}</h3>
            <p class="text-gray-300 mb-3">${term.meaning}</p>
            
            <div class="bg-white/5 p-3 rounded-lg mb-4 border border-white/10">
                <p class="text-sm text-gray-200 italic">"${term.example}"</p>
            </div>
            
            <div class="flex flex-wrap gap-2">
                ${term.tags.map(tag => `
                    <span class="px-2 py-1 bg-white/10 rounded-full text-xs text-gray-300 hover:bg-white/20 transition-colors cursor-pointer">
                        #${tag}
                    </span>
                `).join('')}
            </div>
            
            <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-500/30 to-pink-500/30 rounded-lg 
                           hover:from-purple-500/50 hover:to-pink-500/50 transition-all duration-300 text-sm font-bold"
                    onclick="showTermDetails(${term.id})">
                Learn More
            </button>
        </div>
    `;
}

function handleSearch(e) {
    const query = e.target.value.toLowerCase().trim();
    
    if (query.length === 0) {
        loadFeaturedTerms();
        return;
    }

    const filteredTerms = termsData.filter(term => 
        term.term.toLowerCase().includes(query) ||
        term.meaning.toLowerCase().includes(query) ||
        term.tags.some(tag => tag.toLowerCase().includes(query))
    );

    featuredTermsContainer.innerHTML = filteredTerms.map(term => createTermCard(term)).join('');
    feather.replace();
}

function performSearch() {
    const query = searchInput.value.trim();
    if (query) {
        console.log('Searching for:', query);
        // Could implement advanced search or redirect to search results page
    }
}

function filterByGeneration(generation) {
    const filteredTerms = termsData.filter(term => term.generation === generation);
    featuredTermsContainer.innerHTML = filteredTerms.map(term => createTermCard(term)).join('');
    feather.replace();
    
    // Update active state
    generationButtons.forEach(btn => {
        if (btn.dataset.gen === generation) {
            btn.classList.add('ring-4', 'ring-purple-400/40');
        } else {
            btn.classList.remove('ring-4', 'ring-purple-400/40');
        }
    });

    // Scroll to terms section
    document.getElementById('featuredTerms').scrollIntoView({ behavior: 'smooth' });
}

function performTranslation() {
    const input = translateInput.value.trim().toLowerCase();
    const fromGen = fromGenSelect.value;
    const toGen = toGenSelect.value;

    if (!input) {
        showTranslationError('Please enter a phrase to translate');
        return;
    }

    if (fromGen === toGen) {
        showTranslationError('Please select different generations');
        return;
    }

    // Simple translation logic - could be enhanced with a proper dictionary
    let translated = input;
    let context = '';

    // Check for common words in our dictionary
    Object.keys(translationDictionary).forEach(word => {
        if (input.includes(word)) {
            const replacement = translationDictionary[word][toGen];
            translated = translated.replace(new RegExp(word, 'g'), replacement);
            context += ` "${word}" → "${replacement}"`;
        }
    });

    // Add generation-specific context
    const contexts = {
        boomer: "This phrase reflects Boomer values of authenticity and straightforwardness",
        genx: "Gen X expressions often carry a tone of rebellion and independence",
        millennial: "Millennial phrases blend digital culture with ironic humor",
        genz: "Gen Z language is fast-evolving and heavily influenced by social media"
    };

    translatedText.textContent = translated.charAt(0).toUpperCase() + translated.slice(1);
    translationContext.textContent = `Based on ${fromGen.toUpperCase()} → ${toGen.toUpperCase()} translation.${context ? ' Translated:' + context : ''} ${contexts[toGen] || ''}`;
    
    translationResult.classList.remove('hidden', 'border-red-500/30', 'bg-red-500/10');
    translationResult.classList.add('border-green-500/30', 'bg-green-500/10');
    translationResult.scrollIntoView({ behavior: 'smooth' });
}

function showTranslationError(message) {
    translatedText.textContent = message;
    translationContext.textContent = 'Please check your input and try again.';
    
    translationResult.classList.remove('hidden', 'border-green-500/30', 'bg-green-500/10');
    translationResult.classList.add('border-red-500/30', 'bg-red-500/10');
}

function showTermDetails(termId) {
    const term = termsData.find(t => t.id === termId);
    if (term) {
        console.log('Showing details for:', term);
        // Could open modal or navigate to detail page
        alert(`${term.term}\n\nMeaning: ${term.meaning}\n\nExample: "${term.example}"\n\nPopularity: ${term.popularity}%`);
    }
}

function handleNavbarAction(action) {
    switch(action) {
        case 'home':
            window.scrollTo({ top: 0, behavior: 'smooth' });
            break;
        case 'search':
            searchInput.focus();
            break;
        case 'submit':
            alert('Submit feature coming soon!');
            break;
        case 'stories':
            alert('Stories feature coming soon!');
            break;
        case 'about':
            alert('About section coming soon!');
            break;
    }
}

// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
    // Ctrl/Cmd + K for search
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        searchInput.focus();
    }
    
    // Escape to clear search
    if (e.key === 'Escape') {
        if (document.activeElement === searchInput) {
            searchInput.value = '';
            searchInput.blur();
            loadFeaturedTerms();
        }
    }
});

// Intersection Observer for animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

// Observe all term cards
setTimeout(() => {
    document.querySelectorAll('.term-card').forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        observer.observe(card);
    });
}, 100);