// 主要JavaScript功能

// --- 动态调整英雄区上内边距 ---
function adjustHeroAreaPadding() {
    const stickyNav = document.getElementById('stickyNavWrapper');
    const heroArea = document.getElementById('siteHeroArea');
    if (stickyNav && heroArea) {
        const navHeight = stickyNav.offsetHeight;
        heroArea.style.paddingTop = navHeight + 'px';
    }
}

// --- 新增：处理导航栏滚动时的背景变化 ---
function handleStickyNavScroll() {
    const stickyNav = document.getElementById('stickyNavWrapper');
    const scrollThreshold = 10; // 滚动多少像素后改变背景 (可调整)

    if (stickyNav) {
        if (window.scrollY > scrollThreshold) {
            stickyNav.classList.add('scrolled-nav');
        } else {
            stickyNav.classList.remove('scrolled-nav');
        }
    }
}

// --- 博文卡片生成逻辑 ---
function createPostCard(post) {
    const card = document.createElement('article');
    card.className = 'post-card';
    let imageOverlayHTML = '';
    if (post.imageTitleOverlay) {
        imageOverlayHTML += `<div class="image-title-overlay">${post.imageTitleOverlay}</div>`;
    }
    if (post.imageSubtitleOverlay) {
        imageOverlayHTML += `<div class="image-subtitle-overlay">${post.imageSubtitleOverlay}</div>`;
    }
    card.innerHTML = `
        <div class="post-card-image" style="background-image: url('${post.imageUrl}');">
            ${imageOverlayHTML}
            ${post.hasPlayIcon ? '<span class="play-icon">►</span>' : ''}
            ${post.watermark ? `<span class="polytopia-watermark">${post.watermark}</span>` : ''}
        </div>
        <div class="post-card-content">
            <h2>${post.title}</h2>
            <span class="date">${post.date}</span>
            <p>${post.description}</p>
            <a href="${post.linkUrl}" class="go-there-link">${post.linkText}</a>
        </div>
    `;
    return card;
}

// --- 显示博文 ---
function displayPosts() {
    const postsGrid = document.getElementById('postsGrid');
    if (postsGrid) {
        // 从JSON文件加载博客数据
        fetch('./js/blog-data.json')
            .then(response => response.json())
            .then(blogPostsData => {
                blogPostsData.forEach(post => {
                    const postCard = createPostCard(post);
                    postsGrid.appendChild(postCard);
                });
            })
            .catch(error => {
                console.error('Error loading blog data:', error);
            });
    }
}

// --- 初始化函数 ---
function initializeApp() {
    // 调整英雄区域内边距
    adjustHeroAreaPadding();
    
    // 显示博文
    displayPosts();

    // 新增：处理导航栏初始滚动状态
    handleStickyNavScroll();
}

// --- 事件监听器 ---
// 页面加载时和窗口大小改变时调整
window.addEventListener('DOMContentLoaded', initializeApp);
window.addEventListener('resize', adjustHeroAreaPadding);
// 新增：监听滚动事件以改变导航栏背景
window.addEventListener('scroll', handleStickyNavScroll);