script.js

// Shared JavaScript across all pages

class SEOAutomaton {
    constructor() {
        this.isConnected = false;
        this.tasks = [];
        this.init();
    }

    init() {
        console.log('SEO Automaton Pro initialized');
        this.setupEventListeners();
        this.simulateRealTimeUpdates();
    }

    setupEventListeners() {
        // WordPress connection handler
        const connectBtn = document.querySelector('button[class*="bg-gradient"]');
        if (connectBtn) {
            connectBtn.addEventListener('click', () => this.handleConnection());
        }

        // Chat functionality
        const chatInput = document.querySelector('input[placeholder*="Ask your SEO agent"]');
        const sendBtn = document.querySelector('button[class*="bg-primary"]');
        
        if (sendBtn && chatInput) {
            sendBtn.addEventListener('click', () => this.handleChatMessage(chatInput.value));
            chatInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    this.handleChatMessage(chatInput.value);
                    chatInput.value = '';
                }
            });
        }
    }

    handleConnection() {
        this.isConnected = true;
        this.showNotification('Successfully connected to WordPress! Starting SEO automation...', 'success');
        
        // Simulate starting automation tasks
        setTimeout(() => {
            this.addTask('Site audit initiated', 'Analyzing site structure and content', 'in-progress');
        }, 1000);
    }

    handleChatMessage(message) {
        if (!message.trim()) return;

        this.addChatMessage(message, 'user');
        
        // Simulate AI response
        setTimeout(() => {
            const response = this.generateAIResponse(message);
            this.addChatMessage(response, 'agent');
        }, 1000);
    }

    addChatMessage(message, sender) {
        const chatContainer = document.querySelector('.bg-gray-700.rounded-xl.p-4');
        if (!chatContainer) return;

        const messageDiv = document.createElement('div');
        messageDiv.className = `flex justify-${sender === 'user' ? 'end' : 'start'} mb-4`;
        
        const bubble = document.createElement('div');
        bubble.className = sender === 'user' 
            ? 'bg-primary-500 rounded-2xl rounded-tr-none px-4 py-3 max-w-xs';
        bubble.innerHTML = `<p class="text-sm">${message}</p>`;
        
        messageDiv.appendChild(bubble);
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    generateAIResponse(message) {
        const responses = {
            'audit': 'Starting comprehensive SEO audit. This will analyze your site structure, content quality, technical SEO factors, and performance metrics. Results will be available in approximately 2 minutes.',
            'performance': 'I\'ll run performance optimization tasks including image compression, CSS/JS minification, and caching improvements.',
            'keywords': 'Analyzing your current keyword strategy and identifying new opportunities based on search volume and competition.',
            'default': 'I understand your request. Let me process that and provide you with the best optimization strategy for your WordPress site.'
        };

        const lowerMessage = message.toLowerCase();
        
        if (lowerMessage.includes('audit')) return responses.audit;
        if (lowerMessage.includes('performance') || lowerMessage.includes('speed')) return responses.performance;
        if (lowerMessage.includes('keyword')) return responses.keywords;
        
        return responses.default;
    }

    addTask(title, description, status = 'queued') {
        const tasksContainer = document.querySelector('.space-y-4');
        if (!tasksContainer) return;

        const taskDiv = document.createElement('div');
        const statusColors = {
            'completed': 'green',
            'in-progress': 'yellow',
            'queued': 'blue'
        };

        taskDiv.className = `bg-gray-700 rounded-xl p-4 border-l-4 border-${statusColors[status]}-500';
        taskDiv.innerHTML = `
            <div class="flex justify-between items-center">
                <span class="font-medium">${title}</span>
                <span class="text-xs text-${statusColors[status]}-400 bg-${statusColors[status]}-400/10 px-2 py-1 rounded-full">${status.replace('-', ' ')}</span>
            </div>
            <p class="text-sm text-gray-400 mt-2">${description}</p>
        `;

        tasksContainer.appendChild(taskDiv);
        this.tasks.push({ title, description, status });
    }

    simulateRealTimeUpdates() {
        // Simulate real-time analytics updates
        setInterval(() => {
            if (!this.isConnected) return;

            const visitorsElement = document.querySelector('.text-2xl.font-bold.text-primary-400');
            if (visitorsElement) {
                const current = parseInt(visitorsElement.textContent);
                const change = Math.floor(Math.random() * 10) - 2;
            visitorsElement.textContent = Math.max(800, current + change);
            }
        }, 5000);
    }

    showNotification(message, type = 'info') {
        // Create notification element
        const notification = document.createElement('div');
        const bgColor = type === 'success' ? 'bg-green-500' : 'bg-blue-500';
        notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 z-50';
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        // Animate in
        setTimeout(() => {
            notification.classList.remove('translate-x-full');
        }, 100);

        // Remove after 3 seconds
        setTimeout(() => {
            notification.classList.add('translate-x-full');
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 3000);
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.seoAutomaton = new SEOAutomaton();
});

// Utility functions
const utils = {
    formatNumber: (num) => {
        if (num >= 1000000) {
            return (num / 1000000).toFixed(1) + 'M';
        }
        if (num >= 1000) {
            return (num / 1000).toFixed(1) + 'K';
        }
        return num.toString();
    },

    debounce: (func, wait) => {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
};

console.log('SEO Automaton Pro - AI-powered SEO automation platform loaded');