//H3 aesthetic  
document.addEventListener('DOMContentLoaded', () => {
    h3Title=document.querySelectorAll('h3');

    if(h3Title){
        h3Title.forEach(h3 => {
            const words = h3.innerText.split(' ');
            if (words.length > 0) {
                words[0] = `<span class="first-word">${words[0]}</span>`;
                h3.innerHTML = words.join(' ');
            }
        });
    }
});

// Generate trigger for Swtich box 
document.addEventListener('DOMContentLoaded', function () {
    const switchBoxes = document.querySelectorAll('.switch-box');
    
    if(switchBoxes.length > 0){
        console.log("loop switch")
        const triggerSection = document.createElement('section');
        triggerSection.id = 'switch-box-trigger';

        // const triggerSection = document.getElementById('switch-box-trigger');

        switchBoxes.forEach((box, index) => {
            const button = document.createElement('button');
            button.textContent = box.id;
            button.dataset.target = box.id;
            button.classList.add('btn');
            button.classList.add('lv2');
            button.classList.add('activable');
            triggerSection.appendChild(button);

            button.addEventListener('click', function (event) {

            const triggerButtons = document.querySelectorAll('#switch-box-trigger button');

            triggerButtons.forEach((button) => {
                button.classList.remove('active');
            });
            
            switchBoxes.forEach((div) => {
                div.style.display = 'none';
            });

            this.classList.add('active');

            const targetBox = document.getElementById(this.dataset.target);
            if (targetBox) {
                targetBox.style.display = 'block';
            }
        });
        
        if (index === 0) {
            button.classList.add('active');
        }

        });
        const parent = switchBoxes[0].parentNode;
        parent.insertBefore(triggerSection, switchBoxes[0]);
        
        if (switchBoxes.length > 0) {
            switchBoxes[0].style.display = 'block';
        }
    }
});

// Select implementation type
document.addEventListener('DOMContentLoaded', function () {
        const triggerButtons = document.querySelectorAll('button.activable.implementationtype');
        const implementationCards = document.querySelectorAll('.implementation');

        if (implementationCards.length>0){
            triggerButtons.forEach((button) => {
                button.addEventListener('click', function () { 
                    const buttonTypeArray = this.dataset.type.split(' ');  
                    console.log("button " + buttonTypeArray);           
                    triggerButtons.forEach((button) => {
                        button.classList.remove('active');
                    });
                
                    implementationCards.forEach((div) => {

                        const divTypeArray = div.dataset.type.split(' ');
                        console.log("div " + divTypeArray);
                        let isMatch = false;

                        buttonTypeArray.forEach((buttonType)=> {
                            divTypeArray.forEach((divType)=>{
                                if(divType==buttonType){
                                    isMatch = true;
                                }
                            });
                        });
                        
                        if (isMatch == false) {
                            div.style.display = 'none';
                        }else{
                            div.style.display = 'flex'
                        }
                    });

                    this.classList.add('active');
                });
            });
        }
});

//Home svg animation
document.addEventListener('DOMContentLoaded', function () {
    const groupsApps = document.querySelectorAll('g.app');
    const groupsServers = document.querySelectorAll('g.server');

    if(groupsApps.length > 0 && groupsServers.length > 0){

        function applyActiveClass() {
            groupsApps.forEach(group => {
                group.classList.remove('svg-active');
            });

            groupsServers.forEach(group => {
                group.classList.remove('svg-active');
            });

            const randomIndex1 = Math.floor(Math.random() * groupsApps.length);
            const selectedGroupApps = groupsApps[randomIndex1];

            const randomIndex2 = Math.floor(Math.random() * groupsServers.length);
            const selectedGroupServers = groupsServers[randomIndex2];

            selectedGroupApps.classList.add('svg-active');
            selectedGroupApps.parentNode.appendChild(selectedGroupApps);

            selectedGroupServers.classList.add('svg-active');
            selectedGroupServers.parentNode.appendChild(selectedGroupServers);
        }

        function startAnimation() {
            const minTime = 700;
            const maxTime = 2500;
            const randomTime = Math.random() * (maxTime - minTime) + minTime;

            applyActiveClass();
            
            setTimeout(startAnimation, randomTime);
        }

        startAnimation();
    }
});

// Scroll menu
document.addEventListener('DOMContentLoaded', () => {
    let lastScrollTopForMenu = 0;

    const header = document.getElementById('header');
    window.addEventListener('scroll', function() {
        let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
      
        if (currentScroll > lastScrollTopForMenu) {
          header.style.top = '-100px'; 
        } else {
          header.style.top = '0';
        }
        lastScrollTopForMenu = currentScroll <= 0 ? 0 : currentScroll;
      });
});

document.querySelectorAll('td').forEach(function(td) {
    var svg = td.querySelector('svg');
    if (svg) {
      var text = td.innerHTML.replace(svg.outerHTML, '');
      td.innerHTML = svg.outerHTML + '<p class="">' + text + '</p>';
    }
  });