// Modern SSL Page Redesign Scripts

function displayDiv(id) {
    // Hide all tab content grids
    const tables = document.querySelectorAll('.custom-table');
    tables.forEach(table => {
        table.classList.remove('active-table');
    });

    // Remove active state from all buttons
    const buttons = document.querySelectorAll('.tab-btn');
    buttons.forEach(btn => {
        btn.classList.remove('active');
    });

    // Show selected grid
    const targetTable = document.getElementById(id);
    if (targetTable) {
        targetTable.classList.add('active-table');
    }

    // Activate corresponding button
    const targetBtn = document.getElementById('btn-' + id);
    if (targetBtn) {
        targetBtn.classList.add('active');
    }
}

// Initialize on Document Ready
document.addEventListener('DOMContentLoaded', function () {
    // Smooth scrolling for CTA buttons
    const scrollBtns = document.querySelectorAll('[data-click-type="scroll-to"], [href^="#"]');
    
    scrollBtns.forEach(btn => {
        btn.addEventListener('click', function (e) {
            const targetSelector = this.getAttribute('data-scroll') || this.getAttribute('href');
            if (targetSelector && targetSelector !== '#') {
                e.preventDefault();
                const targetEl = document.querySelector(targetSelector);
                if (targetEl) {
                    targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }
        });
    });

    // Add subtle entrance animations to cards on hover or scroll if needed
    console.log("CloudMate SSL Redesign Loaded Successfully.");
});
