// Services Page JavaScript - Simplified version

document.addEventListener('DOMContentLoaded', function() {
    initializeServices();
});

function initializeServices() {
    const serviceSections = document.querySelectorAll('.service-section');
    
    serviceSections.forEach(section => {
        section.addEventListener('mouseenter', function() {
            // Add specific background effects based on service type
            const serviceType = this.dataset.service;
            
            // Wait for card expansion animation to complete (600ms transition)
            setTimeout(() => {
                if (serviceType === 'web') {
                    addCodeBackground(this);
                } else if (serviceType === 'social') {
                    addNetworkBackground(this);
                } else if (serviceType === 'seo') {
                    addMatrixBackground(this);
                } else if (serviceType === 'identity') {
                    addParticleEffect(this);
                }
            }, 650);
        });
        
        section.addEventListener('mouseleave', function() {
            // Clean up backgrounds
            const backgrounds = this.querySelectorAll('.bg-animation');
            backgrounds.forEach(bg => bg.remove());
        });
    });
}

function addCodeBackground(section) {
    const container = document.createElement('div');
    container.className = 'bg-animation code-bg';
    container.innerHTML = `
        <div class="code-line">function createWebsite() {</div>
        <div class="code-line">  return new AwesomeSite();</div>
        <div class="code-line">}</div>
        <div class="code-line">// 2RO Graphic Design</div>
        <div class="code-line">const magic = true;</div>
    `;
    
    container.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.1;
        font-family: monospace;
        color: #fccf03;
        padding: 2rem;
        pointer-events: none;
        font-size: 12px;
        line-height: 1.5;
    `;
    
    section.querySelector('.service-expanded').appendChild(container);
}

function addNetworkBackground(section) {
    const container = document.createElement('div');
    container.className = 'bg-animation network-bg';
    
    // Create simple animated dots
    for (let i = 0; i < 10; i++) {
        const dot = document.createElement('div');
        dot.style.cssText = `
            position: absolute;
            width: 4px;
            height: 4px;
            background: ${Math.random() > 0.5 ? '#fccf03' : '#ffffff'};
            border-radius: 50%;
            left: ${Math.random() * 100}%;
            top: ${Math.random() * 100}%;
            animation: networkFloat 3s ease-in-out infinite ${Math.random() * 2}s;
        `;
        container.appendChild(dot);
    }
    
    container.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.3;
        pointer-events: none;
    `;
    
    section.querySelector('.service-expanded').appendChild(container);
    
    // Add animation CSS if not exists
    if (!document.getElementById('network-style')) {
        const style = document.createElement('style');
        style.id = 'network-style';
        style.textContent = `
            @keyframes networkFloat {
                0%, 100% { transform: translateY(0px); }
                50% { transform: translateY(-20px); }
            }
        `;
        document.head.appendChild(style);
    }
}

function addMatrixBackground(section) {
    const container = document.createElement('div');
    container.className = 'bg-animation matrix-bg';
    container.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        overflow: hidden;
        display: flex;
    `;
    
    section.querySelector('.service-expanded').appendChild(container);
    
    // Add matrix CSS if not exists
    if (!document.getElementById('matrix-style')) {
        const style = document.createElement('style');
        style.id = 'matrix-style';
        style.textContent = `
            .matrix-bg p {
                line-height: 1;
                margin: 0;
                padding: 0;
            }
            .matrix-bg span {
                display: block;
                width: 0.5rem;
                height: 0.6rem;
                font-size: 0.5rem;
                color: rgba(252, 207, 3, 0.1);
                text-align: center;
                font-family: "Courier New", monospace;
                line-height: 0.6rem;
            }
        `;
        document.head.appendChild(style);
    }
    
    // Matrix rain classes adapted for SEO theme
    function r(from, to) {
        return ~~(Math.random() * (to - from + 1) + from);
    }
    function pick() {
        return arguments[r(0, arguments.length - 1)];
    }
    function getChar() {
        // SEO related characters and symbols
        const seoChars = 'SEO0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ<>{}[]()/*-+=#@$%^&*';
        const keywords = ['SEO', 'RANK', 'META', 'H1', 'H2', 'URL', 'SSL', 'API'];
        
        if (Math.random() < 0.3) {
            return pick(...keywords);
        }
        return seoChars[r(0, seoChars.length - 1)];
    }
    
    function loop(fn, delay, stopCondition) {
        let stamp = Date.now();
        function _loop() {
            if (stopCondition && stopCondition()) return;
            if (Date.now() - stamp >= delay) {
                fn(); stamp = Date.now();
            }
            requestAnimationFrame(_loop);
        }
        requestAnimationFrame(_loop);
    }
    
    class Char {
        constructor() {
            this.element = document.createElement('span');
            this.mutate();
        }
        mutate() {
            this.element.textContent = getChar();
        }
    }
    
    class Trail {
        constructor(list = [], options) {
            this.list = list;
            this.options = Object.assign({ size: 10, offset: 0 }, options);
            this.body = [];
            this.move();
        }
        traverse(fn) {
            this.body.forEach((n, i) => {
                let last = (i == this.body.length - 1);
                if (n) fn(n, i, last);
            });
        }
        move() {
            this.body = [];
            let { offset, size } = this.options;
            for (let i = 0; i < size; ++i) {
                let item = this.list[offset + i - size + 1];
                this.body.push(item);
            }
            this.options.offset = (offset + 1) % (this.list.length + size - 1);
        }
    }
    
    class Rain {
        constructor({ target, row, stopCondition }) {
            this.element = document.createElement('p');
            this.stopCondition = stopCondition;
            this.build(row);
            if (target) {
                target.appendChild(this.element);
            }
            this.drop();
        }
        build(row = 20) {
            let root = document.createDocumentFragment();
            let chars = [];
            for (let i = 0; i < row; ++i) {
                let c = new Char();
                root.appendChild(c.element);
                chars.push(c);
                if (Math.random() < .5) {
                    loop(() => c.mutate(), r(1e3, 5e3), this.stopCondition);
                }
            }
            this.trail = new Trail(chars, { 
                size: r(5, 15), offset: r(0, 50) 
            });
            this.element.appendChild(root); 
        }
        drop() {
            let trail = this.trail;
            let len = trail.body.length;
            let delay = r(50, 200);
            loop(() => {
                trail.move();
                trail.traverse((c, i, last) => {
                    c.element.style = `
                        color: rgba(252, 207, 3, ${0.3 / len * (i + 1)})
                    `;
                    if (last) {
                        c.mutate();
                        c.element.style = `
                            color: rgba(252, 207, 3, 0.5);
                            text-shadow: 0 0 .3em rgba(252, 207, 3, 0.5);
                        `;
                    }
                });
            }, delay, this.stopCondition);
        }
    }
    
    // Create rain effects to fill the entire card
    const stopCondition = () => !section.matches(':hover');
    
    // Calculate how many columns we need based on card width
    const cardWidth = section.offsetWidth;
    const cardHeight = section.offsetHeight;
    const columnWidth = 8; // 0.5rem = ~8px
    const rowHeight = 10; // 0.6rem = ~10px
    const numColumns = Math.ceil(cardWidth / columnWidth) + 5; // Add extra to ensure coverage
    const numRows = Math.ceil(cardHeight / rowHeight) + 10; // Add extra rows
    
    // Card dimensions calculated
    
    for (let i = 0; i < numColumns; ++i) {
        new Rain({ 
            target: container, 
            row: numRows, // Dynamic row count based on card height
            stopCondition: stopCondition
        });
    }
}

function addParticleEffect(section) {
    const container = document.createElement('div');
    container.className = 'bg-animation particle-bg';
    
    // Create particles
    for (let i = 0; i < 8; i++) {
        const particle = document.createElement('div');
        particle.style.cssText = `
            position: absolute;
            width: 3px;
            height: 3px;
            background: #fccf03;
            border-radius: 50%;
            left: ${Math.random() * 100}%;
            top: ${Math.random() * 100}%;
            animation: particleFloat 3s ease-in-out infinite ${Math.random() * 2}s;
        `;
        container.appendChild(particle);
    }
    
    container.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.4;
        pointer-events: none;
    `;
    
    section.querySelector('.service-expanded').appendChild(container);
    
    // Add animation CSS if not exists
    if (!document.getElementById('particle-style')) {
        const style = document.createElement('style');
        style.id = 'particle-style';
        style.textContent = `
            @keyframes particleFloat {
                0%, 100% { transform: translateY(0px) rotate(0deg); }
                50% { transform: translateY(-30px) rotate(180deg); }
            }
        `;
        document.head.appendChild(style);
    }
}