// Fetch books from Open Library API
document.addEventListener('DOMContentLoaded', async function() {
    try {
        const response = await fetch('https://openlibrary.org/subjects/fiction.json?limit=8');
        const data = await response.json();
        displayBooks(data.works);
    } catch (error) {
        console.error('Error fetching books:', error);
        document.getElementById('featured-books').innerHTML = 
            '<div class="text-center text-parchment-700">Could not load books. Please try again later.</div>';
    }
});

function displayBooks(books) {
    const container = document.getElementById('featured-books');
    
    if (!books || books.length === 0) {
        container.innerHTML = '<div class="text-center text-parchment-700">No books found.</div>';
        return;
    }
    
    container.innerHTML = books.map(book => `
        <div class="book-card bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md">
            <div class="h-48 bg-parchment-100 flex items-center justify-center">
                ${book.cover_id ? 
                    `<img src="https://covers.openlibrary.org/b/id/${book.cover_id}-M.jpg" alt="${book.title}" class="h-full object-cover">` : 
                    `<div class="text-parchment-400 p-4 text-center"><i data-feather="book" class="w-12 h-12 mx-auto"></i><p>No cover available</p></div>`
                }
            </div>
            <div class="p-4">
                <h3 class="font-bold text-lg mb-1 line-clamp-1">${book.title}</h3>
                <p class="text-parchment-600 text-sm mb-2 line-clamp-1">${book.authors ? book.authors.map(a => a.name).join(', ') : 'Unknown Author'}</p>
                <div class="flex justify-between items-center">
                    <span class="text-xs bg-parchment-100 text-parchment-700 px-2 py-1 rounded">${book.subject ? book.subject[0] : 'Fiction'}</span>
                    <a href="https://openlibrary.org${book.key}" target="_blank" class="text-bookworm-500 hover:text-bookworm-700 text-sm font-medium flex items-center">
                        Details <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
                    </a>
                </div>
            </div>
        </div>
    `).join('');
    
    feather.replace();
}

// Mobile menu toggle (handled in navbar component)