script.js

// Main JavaScript for UgottaConnect
document.addEventListener('DOMContentLoaded', function() {
    initializeNodeVisualization();
    initializeToolCarousel();
    initializeNewsletterForm();
    initializeDarkModeToggle();
});

// Node connection visualization
function initializeNodeVisualization() {
    const container = document.getElementById('node-visualization');
    if (!container) return;

    const tools = [
        { name: 'n8n', icon: 'box', color: 'bg-blue-500' },
        { name: 'Zapier', icon: 'zap', color: 'bg-orange-500' },
        { name: 'Airtable', icon: 'database', color: 'bg-purple-500' },
        { name: 'Notion', icon: 'file-text', color: 'bg-gray-800' },
        { name: 'GitHub', icon: 'github', color: 'bg-gray-900' },
        { name: 'Stripe', icon: 'credit-card', color: 'bg-blue-600' },
        { name: 'OpenAI', icon: 'cpu', color: 'bg-green-600' },
        { name: 'Slack', icon: 'message-circle', color: 'bg-purple-600' },
        { name: 'Google', icon: 'mail', color: 'bg-red-500' }
    ];

    // Create nodes
    tools.forEach((tool, index) => {
        const node = document.createElement('div');
        node.className = `node ${tool.color} text-white flex flex-col items-center justify-center p-2 rounded-xl shadow-lg`;
        node.innerHTML = `
            <i data-feather="${tool.icon}"></i>
            <span class="text-xs mt-1 font-medium">${tool.name}</span>
        `;
        container.appendChild(node);
    });

    // Animate connections
    setTimeout(() => {
        createConnections();
    }, 1000);
}

function createConnections() {
    const nodes = document.querySelectorAll('.node');
    const container = document.getElementById('node-visualization');
    
    nodes.forEach((node, index) => {
        if (index < nodes.length - 1) {
            const nextNode = nodes[index + 1];
            const line = document.createElement('div');
            line.className = 'connection-line';
            
            const rect1 = node.getBoundingClientRect();
            const rect2 = nextNode.getBoundingClientRect();
            const containerRect = container.getBoundingClientRect();
            
            const x1 = rect1.left + rect1.width / 2 - containerRect.left;
            const y1 = rect1.top + rect1.height / 2 - containerRect.top;
            const x2 = rect2.left + rect2.width / 2 - containerRect.left;
            const y2 = rect2.top + rect2.height / 2 - containerRect.top;
            
            const length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
            const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
            
            line.style.width = `${length}px`;
            line.style.transform = `rotate(${angle}deg)`;
            line.style.top = `${y1}px`;
            line.style.left = `${x1}px`;
            
            container.appendChild(line);
        }
    });
}

// Tool carousel functionality
function initializeToolCarousel() {
    const carousel = document.querySelector('custom-tools-carousel');
    if (!carousel) return;

    let currentIndex = 0;
    const tools = [
        'n8n', 'Zapier', 'Make', 'Airtable', 'Notion', 'GitHub', 'Cloudflare', 
        'Stripe', 'OpenAI', 'Slack', 'Google', 'Microsoft', 'Salesforce',
        'HubSpot', 'Mailchimp', 'Twitter', 'Facebook', 'Instagram', 'YouTube'
    ];

    function updateCarousel() {
        const shadow = carousel.shadowRoot;
        if (!shadow) return;

        const toolGrid = shadow.querySelector('.tool-grid');
        if (!toolGrid) return;

        // Rotate tools
        const visibleTools = tools.slice(currentIndex, currentIndex + 8);
        if (visibleTools.length < 8) {
            visibleTools.push(...tools.slice(0, 8 - visibleTools.length));
        }

        toolGrid.innerHTML = '';
        visibleTools.forEach(tool => {
            const toolElement = document.createElement('div');
            toolElement.className = 'tool-card bg-white p-4 rounded-xl shadow-md border border-gray-100 flex items-center justify-center hover:shadow-lg transition-all duration-300';
            toolElement.innerHTML = `
                <div class="text-center">
                    <div class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center mx-auto mb-2">
                        <i data-feather="${getToolIcon(tool)}"></i>
                    </div>
                    <span class="text-sm font-medium text-gray-700">${tool}</span>
                </div>
            `;
            toolGrid.appendChild(toolElement);
        });

        currentIndex = (currentIndex + 1) % tools.length;
    }

    // Update carousel every 3 seconds
    setInterval(updateCarousel, 3000);
    updateCarousel(); // Initial call
}

function getToolIcon(toolName) {
    const iconMap = {
        'n8n': 'box',
        'Zapier': 'zap',
        'Make': 'settings',
        'Airtable': 'database',
        'Notion': 'file-text',
        'GitHub': 'github',
        'Cloudflare': 'cloud',
        'Stripe': 'credit-card',
        'OpenAI': 'cpu',
        'Slack': 'message-circle',
        'Google': 'mail',
        'Microsoft': 'briefcase',
        'Salesforce': 'trending-up',
        'HubSpot': 'target',
        'Mailchimp': 'send',
        'Twitter': 'twitter',
        'Facebook': 'facebook',
        'Instagram': 'instagram',
        'YouTube': 'youtube'
    };
    return iconMap[toolName] || 'link';
}

// Newsletter form handling
function initializeNewsletterForm() {
    const form = document.querySelector('custom-newsletter-form');
    if (!form) return;

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const shadow = form.shadowRoot;
        const emailInput = shadow.querySelector('input[type="email"]');
        const submitBtn = shadow.querySelector('button[type="submit"]');
        
        if (!validateEmail(emailInput.value)) {
            showFormError(shadow, 'Please enter a valid email address');
            return;
        }

        // Simulate API call
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<div class="spinner"></div>';

        setTimeout(() => {
            showFormSuccess(shadow, 'Success! You\'ve been added to our newsletter.');
            emailInput.value = '';
            submitBtn.disabled = false;
            submitBtn.textContent = 'Subscribe';
        }, 1500);
    });
}

function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

function showFormError(shadow, message) {
    let errorDiv = shadow.querySelector('.error-message');
    if (!errorDiv) {
        errorDiv = document.createElement('div');
        errorDiv.className = 'error-message text-center mt-2';
        shadow.querySelector('form').appendChild(errorDiv);
    }
    errorDiv.textContent = message;
    
    setTimeout(() => {
        errorDiv.textContent = '';
    }, 5000);
}

function showFormSuccess(shadow, message) {
    const successDiv = document.createElement('div');
    successDiv.className = 'text-green-600 text-center mt-2 font-medium';
    successDiv.textContent = message;
    shadow.querySelector('form').appendChild(successDiv);
    
    setTimeout(() => {
        successDiv.remove();
    }, 5000);
}

// Dark mode functionality
function initializeDarkModeToggle() {
    const toggle = document.querySelector('[data-dark-mode-toggle]');
    if (!toggle) return;

    toggle.addEventListener('click', function() {
        const html = document.documentElement;
        if (html.classList.contains('dark')) {
            html.classList.remove('dark');
            localStorage.setItem('darkMode', 'false');
        } else {
            html.classList.add('dark');
            localStorage.setItem('darkMode', 'true');
        }
        feather.replace();
    });

    // Check for saved dark mode preference
    if (localStorage.getItem('darkMode') === 'true') {
        document.documentElement.classList.add('dark');
    }
}

// Intersection Observer for animations
function initializeScrollAnimations() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-in');
            }
        });
    }, {
        threshold: 0.1
    });

    // Observe elements that should animate on scroll
    document.querySelectorAll('.fade-in').forEach(el => {
        observer.observe(el);
    });
}

// API status check
async function checkAPIStatus() {
    try {
        const response = await fetch('https://api.ugottaconnect.com/status');
        const data = await response.json();
        updateStatusIndicators(data);
    } catch (error) {
        console.error('Failed to fetch API status:', error);
    }
}

function updateStatusIndicators(statusData) {
    // Update status indicators in the UI
    const indicators = document.querySelectorAll('[data-api-status]');
    indicators.forEach(indicator => {
        const service = indicator.dataset.apiService;
        if (statusData[service] === 'operational') {
            indicator.className = 'w-2 h-2 bg-green-500 rounded-full';
        } else {
            indicator.className = 'w-2 h-2 bg-red-500 rounded-full';
        }
    });
}

// Initialize when DOM is loaded
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeScrollAnimations);
} else {
    initializeScrollAnimations();
}