// Particle Canvas Animation
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
const particleCount = 100;

class Particle {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 3 + 1;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.opacity = Math.random() * 0.5 + 0.2;
    }

    update() {
        this.x += this.speedX;
        this.y += this.speedY;

        if (this.x > canvas.width) this.x = 0;
        else if (this.x < 0) this.x = canvas.width;

        if (this.y > canvas.height) this.y = 0;
        else if (this.y < 0) this.y = canvas.height;
    }

    draw() {
        ctx.fillStyle = `rgba(0, 212, 255, ${this.opacity})`;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

function init() {
    for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle());
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();
    }
    
    connectParticles();
    requestAnimationFrame(animate);
}

function connectParticles() {
    for (let a = 0; a < particles.length; a++) {
        for (let b = a; b < particles.length; b++) {
            const distance = Math.sqrt(
                Math.pow(particles[a].x - particles[b].x, 2) +
                Math.pow(particles[a].y - particles[b].y, 2)
            );
            
            if (distance < 100) {
                ctx.strokeStyle = `rgba(0, 212, 255, ${0.2 * (1 - distance / 100)})`;
                ctx.lineWidth = 1;
                ctx.beginPath();
                ctx.moveTo(particles[a].x, particles[a].y);
                ctx.lineTo(particles[b].x, particles[b].y);
                ctx.stroke();
            }
        }
    }
}

init();
animate();

// Resize canvas
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

// Navbar scroll effect - DEAKTIVIERT
// const navbar = document.querySelector('.navbar');
// window.addEventListener('scroll', () => {
//     if (window.scrollY > 50) {
//         navbar.classList.add('scrolled');
//     } else {
//         navbar.classList.remove('scrolled');
//     }
// });

// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Interactive Icon Animation
const icon = document.getElementById('interactiveIcon');
if (icon) {
    let mouseX = 0;
    let mouseY = 0;

    document.addEventListener('mousemove', (e) => {
        const rect = icon.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        
        mouseX = (e.clientX - centerX) / 20;
        mouseY = (e.clientY - centerY) / 20;
        
        icon.style.transform = `perspective(1000px) rotateY(${mouseX}deg) rotateX(${-mouseY}deg)`;
    });
}

// Trust Indicators Counter Animation
const counters = document.querySelectorAll('.indicator-value');
const speed = 200;

const animateCounter = (counter) => {
    const target = +counter.getAttribute('data-target');
    const increment = target / speed;
    
    const updateCounter = () => {
        const current = +counter.innerText.replace('%', '').replace('+', '').replace('/7', '');
        
        if (current < target) {
            counter.innerText = Math.ceil(current + increment);
            setTimeout(updateCounter, 10);
        } else {
            if (counter.getAttribute('data-target') === '99.9') {
                counter.innerText = target + '%';
            } else if (counter.getAttribute('data-target') === '500') {
                counter.innerText = target + '+';
            } else if (counter.getAttribute('data-target') === '24') {
                counter.innerText = target + '/7';
            }
        }
    };
    
    updateCounter();
};

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

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Animate counters
            if (entry.target.classList.contains('trust-indicators')) {
                counters.forEach(counter => animateCounter(counter));
                observer.unobserve(entry.target);
            }
            
            // Animate timeline items with new effect
            if (entry.target.classList.contains('timeline')) {
                const items = entry.target.querySelectorAll('.timeline-item');
                items.forEach((item, index) => {
                    setTimeout(() => {
                        item.classList.add('visible');
                    }, index * 300);
                });
                observer.unobserve(entry.target);
            }
            
            // Animate feature nodes
            if (entry.target.classList.contains('feature-nodes')) {
                const nodes = entry.target.querySelectorAll('.node');
                nodes.forEach((node, index) => {
                    setTimeout(() => {
                        node.style.opacity = '1';
                        node.style.transform = 'translateY(0)';
                    }, index * 150);
                });
                observer.unobserve(entry.target);
            }
        }
    });
}, observerOptions);

// Observe elements
document.querySelector('.trust-indicators').style.opacity = '0';
observer.observe(document.querySelector('.trust-indicators'));
observer.observe(document.querySelector('.timeline'));

// Set initial states for feature nodes
document.querySelectorAll('.node').forEach(node => {
    node.style.opacity = '0';
    node.style.transform = 'translateY(30px)';
    node.style.transition = 'all 0.6s ease';
});
observer.observe(document.querySelector('.feature-nodes'));

// Language Toggle
const langToggle = document.querySelector('.lang-toggle');
const translations = {
    de: {
        features: 'Funktionen',
        security: 'Sicherheit',
        about: 'Über uns',
        contact: 'Kontakt',
        requestDemo: 'Demo anfordern',
        heroTitle: 'SICHERHEIT MADE IN GERMANY',
        heroText: 'Fortschrittliche Software für moderne Strafverfolgung',
        discoverMore: 'Entdecken Sie mehr',
        liveDemo: 'Live-Demo',
        availability: 'Verfügbarkeit',
        trustedBy: 'Behörden vertrauen uns',
        support: 'Support',
        digitalBeat: 'Der Digitale Takt',
        dayWithIntelSight: 'Ein Tag mit IntelSight',
        shiftStart: 'Schichtbeginn',
        shiftStartDesc: 'Automatische Zusammenfassung der Nacht-Ereignisse',
        realTimeAnalysis: 'Echtzeit-Analyse',
        realTimeAnalysisDesc: 'KI-gestützte Mustererkennung in laufenden Fällen',
        preventiveSecurity: 'Präventive Sicherheit',
        preventiveSecurityDesc: 'Vorhersage-Algorithmen identifizieren Risikobereiche',
        dailyReport: 'Tagesbericht',
        dailyReportDesc: 'Automatisierte Dokumentation und Übergabe',
        intelligenceViz: 'Intelligenz visualisiert',
        encryption: 'Ende-zu-Ende Verschlüsselung',
        encryptionDesc: 'Militärgrade Sicherheit für sensible Daten',
        aiAnalysis: 'KI-Analyse',
        aiAnalysisDesc: 'Mustererkennung in Echtzeit',
        integration: 'Nahtlose Integration',
        integrationDesc: 'Verbindung zu bestehenden Systemen',
        compliance: '100% DSGVO-konform',
        complianceDesc: 'Entwickelt nach deutschem Datenschutzrecht',
        germanEngineering: 'Deutsche Ingenieurskunst',
        speed: 'Geschwindigkeit',
        speedDesc: 'Millisekunden-Reaktionszeit bei kritischen Alarmen',
        precision: 'Präzision',
        precisionDesc: '99.97% Genauigkeit bei der Datenanalyse',
        reliability: 'Zuverlässigkeit',
        reliabilityDesc: 'Ausfallsichere Redundanz-Systeme',
        commandCenter: 'Kommandozentrale',
        overview: 'Übersicht',
        analysis: 'Analyse',
        reports: 'Berichte',
        threatLevel: 'Bedrohungsstufe',
        low: 'NIEDRIG',
        activeCases: 'Aktive Fälle',
        responseTime: 'Ø Reaktionszeit',
        deploymentMap: 'Einsatzkarte',
        ctaTitle: 'Bereit für die Zukunft der Strafverfolgung?',
        ctaSubtitle: 'Erleben Sie IntelSight in Aktion',
        scheduleDemo: 'Demo vereinbaren',
        getInTouch: 'Kontakt aufnehmen',
        legal: 'Rechtliches',
        imprint: 'Impressum',
        privacy: 'Datenschutz',
        terms: 'AGB',
        contact: 'Kontakt',
        allRights: 'Alle Rechte vorbehalten.'
    },
    en: {
        features: 'Features',
        security: 'Security',
        about: 'About',
        contact: 'Contact',
        requestDemo: 'Request Demo',
        heroTitle: 'SECURITY MADE IN GERMANY',
        heroText: 'Advanced Software for Modern Law Enforcement',
        discoverMore: 'Discover More',
        liveDemo: 'Live Demo',
        availability: 'Availability',
        trustedBy: 'Authorities trust us',
        support: 'Support',
        digitalBeat: 'The Digital Beat',
        dayWithIntelSight: 'A Day with IntelSight',
        shiftStart: 'Shift Start',
        shiftStartDesc: 'Automatic summary of night events',
        realTimeAnalysis: 'Real-time Analysis',
        realTimeAnalysisDesc: 'AI-powered pattern recognition in ongoing cases',
        preventiveSecurity: 'Preventive Security',
        preventiveSecurityDesc: 'Predictive algorithms identify risk areas',
        dailyReport: 'Daily Report',
        dailyReportDesc: 'Automated documentation and handover',
        intelligenceViz: 'Intelligence Visualized',
        encryption: 'End-to-End Encryption',
        encryptionDesc: 'Military-grade security for sensitive data',
        aiAnalysis: 'AI Analysis',
        aiAnalysisDesc: 'Real-time pattern recognition',
        integration: 'Seamless Integration',
        integrationDesc: 'Connection to existing systems',
        compliance: '100% GDPR Compliant',
        complianceDesc: 'Developed according to German data protection law',
        germanEngineering: 'German Engineering',
        speed: 'Speed',
        speedDesc: 'Millisecond response time for critical alerts',
        precision: 'Precision',
        precisionDesc: '99.97% accuracy in data analysis',
        reliability: 'Reliability',
        reliabilityDesc: 'Fail-safe redundancy systems',
        commandCenter: 'Command Center',
        overview: 'Overview',
        analysis: 'Analysis',
        reports: 'Reports',
        threatLevel: 'Threat Level',
        low: 'LOW',
        activeCases: 'Active Cases',
        responseTime: 'Avg Response Time',
        deploymentMap: 'Deployment Map',
        ctaTitle: 'Ready for the Future of Law Enforcement?',
        ctaSubtitle: 'Experience IntelSight in Action',
        scheduleDemo: 'Schedule Demo',
        getInTouch: 'Get in Touch',
        legal: 'Legal',
        imprint: 'Imprint',
        privacy: 'Privacy',
        terms: 'Terms',
        contact: 'Contact',
        allRights: 'All rights reserved.'
    }
};

let currentLang = 'de';

langToggle.addEventListener('click', () => {
    currentLang = currentLang === 'de' ? 'en' : 'de';
    langToggle.textContent = currentLang === 'de' ? 'DE | EN' : 'EN | DE';
    langToggle.setAttribute('data-lang', currentLang);
    updateLanguage();
});

function updateLanguage() {
    const t = translations[currentLang];
    
    // Navigation
    document.querySelector('.nav-menu li:nth-child(1) a').textContent = t.features;
    document.querySelector('.nav-menu li:nth-child(2) a').textContent = t.security;
    document.querySelector('.nav-menu li:nth-child(3) a').textContent = t.about;
    document.querySelector('.nav-menu li:nth-child(4) a').textContent = t.contact;
    document.querySelector('.cta-button').textContent = t.requestDemo;
    
    // Hero
    document.querySelector('.main-title').textContent = t.heroTitle;
    document.querySelector('.hero-text').textContent = t.heroText;
    document.querySelector('.primary-button').textContent = t.discoverMore;
    document.querySelector('.secondary-button').textContent = t.liveDemo;
    
    // Trust Indicators
    document.querySelectorAll('.indicator-label')[0].textContent = t.availability;
    document.querySelectorAll('.indicator-label')[1].textContent = t.trustedBy;
    document.querySelectorAll('.indicator-label')[2].textContent = t.support;
    
    // Update all other sections similarly...
}

// Interactive Node Effects
document.querySelectorAll('.node').forEach(node => {
    node.addEventListener('mouseenter', function() {
        const icon = this.querySelector('.node-icon');
        icon.style.transform = 'scale(1.2) rotate(5deg)';
    });
    
    node.addEventListener('mouseleave', function() {
        const icon = this.querySelector('.node-icon');
        icon.style.transform = 'scale(1) rotate(0deg)';
    });
});

// Dashboard Widget Animations
document.querySelectorAll('.widget').forEach(widget => {
    widget.addEventListener('mouseenter', function() {
        this.style.boxShadow = '0 5px 20px rgba(0, 212, 255, 0.3)';
    });
    
    widget.addEventListener('mouseleave', function() {
        this.style.boxShadow = 'none';
    });
});

// Tab Switching
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
    tab.addEventListener('click', function() {
        tabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
    });
});

// Form handling for demo requests
document.querySelectorAll('.primary-button, .secondary-button, .cta-button').forEach(button => {
    if (button.textContent.includes('Demo') || button.textContent.includes('demo')) {
        button.addEventListener('click', (e) => {
            e.preventDefault();
            alert('Demo-Anfrage-Funktion würde hier implementiert werden');
        });
    }
});

// Glitch effect on hover for main title
const mainTitle = document.querySelector('.main-title');
let glitchInterval;

mainTitle.addEventListener('mouseenter', () => {
    let count = 0;
    glitchInterval = setInterval(() => {
        mainTitle.style.textShadow = `
            ${Math.random() * 5}px ${Math.random() * 5}px 0 rgba(0, 212, 255, 0.5),
            ${Math.random() * -5}px ${Math.random() * 5}px 0 rgba(255, 0, 128, 0.5)
        `;
        count++;
        if (count > 5) {
            clearInterval(glitchInterval);
            mainTitle.style.textShadow = 'none';
        }
    }, 50);
});

// Mouse parallax effect for hero content - DEAKTIVIERT
// const heroContent = document.querySelector('.hero-content');
// document.addEventListener('mousemove', (e) => {
//     const x = (window.innerWidth / 2 - e.clientX) / 50;
//     const y = (window.innerHeight / 2 - e.clientY) / 50;
//     
//     heroContent.style.transform = `translateX(${x}px) translateY(${y}px)`;
// });

// Neural Network Visualization
function initNeuralNetwork() {
    const canvas = document.getElementById('neuralCanvas');
    if (!canvas) return;
    
    const section = document.querySelector('.intelligence-viz');
    if (!section) return;
    
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = section.offsetHeight;
    
    const nodes = [];
    const connections = [];
    const nodeCount = 20;
    
    // Create nodes
    for (let i = 0; i < nodeCount; i++) {
        nodes.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            vx: (Math.random() - 0.5) * 0.5,
            vy: (Math.random() - 0.5) * 0.5,
            radius: Math.random() * 3 + 2,
            pulsePhase: Math.random() * Math.PI * 2
        });
    }
    
    // Create connections
    for (let i = 0; i < nodeCount; i++) {
        for (let j = i + 1; j < nodeCount; j++) {
            if (Math.random() < 0.15) {
                connections.push({ from: i, to: j, strength: Math.random() });
            }
        }
    }
    
    function animate() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.02)'; // Weniger opak für subtileren Effekt
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Update and draw connections
        connections.forEach(conn => {
            const from = nodes[conn.from];
            const to = nodes[conn.to];
            const distance = Math.sqrt((to.x - from.x) ** 2 + (to.y - from.y) ** 2);
            
            if (distance < 300) {
                ctx.beginPath();
                ctx.moveTo(from.x, from.y);
                ctx.lineTo(to.x, to.y);
                ctx.strokeStyle = `rgba(0, 212, 255, ${(1 - distance / 300) * 0.15 * conn.strength})`; // Schwächere Linien
                ctx.lineWidth = conn.strength * 1.5;
                ctx.stroke();
                
                // Data flow animation
                const flowProgress = (Date.now() / 1000) % 1;
                const flowX = from.x + (to.x - from.x) * flowProgress;
                const flowY = from.y + (to.y - from.y) * flowProgress;
                
                ctx.beginPath();
                ctx.arc(flowX, flowY, 2, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(0, 212, 255, 0.8)';
                ctx.fill();
            }
        });
        
        // Update and draw nodes
        nodes.forEach((node, i) => {
            // Update position
            node.x += node.vx;
            node.y += node.vy;
            
            // Bounce off walls
            if (node.x < 0 || node.x > canvas.width) node.vx *= -1;
            if (node.y < 0 || node.y > canvas.height) node.vy *= -1;
            
            // Keep in bounds
            node.x = Math.max(0, Math.min(canvas.width, node.x));
            node.y = Math.max(0, Math.min(canvas.height, node.y));
            
            // Draw node with pulse effect
            const pulseSize = Math.sin(Date.now() / 500 + node.pulsePhase) * 0.3 + 1;
            
            ctx.beginPath();
            ctx.arc(node.x, node.y, node.radius * pulseSize, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(0, 212, 255, 0.4)'; // Weniger intensive Nodes
            ctx.fill();
            
            // Glow effect
            const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, node.radius * pulseSize * 4);
            gradient.addColorStop(0, 'rgba(0, 212, 255, 0.15)');
            gradient.addColorStop(1, 'rgba(0, 212, 255, 0)');
            ctx.fillStyle = gradient;
            ctx.beginPath();
            ctx.arc(node.x, node.y, node.radius * pulseSize * 4, 0, Math.PI * 2);
            ctx.fill();
        });
        
        requestAnimationFrame(animate);
    }
    
    animate();
}

// Data Particles
function initDataParticles() {
    const container = document.getElementById('dataParticles');
    if (!container) return;
    
    for (let i = 0; i < 30; i++) {
        const particle = document.createElement('div');
        particle.className = 'data-particle';
        particle.style.left = Math.random() * 100 + '%';
        particle.style.top = Math.random() * 100 + '%';
        particle.style.animationDelay = Math.random() * 20 + 's';
        particle.style.animationDuration = (20 + Math.random() * 10) + 's';
        container.appendChild(particle);
    }
}

// Live Dashboard Functions
function initLiveDashboard() {
    // Animated Counter
    const counter = document.getElementById('liveCounter');
    if (counter) {
        let currentValue = 0;
        const targetValue = 247;
        const increment = targetValue / 100;
        
        const updateCounter = () => {
            currentValue += increment;
            if (currentValue < targetValue) {
                counter.textContent = Math.floor(currentValue);
                requestAnimationFrame(updateCounter);
            } else {
                counter.textContent = targetValue;
                // Continue with live updates
                setInterval(() => {
                    const variation = Math.floor(Math.random() * 10) - 5;
                    counter.textContent = Math.max(0, parseInt(counter.textContent) + variation);
                }, 3000);
            }
        };
        updateCounter();
    }
    
    // Response Timer
    const timer = document.getElementById('responseTimer');
    if (timer) {
        setInterval(() => {
            const time = (Math.random() * 2 + 2).toFixed(1);
            timer.textContent = time + 's';
            timer.style.color = time < 3 ? '#4CAF50' : time < 4 ? '#FFC107' : '#FF4444';
        }, 2000);
    }
    
    // Map Points
    const mapPoints = document.getElementById('mapPoints');
    if (mapPoints) {
        // Create initial points
        for (let i = 0; i < 5; i++) {
            const point = document.createElement('div');
            point.className = 'map-point';
            point.style.left = Math.random() * 80 + 10 + '%';
            point.style.top = Math.random() * 80 + 10 + '%';
            point.style.animationDelay = Math.random() * 2 + 's';
            mapPoints.appendChild(point);
        }
        
        // Add new points periodically
        setInterval(() => {
            if (mapPoints.children.length < 10) {
                const point = document.createElement('div');
                point.className = 'map-point';
                point.style.left = Math.random() * 80 + 10 + '%';
                point.style.top = Math.random() * 80 + 10 + '%';
                point.style.animation = 'pointPulse 2s ease-in-out infinite, fadeIn 0.5s ease-out';
                mapPoints.appendChild(point);
                
                setTimeout(() => {
                    point.style.animation = 'pointPulse 2s ease-in-out infinite';
                }, 500);
            }
        }, 5000);
    }
}

// Parallax Scrolling
function initParallax() {
    const sections = document.querySelectorAll('section');
    const transitions = document.querySelectorAll('.section-transition');
    
    window.addEventListener('scroll', () => {
        const scrolled = window.pageYOffset;
        
        // Parallax for sections
        sections.forEach((section, index) => {
            const rate = scrolled * -0.5;
            const yPos = -(scrolled * 0.01 * index);
            
            if (section.classList.contains('digital-beat') || 
                section.classList.contains('intelligence-viz') ||
                section.classList.contains('german-engineering') ||
                section.classList.contains('command-center')) {
                section.style.transform = `translateY(${yPos}px)`;
            }
        });
        
        // Parallax for transitions
        transitions.forEach((transition, index) => {
            const rect = transition.getBoundingClientRect();
            const speed = 0.5;
            
            if (rect.bottom >= 0 && rect.top <= window.innerHeight) {
                const yPos = -(scrolled * speed * 0.1);
                transition.style.transform = `translateY(${yPos}px)`;
            }
        });
        
        // Parallax for specific elements
        // Hero content bleibt statisch (keine Parallax)
        // const heroContent = document.querySelector('.hero-content');
        // if (heroContent) {
        //     heroContent.style.transform = `translateY(${scrolled * 0.3}px)`;
        // }
        
        // Hero video bleibt statisch
        // const heroVideo = document.querySelector('.hero-video');
        // if (heroVideo) {
        //     heroVideo.style.transform = `translate(-50%, ${-50 + scrolled * 0.1}%)`;
        // }
    });
}

// Initialize everything
window.addEventListener('load', () => {
    // Add loaded class for animations
    document.body.classList.add('loaded');
    
    // Start animations
    setTimeout(() => {
        document.querySelector('.hero-content').style.opacity = '1';
        document.querySelector('.hero-content').style.transform = 'translateY(0)';
    }, 100);
    
    // Initialize neural network
    initNeuralNetwork();
    initDataParticles();
    initLiveDashboard();
    initParallax();
});