script.js

/* ===================================
   AI Tools Hub - JavaScript
   Interactive Features & Animations
   =================================== */

// ===== DOM Elements =====
const header = document.getElementById('header');
const navToggle = document.getElementById('nav-toggle');
const navMenu = document.getElementById('nav-menu');
const navLinks = document.querySelectorAll('.nav__link');
const pricingToggle = document.getElementById('pricingToggle');
const premiumModal = document.getElementById('premiumModal');
const closeModal = document.getElementById('closeModal');
const contactForm = document.getElementById('contactForm');
const successMessage = document.getElementById('successMessage');

// ===== Sticky Header on Scroll =====
window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

// ===== Mobile Navigation Toggle =====
if (navToggle) {
    navToggle.addEventListener('click', () => {
        navMenu.classList.toggle('active');
        navToggle.classList.toggle('active');
    });
}

// ===== Close Mobile Menu on Link Click =====
navLinks.forEach(link => {
    link.addEventListener('click', () => {
        navMenu.classList.remove('active');
        navToggle.classList.remove('active');
        
        // Update active link
        navLinks.forEach(l => l.classList.remove('active'));
        link.classList.add('active');
    });
});

// ===== Smooth Scroll for Anchor Links =====
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            const headerOffset = 80;
            const elementPosition = target.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
        }
    });
});

// ===== Animated Counter for Stats =====
const animateCounter = (element, target, duration = 2000) => {
    let start = 0;
    const increment = target / (duration / 16);
    
    const updateCounter = () => {
        start += increment;
        if (start < target) {
            element.textContent = Math.floor(start).toLocaleString('fr-FR');
            requestAnimationFrame(updateCounter);
        } else {
            element.textContent = target.toLocaleString('fr-FR');
        }
    };
    
    updateCounter();
};

// ===== Intersection Observer for Stats Animation =====
const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const target = parseInt(entry.target.getAttribute('data-target'));
            animateCounter(entry.target, target);
            statsObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.5 });

document.querySelectorAll('.stat__number').forEach(stat => {
    statsObserver.observe(stat);
});

// ===== Pricing Toggle (Monthly/Yearly) =====
if (pricingToggle) {
    pricingToggle.addEventListener('change', () => {
        const priceElements = document.querySelectorAll('.price__amount[data-monthly]');
        
        priceElements.forEach(price => {
            const monthly = price.getAttribute('data-monthly');
            const yearly = price.getAttribute('data-yearly');
            
            if (pricingToggle.checked) {
                // Show yearly price
                price.textContent = yearly;
            } else {
                // Show monthly price
                price.textContent = monthly;
            }
        });
    });
}

// ===== Premium Modal =====
const openPremiumModal = () => {
    premiumModal.classList.add('active');
    document.body.style.overflow = 'hidden';
};

const closePremiumModal = () => {
    premiumModal.classList.remove('active');
    document.body.style.overflow = '';
};

// Open modal buttons
document.getElementById('premiumBtn')?.addEventListener('click', openPremiumModal);
document.getElementById('startFreeBtn')?.addEventListener('click', openPremiumModal);
document.getElementById('upgradeProBtn')?.addEventListener('click', openPremiumModal);

// Close modal
closeModal?.addEventListener('click', closePremiumModal);
premiumModal?.addEventListener('click', (e) => {
    if (e.target === premiumModal) {
        closePremiumModal();
    }
});

// Close modal with Escape key
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && premiumModal.classList.contains('active')) {
        closePremiumModal();
    }
});

// ===== Tool Cards Click Handler =====
document.querySelectorAll('.tool-card').forEach(card => {
    card.addEventListener('click', (e) => {
        // Don't trigger if clicking the button
        if (e.target.closest('.btn-tool')) return;
        
        const toolName = card.getAttribute('data-tool');
        console.log(`Opening tool: ${toolName}`);
        
        // Simulate tool opening (you can replace with actual functionality)
        showNotification(`🚀 Lancement de l'outil ${toolName}...`);
    });
});

// ===== Tool Buttons =====
document.querySelectorAll('.btn-tool').forEach(btn => {
    btn.addEventListener('click', (e) => {
        e.stopPropagation();
        const toolCard = btn.closest('.tool-card');
        const toolName = toolCard.getAttribute('data-tool');
        
        // Check if user has premium (simulated with localStorage)
        const isPremium = localStorage.getItem('isPremium') === 'true';
        
        if (!isPremium && toolName !== 'text-generator') {
            // Show premium modal for premium tools
            openPremiumModal();
        } else {
            // Open tool
            showNotification(`✨ Outil ${toolName} ouvert !`);
        }
    });
});

// ===== Contact Form Submission =====
if (contactForm) {
    contactForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // Get form data
        const formData = {
            name: document.getElementById('name').value,
            email: document.getElementById('email').value,
            subject: document.getElementById('subject').value,
            message: document.getElementById('message').value,
            newsletter: document.getElementById('newsletter').checked
        };
        
        // Simulate form submission
        console.log('Form submitted:', formData);
        
        // Show success message
        successMessage.classList.add('active');
        
        // Reset form
        contactForm.reset();
        
        // Hide success message after 5 seconds
        setTimeout(() => {
            successMessage.classList.remove('active');
        }, 5000);
        
        // In production, you would send this to your backend:
        // fetch('/api/contact', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: JSON.stringify(formData)
        // });
    });
}

// ===== Notification System =====
const showNotification = (message, duration = 3000) => {
    // Remove existing notification if any
    const existingNotification = document.querySelector('.notification');
    if (existingNotification) {
        existingNotification.remove();
    }
    
    // Create notification element
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = message;
    notification.style.cssText = `
        position: fixed;
        top: 100px;
        right: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 0.75rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        z-index: 10000;
        animation: slideInRight 0.3s ease;
        font-weight: 600;
    `;
    
    document.body.appendChild(notification);
    
    // Remove notification after duration
    setTimeout(() => {
        notification.style.animation = 'slideOutRight 0.3s ease';
        setTimeout(() => notification.remove(), 300);
    }, duration);
};

// Add notification animations to CSS dynamically
const style = document.createElement('style');
style.textContent = `
    @keyframes slideInRight {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(400px);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

// ===== Login Button Handler =====
document.getElementById('loginBtn')?.addEventListener('click', () => {
    showNotification('🔐 Fonctionnalité de connexion à venir !');
    // In production, redirect to login page or open login modal
});

// ===== Scroll Reveal Animation =====
const revealElements = document.querySelectorAll('.tool-card, .pricing-card, .testimonial-card');

const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
            setTimeout(() => {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }, index * 100);
            revealObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.1 });

revealElements.forEach(element => {
    element.style.opacity = '0';
    element.style.transform = 'translateY(30px)';
    element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    revealObserver.observe(element);
});

// ===== Track User Engagement (Analytics Simulation) =====
const trackEvent = (category, action, label) => {
    console.log(`Analytics Event: ${category} - ${action} - ${label}`);
    
    // In production, send to Google Analytics or your analytics service:
    // gtag('event', action, {
    //     'event_category': category,
    //     'event_label': label
    // });
};

// Track button clicks
document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const btnText = btn.textContent.trim();
        trackEvent('Button', 'Click', btnText);
    });
});

// Track tool card interactions
document.querySelectorAll('.tool-card').forEach(card => {
    card.addEventListener('click', () => {
        const toolName = card.querySelector('.tool-card__title').textContent;
        trackEvent('Tool', 'View', toolName);
    });
});

// ===== Affiliate Link Tracking =====
document.querySelectorAll('.btn-affiliate').forEach(link => {
    link.addEventListener('click', () => {
        trackEvent('Affiliate', 'Click', link.href);
        showNotification('🎁 Redirection vers notre partenaire...');
    });
});

// ===== Save User Preferences =====
const savePreference = (key, value) => {
    try {
        localStorage.setItem(key, JSON.stringify(value));
    } catch (e) {
        console.error('Error saving preference:', e);
    }
};

const getPreference = (key, defaultValue = null) => {
    try {
        const value = localStorage.getItem(key);
        return value ? JSON.parse(value) : defaultValue;
    } catch (e) {
        console.error('Error getting preference:', e);
        return defaultValue;
    }
};

// ===== Load User Preferences on Page Load =====
window.addEventListener('DOMContentLoaded', () => {
    // Check if user has visited before
    const hasVisited = getPreference('hasVisited');
    
    if (!hasVisited) {
        // First time visitor - show welcome message
        setTimeout(() => {
            showNotification('👋 Bienvenue sur AI Tools Hub !', 4000);
        }, 1000);
        
        savePreference('hasVisited', true);
    }
    
    // Load pricing preference
    const preferYearly = getPreference('preferYearly', false);
    if (preferYearly && pricingToggle) {
        pricingToggle.checked = true;
        pricingToggle.dispatchEvent(new Event('change'));
    }
});

// Save pricing preference when changed
pricingToggle?.addEventListener('change', () => {
    savePreference('preferYearly', pricingToggle.checked);
});

// ===== Simulate Premium Upgrade =====
window.upgradeToPremium = () => {
    localStorage.setItem('isPremium', 'true');
    showNotification('🎉 Félicitations ! Vous êtes maintenant Premium !', 4000);
    closePremiumModal();
    
    // Update UI to reflect premium status
    document.querySelectorAll('.btn-tool').forEach(btn => {
        btn.textContent = '✨ Accès Premium';
    });
};

// ===== Easter Egg: Konami Code =====
let konamiCode = [];
const konamiSequence = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

document.addEventListener('keydown', (e) => {
    konamiCode.push(e.key);
    konamiCode = konamiCode.slice(-10);
    
    if (konamiCode.join(',') === konamiSequence.join(',')) {
        showNotification('🎮 Code Konami activé ! Premium gratuit pour 24h !', 5000);
        localStorage.setItem('isPremium', 'true');
        localStorage.setItem('premiumExpiry', Date.now() + 24 * 60 * 60 * 1000);
    }
});

// ===== Check Premium Expiry =====
const checkPremiumExpiry = () => {
    const expiry = localStorage.getItem('premiumExpiry');
    if (expiry && Date.now() > parseInt(expiry)) {
        localStorage.removeItem('isPremium');
        localStorage.removeItem('premiumExpiry');
        showNotification('⏰ Votre période Premium gratuite a expiré', 4000);
    }
};

checkPremiumExpiry();

// ===== Performance Monitoring =====
window.addEventListener('load', () => {
    // Log page load time
    const loadTime = performance.now();
    console.log(`Page loaded in ${loadTime.toFixed(2)}ms`);
    
    // Track page load performance
    trackEvent('Performance', 'PageLoad', `${loadTime.toFixed(0)}ms`);
});

// ===== Prevent Right Click on Images (Optional Protection) =====
document.querySelectorAll('img, svg').forEach(element => {
    element.addEventListener('contextmenu', (e) => {
        // Uncomment to prevent right-click
        // e.preventDefault();
        // showNotification('⚠️ Contenu protégé', 2000);
    });
});

// ===== Chatbot Functionality =====
const chatbot = document.getElementById('chatbot');
const chatbotToggle = document.getElementById('chatbotToggle');
const minimizeChat = document.getElementById('minimizeChat');
const chatMessages = document.getElementById('chatMessages');
const chatInput = document.getElementById('chatInput');
const sendMessageBtn = document.getElementById('sendMessage');
const chatbotBadge = document.querySelector('.chatbot__badge');

// Toggle chatbot
chatbotToggle?.addEventListener('click', () => {
    chatbot.classList.toggle('active');
    if (chatbot.classList.contains('active')) {
        chatInput.focus();
        chatbotBadge.style.display = 'none';
    }
});

// Minimize chatbot
minimizeChat?.addEventListener('click', (e) => {
    e.stopPropagation();
    chatbot.classList.remove('active');
});

// Chatbot responses database
const chatbotResponses = {
    'quels outils': {
        text: 'Nous proposons 10+ outils IA professionnels :\n\n✨ Générateur de Texte IA\n📊 Analyseur SEO Pro\n🎨 Générateur d\'Images\n💻 Assistant Code\n🌍 Traducteur Multilingue\n📄 Résumeur Intelligent\n✍️ Correcteur Orthographe\n🎤 Synthèse Vocale\n🔍 Détecteur de Plagiat\n📊 Créateur de Présentations\n\nQuel outil vous intéresse ?',
        suggestions: ['Générateur de texte', 'Analyseur SEO', 'Voir tous les outils']
    },
    'tarifs': {
        text: 'Nos tarifs sont simples et transparents :\n\n🆓 Plan Gratuit : 0€/mois\n• 5 générations IA/jour\n• Outils de base\n\n⭐ Plan Pro : 19€/mois (13€/mois en annuel)\n• Générations illimitées\n• Tous les outils premium\n• Support 24/7\n• API Access\n\n🏢 Plan Enterprise : Sur mesure\n• Solutions personnalisées\n\n🎉 Essai gratuit de 14 jours disponible !',
        suggestions: ['Essayer gratuitement', 'Passer à Pro', 'Contacter pour Enterprise']
    },
    'comment': {
        text: 'C\'est très simple ! 🚀\n\n1️⃣ Créez un compte gratuit (aucune CB requise)\n2️⃣ Choisissez votre outil IA\n3️⃣ Entrez votre demande\n4️⃣ Obtenez des résultats professionnels en secondes !\n\nNos outils utilisent GPT-4, DALL-E 3 et les dernières technologies IA pour vous garantir la meilleure qualité.',
        suggestions: ['Créer un compte', 'Voir une démo', 'En savoir plus']
    },
    'premium': {
        text: 'Le plan Premium vous offre :\n\n✅ Générations IA illimitées\n✅ Accès à tous les outils avancés\n✅ Support prioritaire 24/7\n✅ API Access (10k requêtes/mois)\n✅ Intégrations avancées\n✅ Pas de publicité\n\n💰 Seulement 19€/mois (ou 13€/mois en annuel)\n🎁 14 jours d\'essai gratuit\n🛡️ Garantie satisfait ou remboursé 30 jours',
        suggestions: ['Essayer 14 jours gratuits', 'Voir les fonctionnalités', 'Comparer les plans']
    },
    'aide': {
        text: 'Je suis là pour vous aider ! 😊\n\nVoici ce que je peux faire :\n\n💬 Répondre à vos questions\n📚 Vous guider dans l\'utilisation\n💡 Vous conseiller sur les outils\n🎯 Vous aider à choisir votre plan\n\nQue souhaitez-vous savoir ?',
        suggestions: ['Quels outils ?', 'Tarifs', 'Comment ça marche ?']
    },
    'default': {
        text: 'Merci pour votre message ! 😊\n\nJe peux vous aider avec :\n• Informations sur nos outils IA\n• Questions sur les tarifs\n• Aide technique\n• Démonstrations\n\nQue puis-je faire pour vous ?',
        suggestions: ['Voir les outils', 'Tarifs', 'Essayer gratuitement']
    }
};

// Send message function
const sendChatMessage = (message) => {
    if (!message.trim()) return;
    
    // Add user message
    const userMessage = document.createElement('div');
    userMessage.className = 'chatbot__message chatbot__message--user';
    userMessage.innerHTML = `
        <div class="message__content">
            <p>${message}</p>
        </div>
        <div class="message__avatar">👤</div>
    `;
    chatMessages.appendChild(userMessage);
    
    // Clear input
    chatInput.value = '';
    
    // Scroll to bottom
    chatMessages.scrollTop = chatMessages.scrollHeight;
    
    // Show typing indicator
    const typingIndicator = document.createElement('div');
    typingIndicator.className = 'chatbot__message chatbot__message--bot typing';
    typingIndicator.innerHTML = `
        <div class="message__avatar">🤖</div>
        <div class="message__content">
            <p>...</p>
        </div>
    `;
    chatMessages.appendChild(typingIndicator);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    
    // Simulate bot response delay
    setTimeout(() => {
        typingIndicator.remove();
        
        // Find appropriate response
        const messageLower = message.toLowerCase();
        let response = chatbotResponses.default;
        
        if (messageLower.includes('outil') || messageLower.includes('proposez')) {
            response = chatbotResponses['quels outils'];
        } else if (messageLower.includes('tarif') || messageLower.includes('prix') || messageLower.includes('abonnement')) {
            response = chatbotResponses.tarifs;
        } else if (messageLower.includes('comment') || messageLower.includes('marche') || messageLower.includes('fonctionne')) {
            response = chatbotResponses.comment;
        } else if (messageLower.includes('premium') || messageLower.includes('pro')) {
            response = chatbotResponses.premium;
        } else if (messageLower.includes('aide') || messageLower.includes('help') || messageLower.includes('bonjour') || messageLower.includes('salut')) {
            response = chatbotResponses.aide;
        }
        
        // Add bot response
        const botMessage = document.createElement('div');
        botMessage.className = 'chatbot__message chatbot__message--bot';
        
        let suggestionsHTML = '';
        if (response.suggestions) {
            suggestionsHTML = '<div class="message__suggestions">';
            response.suggestions.forEach(suggestion => {
                suggestionsHTML += `<button class="suggestion-btn" onclick="sendQuickMessage('${suggestion}')">${suggestion}</button>`;
            });
            suggestionsHTML += '</div>';
        }
        
        botMessage.innerHTML = `
            <div class="message__avatar">🤖</div>
            <div class="message__content">
                <p>${response.text.replace(/\n/g, '<br>')}</p>
                ${suggestionsHTML}
            </div>
        `;
        chatMessages.appendChild(botMessage);
        chatMessages.scrollTop = chatMessages.scrollHeight;
        
        // Track chatbot interaction
        trackEvent('Chatbot', 'Message', message);
    }, 1000 + Math.random() * 1000);
};

// Send message on button click
sendMessageBtn?.addEventListener('click', () => {
    sendChatMessage(chatInput.value);
});

// Send message on Enter key
chatInput?.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendChatMessage(chatInput.value);
    }
});

// Quick message function (for suggestion buttons)
window.sendQuickMessage = (message) => {
    chatInput.value = message;
    sendChatMessage(message);
};

// Show chatbot badge after 5 seconds
setTimeout(() => {
    if (chatbotBadge && !chatbot.classList.contains('active')) {
        chatbotBadge.style.display = 'flex';
    }
}, 5000);

// ===== Tool Modal System =====
const toolModals = {
    'text-generator': {
        title: '✍️ Générateur de Texte IA',
        content: `
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Type de contenu :</label>
                <select style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
                    <option>Article de blog</option>
                    <option>Post réseaux sociaux</option>
                    <option>Email marketing</option>
                    <option>Description produit</option>
                    <option>Script vidéo</option>
                </select>
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Sujet :</label>
                <input type="text" placeholder="Ex: Les avantages de l'IA dans le marketing" style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Ton :</label>
                <select style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
                    <option>Professionnel</option>
                    <option>Décontracté</option>
                    <option>Persuasif</option>
                    <option>Informatif</option>
                </select>
            </div>
            <button class="btn btn-primary btn-full" onclick="generateContent()">Générer le contenu</button>
        `
    },
    'translator': {
        title: '🌍 Traducteur IA Multilingue',
        content: `
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Langue source :</label>
                <select style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
                    <option>Français</option>
                    <option>Anglais</option>
                    <option>Espagnol</option>
                    <option>Allemand</option>
                    <option>Italien</option>
                </select>
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Langue cible :</label>
                <select style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
                    <option>Anglais</option>
                    <option>Français</option>
                    <option>Espagnol</option>
                    <option>Chinois</option>
                    <option>Arabe</option>
                </select>
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Texte à traduire :</label>
                <textarea placeholder="Entrez votre texte..." style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white; min-height: 120px; resize: vertical;"></textarea>
            </div>
            <button class="btn btn-primary btn-full" onclick="translateText()">Traduire</button>
        `
    },
    'summarizer': {
        title: '📄 Résumeur Intelligent',
        content: `
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Type de contenu :</label>
                <select style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
                    <option>Article / Blog</option>
                    <option>Document PDF</option>
                    <option>Vidéo YouTube</option>
                    <option>Page Web</option>
                </select>
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Texte ou URL :</label>
                <textarea placeholder="Collez votre texte ou URL..." style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white; min-height: 120px; resize: vertical;"></textarea>
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Longueur du résumé :</label>
                <select style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
                    <option>Court (3-5 phrases)</option>
                    <option>Moyen (1 paragraphe)</option>
                    <option>Détaillé (plusieurs paragraphes)</option>
                </select>
            </div>
            <button class="btn btn-primary btn-full" onclick="summarizeContent()">Résumer</button>
        `
    },
    'grammar': {
        title: '✍️ Correcteur Orthographe IA',
        content: `
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Votre texte :</label>
                <textarea placeholder="Collez votre texte à corriger..." style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white; min-height: 150px; resize: vertical;"></textarea>
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="checkbox" checked style="width: 20px; height: 20px;">
                    <span>Vérifier la grammaire</span>
                </label>
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-top: 0.5rem;">
                    <input type="checkbox" checked style="width: 20px; height: 20px;">
                    <span>Améliorer le style</span>
                </label>
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-top: 0.5rem;">
                    <input type="checkbox" style="width: 20px; height: 20px;">
                    <span>Ton professionnel</span>
                </label>
            </div>
            <button class="btn btn-primary btn-full" onclick="checkGrammar()">Analyser</button>
        `
    },
    'voice': {
        title: '🎤 Synthèse Vocale IA',
        content: `
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Texte à convertir :</label>
                <textarea placeholder="Entrez le texte à convertir en voix..." style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white; min-height: 100px; resize: vertical;"></textarea>
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Voix :</label>
                <select style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
                    <option>🇫🇷 Française (Femme)</option>
                    <option>🇫🇷 Français (Homme)</option>
                    <option>🇬🇧 Anglaise (Femme)</option>
                    <option>🇺🇸 Américaine (Homme)</option>
                    <option>🇪🇸 Espagnole (Femme)</option>
                </select>
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Vitesse : <span id="speedValue">1.0x</span></label>
                <input type="range" min="0.5" max="2" step="0.1" value="1" style="width: 100%;" oninput="document.getElementById('speedValue').textContent = this.value + 'x'">
            </div>
            <button class="btn btn-primary btn-full" onclick="generateVoice()">Générer la voix</button>
        `
    },
    'plagiarism': {
        title: '🔍 Détecteur de Plagiat',
        content: `
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Texte à vérifier :</label>
                <textarea placeholder="Collez le texte à analyser..." style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white; min-height: 150px; resize: vertical;"></textarea>
            </div>
            <div style="margin-bottom: 1rem; padding: 1rem; background: rgba(102, 126, 234, 0.1); border-radius: 0.5rem;">
                <p style="font-size: 0.875rem; color: #cbd5e1;">
                    ℹ️ Nous scannerons plus de 10 milliards de pages web et documents académiques pour détecter tout plagiat potentiel.
                </p>
            </div>
            <button class="btn btn-primary btn-full" onclick="checkPlagiarism()">Analyser l'originalité</button>
        `
    },
    'presentation': {
        title: '📊 Créateur de Présentations',
        content: `
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Sujet de la présentation :</label>
                <input type="text" placeholder="Ex: Stratégie Marketing 2024" style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Nombre de slides :</label>
                <input type="number" value="10" min="5" max="50" style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
            </div>
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Style :</label>
                <select style="width: 100%; padding: 0.75rem; background: #334155; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; color: white;">
                    <option>Professionnel</option>
                    <option>Créatif</option>
                    <option>Minimaliste</option>
                    <option>Corporate</option>
                </select>
            </div>
            <button class="btn btn-primary btn-full" onclick="createPresentation()">Créer la présentation</button>
        `
    }
};

// Open tool modal
window.openTool = (toolName) => {
    const toolData = toolModals[toolName];
    if (!toolData) {
        showNotification(`🚀 Outil ${toolName} en cours de développement !`);
        return;
    }
    
    // Create tool modal
    const toolModal = document.createElement('div');
    toolModal.className = 'modal active';
    toolModal.id = 'toolModal';
    toolModal.innerHTML = `
        <div class="modal__content" style="max-width: 600px;">
            <button class="modal__close" onclick="closeToolModal()">&times;</button>
            <div class="modal__header">
                <h3 class="modal__title">${toolData.title}</h3>
                <p class="modal__description">Remplissez les champs ci-dessous pour utiliser l'outil</p>
            </div>
            <div class="modal__body">
                ${toolData.content}
            </div>
        </div>
    `;
    
    document.body.appendChild(toolModal);
    document.body.style.overflow = 'hidden';
    
    // Close on background click
    toolModal.addEventListener('click', (e) => {
        if (e.target === toolModal) {
            closeToolModal();
        }
    });
    
    trackEvent('Tool', 'Open', toolName);
};

// Close tool modal
window.closeToolModal = () => {
    const toolModal = document.getElementById('toolModal');
    if (toolModal) {
        toolModal.remove();
        document.body.style.overflow = '';
    }
};

// Tool action functions
window.generateContent = () => {
    showNotification('✨ Génération en cours... (Fonctionnalité de démo)', 3000);
    setTimeout(() => {
        showNotification('✅ Contenu généré avec succès !', 3000);
    }, 2000);
};

window.translateText = () => {
    showNotification('🌍 Traduction en cours...', 2000);
    setTimeout(() => {
        showNotification('✅ Traduction terminée !', 3000);
    }, 1500);
};

window.summarizeContent = () => {
    showNotification('📄 Analyse et résumé en cours...', 2000);
    setTimeout(() => {
        showNotification('✅ Résumé généré !', 3000);
    }, 2000);
};

window.checkGrammar = () => {
    showNotification('✍️ Analyse grammaticale en cours...', 2000);
    setTimeout(() => {
        showNotification('✅ 3 corrections suggérées !', 3000);
    }, 2000);
};

window.generateVoice = () => {
    showNotification('🎤 Génération de la voix...', 2000);
    setTimeout(() => {
        showNotification('✅ Audio généré ! Lecture en cours...', 3000);
    }, 2500);
};

window.checkPlagiarism = () => {
    showNotification('🔍 Scan de 10 milliards de sources...', 3000);
    setTimeout(() => {
        showNotification('✅ Analyse terminée : 98% original !', 3000);
    }, 3000);
};

window.createPresentation = () => {
    showNotification('📊 Création de votre présentation...', 2000);
    setTimeout(() => {
        showNotification('✅ Présentation créée ! Téléchargement...', 3000);
    }, 2500);
};

// ===== Console Welcome Message =====
console.log('%c🤖 AI Tools Hub', 'font-size: 24px; font-weight: bold; color: #667eea;');
console.log('%cBienvenue dans la console ! 👨‍💻', 'font-size: 14px; color: #94a3b8;');
console.log('%cVous êtes développeur ? Rejoignez notre équipe !', 'font-size: 12px; color: #10b981;');
console.log('%ccontact@aitoolshub.com', 'font-size: 12px; color: #667eea; text-decoration: underline;');

// ===== Export Functions for Testing =====
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        showNotification,
        trackEvent,
        savePreference,
        getPreference,
        sendChatMessage,
        openTool
    };
}

console.log('✅ AI Tools Hub JavaScript loaded successfully!');
console.log('💬 Chatbot activé - Cliquez sur l\'icône en bas à droite !');