<div class="max-w-6xl mx-auto px-4 py-20">
    <div class="mb-12">
        <h1 class="text-5xl font-black text-gray-900 mb-4 tracking-tight leading-none"><%= t('books.title') %></h1>
        <p class="text-xl text-gray-500 font-medium italic"><%= t('books.subtitle') %></p>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
        <% if (books && books.length> 0) { %>
            <% books.forEach(book=> { %>
                <div
                    class="bg-white rounded-3xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-shadow group flex flex-col">
                    <div class="aspect-[3/4] overflow-hidden relative shadow-md">
                        <img src="<%= book.image_url || '/img/book-placeholder.png' %>" alt="<%= book.title %>"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        <div
                            class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center p-6 text-center">
                            <p class="font-bold text-white text-lg">
                                <%= book.title %>
                            </p>
                        </div>
                    </div>
                    <div class="p-6 flex-grow flex flex-col">
                        <h3 class="text-xl font-bold text-gray-900 mb-2 line-clamp-2">
                            <%= book.title %>
                        </h3>
                        <p class="text-gray-500 text-sm mb-4 italic uppercase tracking-widest font-bold">
                            <%= book.author || 'Nabaraj Budha' %>
                        </p>
                        <p class="text-gray-400 text-xs mb-6 uppercase tracking-widest font-bold">
                            <%= book.genre || t('books.genreDefault') %>
                        </p>
                        <a href="/books/<%= book.id %>"
                            class="mt-auto block bg-blue-600 text-white text-center py-4 rounded-full font-bold hover:bg-blue-700 transition-colors shadow-lg">
                            <i class="fas fa-book-reader mr-2"></i> <%= t('books.readPdf') %>
                        </a>
                    </div>
                </div>
                <% }) %>
                    <% } else { %>
                        <div class="col-span-full py-20 text-center">
                            <p class="text-gray-500 italic"><%= t('books.empty') %></p>
                        </div>
                        <% } %>
    </div>
</div>
