"use strict";

// Load and display blog posts from JSON
async function loadBlogPosts() {
  try {
    const response = await fetch('./posts.json');
    const posts = await response.json();
    
    const blogsContainer = document.getElementById('blogsContainer');
    
    if (posts.length === 0) {
      blogsContainer.innerHTML = '<div class="no-posts"><p>No blog posts yet.</p></div>';
      return;
    }
    
    // Create HTML for each post
    const postsHTML = posts.map(post => `
      <article class="blog-post" id="${post.slug}">
        <h2 class="blog-post-title">${post.title}</h2>
        <div class="blog-post-date">${new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>
        <div class="blog-post-content">
          ${post.content}
        </div>
        <div class="blog-post-image">
          <img src="${post.image}" alt="${post.title}" />
        </div>
      </article>
    `).join('');
    
    blogsContainer.innerHTML = postsHTML;
  } catch (error) {
    console.error('Error loading blog posts:', error);
    document.getElementById('blogsContainer').innerHTML = '<div class="error"><p>Error loading blog posts.</p></div>';
  }
}

// Load blog posts when page is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', loadBlogPosts);
} else {
  loadBlogPosts();
}

// Handle hash-based navigation to specific posts
window.addEventListener('hashchange', () => {
  const postId = window.location.hash.slice(1);
  if (postId) {
    const element = document.getElementById(postId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
});