document.addEventListener('DOMContentLoaded', function () {
    let lastScrollTop = 0;
const topbar = document.getElementById('topbar');

window.addEventListener('scroll', function() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
        topbar.style.transform = 'translateY(-100%)';
        topbar.classList.add('transparent');
    } else {
        topbar.style.transform = 'translateY(0)';
        if (scrollTop === 0) {
            topbar.classList.remove('transparent');
        }
    }
    lastScrollTop = scrollTop;
});

    // Function to load books from JSON file
    async function loadBooks() {
        try {
            const response = await fetch('json/storygraph_list.json');
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            const books = await response.json();

            const currentlyReading = books.filter(book => book.status === 'Currently reading');
            const readRecently = books.filter(book => book.status === 'Read recently');
            const toRead = books.filter(book => book.status === 'To read');

            displayBooks(currentlyReading, 'currently-reading');
            displayBooks(readRecently, 'read-recently');
            displayBooks(toRead, 'to-read');
        } catch (error) {
            console.error('Error loading books:', error);
        }
    }

    // Function to display books in the specified section
    function displayBooks(books, sectionId) {
        const section = document.getElementById(sectionId);
        if (section) {
            section.innerHTML = books.map(book => `
                <div class="book-item">
                    <img src="${book.coverImage}" alt="${book.title} by ${book.author}">
                    <h3>${book.title}</h3>
                    <p class="author">${book.author}</p>
                    <div class="details">
                        <p>${book.pages}</p>
                        ${book.format === 'Audiobook' ? `<p class="audiobook">${book.format}</p>` : ''}
                        <p>${book.publicationDate}</p>
                    </div>
                    <div class="genres">
                        ${book.genres.slice(0, 3).map(genre => `<span class="genre">${genre}</span>`).join('')}
                    </div>
                </div>
            `).join('');
        } else {
            console.error(`Section with ID '${sectionId}' not found.`);
        }
    }

    // Load books on page load
    loadBooks();
});