document.addEventListener('DOMContentLoaded', function() {
    const siteDataElement = document.getElementById('site-data');
    if (!siteDataElement) return;

    let siteData = [];
    try {
        siteData = JSON.parse(siteDataElement.textContent);
    } catch (e) {
        console.error("Failed to parse site data", e);
    }

    const contentArea = document.getElementById('content-area');
    const navLinks = document.querySelectorAll('.nav-link');
    const backToTopBtn = document.getElementById('backToTop');
    const sidebarMenu = document.getElementById('sidebarMenu');

    // Handle Content Switching
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Update Active Link
            navLinks.forEach(l => l.classList.remove('active'));
            this.classList.add('active');

            const sectionKey = this.getAttribute('data-section');
            const data = siteData.find(item => item.section_key === sectionKey);

            if (data) {
                renderContent(data);
                
                // On mobile, scroll to content after selection and close sidebar
                if (window.innerWidth < 768) {
                    contentArea.scrollIntoView({ behavior: 'smooth' });
                    // Close bootstrap collapse if open
                    const bsCollapse = bootstrap.Collapse.getInstance(sidebarMenu);
                    if (bsCollapse) {
                        bsCollapse.hide();
                    }
                }
            }
        });
    });

    function renderContent(data) {
        // We use innerHTML directly because content is pre-formatted in setup_db.php
        contentArea.innerHTML = `
            <div class="d-flex align-items-center mb-4 border-bottom pb-3">
                <i class="bi bi-star-fill text-warning me-3 fs-3"></i>
                <h2 class="fw-black mb-0" style="color: #B71C1C;">${data.title}</h2>
            </div>
            <div class="content-body animate-fade-in">
                ${data.content}
            </div>
            <div class="mt-5 pt-4 border-top d-flex justify-content-between align-items-center text-muted small">
                <span><i class="bi bi-shield-check me-1"></i> 财神组内部资料</span>
                <span>更新时间: ${data.updated_at || '2026-01-30'}</span>
            </div>
        `;
    }

    // Back to Top Button
    window.addEventListener('scroll', function() {
        if (window.pageYOffset > 300) {
            backToTopBtn.classList.remove('d-none');
        } else {
            backToTopBtn.classList.add('d-none');
        }
    });

    backToTopBtn.addEventListener('click', function() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    
    // Auto-select Day 1 on load if available
    const firstLink = document.querySelector('.nav-link[data-section="day1"]');
    if (firstLink && siteData.length > 0) {
        firstLink.click();
    }
});