const reviews = [
            {
                name: "Udayan",
                initials: "UD",
                date: "31 Mar, 2024",
                rating: 5.0,
                text: "Using his services since last year and to be honest no issues at all. Cloudmate has always been my go solution for all projects I have done. Recommended to every reseller."
            },
            {
                name: "Vyom Cloud",
                initials: "VC",
                date: "25 Nov, 2023",
                rating: 5.0,
                text: "I got to know about cloudmate by one of my friend who is using cloudmate for 3 years. When i started using cloudmate servers for my business. I really got very impressed with their services. Now i'm starts feeling awesome."
            },
            {
                name: "Shashank Kumar",
                initials: "SK",
                date: "03 Nov, 2023",
                rating: 5.0,
                text: "I bought a vps from cloudmate. After performing test on hardware. This vps works above my expectations. Website load under a second + support is very fast and supportive. Totally recommend to all resellers."
            },
            {
                name: "K. Rahul",
                initials: "KR",
                date: "05 Aug, 2022",
                rating: 5.0,
                text: "A hacker hacked my server and made it unbootable. Their team fixed the whole operating system and recovered all the data when every else company declined. Really recommended for server recovery."
            },
            {
                name: "CFC Jaipur",
                initials: "CJ",
                date: "21 Nov, 2021",
                rating: 5.0,
                text: "Totally automated and quick setup. I paid and instantly got the service, thats why I liked in cloudmate. Also, developer was preety fast in making the website live."
            },
            {
                name: "Vimal Anand",
                initials: "VA",
                date: "30 Apr, 2024",
                rating: 5.0,
                text: "Best Experience as a customer since 4 year no problem in service and troubleshooting. 10 Star"
            }
        ];

        let currentIndex = 1;
        const total = reviews.length;
        const arcSlider = document.getElementById('arc-slider');
        const reviewTextContent = document.getElementById('review-text-content');

        // Render avatars
        reviews.forEach((review, idx) => {
            const item = document.createElement('div');
            item.className = 'carousel-item item-hidden-bottom';
            item.dataset.index = idx;

            item.innerHTML = `
                <div class="avatar">${review.initials}</div>
                <div class="author-info">
                    <h4>${review.name}</h4>
                    <div class="meta-row">
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="#2563eb"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.869 1.4-8.168L.132 9.21l8.2-1.192L12 .587z"/></svg>
                        <span class="rating-text"><strong>${review.rating.toFixed(1)}</strong> on ${review.date}</span>
                        <span style="color: #cbd5e1; margin: 0 4px;">|</span>
                        <span class="location-badge">
                            <div style="width: 16px; height: 11px; display: inline-flex; flex-direction: column; margin-right: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);">
                                <div style="background-color: #ff9933; flex: 1;"></div>
                                <div style="background-color: #ffffff; flex: 1; display: flex; align-items: center; justify-content: center;"><div style="width: 3px; height: 3px; border-radius: 50%; background-color: #000080;"></div></div>
                                <div style="background-color: #138808; flex: 1;"></div>
                            </div>
                            IN
                        </span>
                    </div>
                </div>
            `;

            item.addEventListener('click', () => {
                const activeIdx = currentIndex;
                if (idx === (activeIdx - 1 + total) % total) move(-1);
                else if (idx === (activeIdx + 1) % total) move(1);
            });
            if (arcSlider) arcSlider.appendChild(item);
        });

        const items = document.querySelectorAll('.carousel-item');

        function updateClasses() {
            items.forEach((item, idx) => {
                let offset = idx - currentIndex;
                if (offset < -Math.floor(total / 2)) offset += total;
                if (offset > Math.floor(total / 2)) offset -= total;

                item.className = 'carousel-item'; // reset

                if (offset === 0) item.classList.add('item-active');
                else if (offset === -1) item.classList.add('item-top');
                else if (offset === 1) item.classList.add('item-bottom');
                else if (offset < -1) item.classList.add('item-hidden-top');
                else if (offset > 1) item.classList.add('item-hidden-bottom');
            });

            // Update text
            const activeReview = reviews[currentIndex];

            const wrapper = document.querySelector('.review-text-wrapper');
            if(wrapper) wrapper.style.opacity = 0;
            if(wrapper) wrapper.style.transform = 'translateY(10px)';

            setTimeout(() => {
                if (reviewTextContent) reviewTextContent.innerHTML = activeReview.text;
                if(wrapper) wrapper.style.opacity = 1;
                if(wrapper) wrapper.style.transform = 'translateY(0)';
            }, 300);
        }

        function move(step) {
            currentIndex = (currentIndex + step + total) % total;
            updateClasses();
        }

        let autoSlide = setInterval(() => move(1), 2500);

        (document.querySelector('.reviews-content') || document.querySelector('.reviews-content-row') || document.body).addEventListener('mouseenter', () => clearInterval(autoSlide));
        (document.querySelector('.reviews-content') || document.querySelector('.reviews-content-row') || document.body).addEventListener('mouseleave', () => autoSlide = setInterval(() => move(1), 2500));

        // Initial update
        updateClasses();

// Toggle FAQ Accordion
        document.querySelectorAll('.faq-card-header').forEach(header => {
            header.addEventListener('click', () => {
                const card = header.parentElement;
                const body = card.querySelector('.faq-card-body');
                const icon = card.querySelector('.chevron-icon');
                
                // If it's already active, just close it
                if (card.classList.contains('active')) {
                    card.classList.remove('active');
                    body.style.display = 'none';
                    icon.style.transform = 'rotate(0deg)';
                } else {
                    // Close other open cards (Accordion behavior)
                    document.querySelectorAll('.faq-card.active').forEach(openCard => {
                        openCard.classList.remove('active');
                        openCard.querySelector('.faq-card-body').style.display = 'none';
                        const openIcon = openCard.querySelector('.chevron-icon');
                        openIcon.style.transform = 'rotate(0deg)';
                    });
                    
                    card.classList.add('active');
                    body.style.display = 'block';
                    icon.style.transform = 'rotate(180deg)';
                }
            });
        });
        
        // Category switching
        const panes = {
            'General inquiries': 'pane-general',
            'Shared Hosting': 'pane-shared',
            'VPS & Dedicated Server': 'pane-vps',
            'Domains': 'pane-domains'
        };

        document.querySelectorAll('.category-item').forEach(item => {
            item.addEventListener('click', () => {
                // Update active tab
                document.querySelectorAll('.category-item').forEach(c => c.classList.remove('active'));
                item.classList.add('active');
                
                // Hide all panes
                document.querySelectorAll('.faq-list').forEach(pane => {
                    pane.style.display = 'none';
                    pane.classList.remove('active');
                });
                
                // Show target pane
                const targetId = panes[item.innerText.trim()];
                if (targetId) {
                    const targetPane = document.getElementById(targetId);
                    if (targetPane) {
                        targetPane.style.display = 'flex';
                        targetPane.classList.add('active');
                    }
                }
            });
        });

document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('.filter-nav .tab');
    const rows = document.querySelectorAll('.compare-table tbody tr');
    if (tabs) tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            const filter = tab.getAttribute('data-filter');
            rows.forEach(row => {
                if (row.getAttribute('data-filter') === filter) {
                    row.classList.remove('tr-hide');
                } else {
                    row.classList.add('tr-hide');
                }
            });
        });
    });
});

const navToggle = document.querySelector('.nav-toggle');
        const wrapper = document.querySelector('.wrapper-menu-items-outer');
        const siteHeader = document.querySelector('.site-header');

        if (navToggle) navToggle.addEventListener('click', () => {
            navToggle.classList.toggle('active');
            wrapper.classList.toggle('open');
            siteHeader.classList.toggle('menu-open');
        });

        // Function for Mega Menu Dropdowns (mobile accordion)
        function toggleDD(id) {
            if (window.innerWidth > 1024) return; // Only run on mobile/tablet where hover is disabled

            const allMenus = document.querySelectorAll('.dd-menu');
            const allBtns = document.querySelectorAll('.dd-toggle');

            const targetMenu = document.getElementById('dd-menu-' + id);
            const targetBtn = document.getElementById('dd-btn-' + id);

            // If the clicked menu is already open, close it
            if (targetMenu.classList.contains('open')) {
                targetMenu.classList.remove('open');
                targetBtn.classList.remove('active');
            } else {
                // Otherwise, close all and open the targeted one
                allMenus.forEach(m => m.classList.remove('open'));
                allBtns.forEach(b => b.classList.remove('active'));

                targetMenu.classList.add('open');
                targetBtn.classList.add('active');
            }
        }
        

document.addEventListener("DOMContentLoaded", () => {
            const openBtn = document.getElementById("openChatBtn");
            const closeBtn = document.getElementById("closeChatBtn");
            const chatPopup = document.getElementById("chatPopup");

            if(openBtn) openBtn.addEventListener("click", (e) => {
                e.preventDefault();
                chatPopup.classList.add("active");
            });

            if(closeBtn) closeBtn.addEventListener("click", () => {
                chatPopup.classList.remove("active");
            });
            
            // Prevent form submit from refreshing page
            if(document.getElementById("chatForm")) document.getElementById("chatForm").addEventListener("submit", (e) => {
                e.preventDefault();
                alert("Connecting you to an agent...");
            });
        });