{% extends "base.html" %}
{% load static %}
{% block title %}Home | Digital Bookstore - Premium PDFs{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section py-5 mb-5 overflow-hidden position-relative">
    <div class="container py-lg-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-6 fade-in-up">
                <span class="badge bg-primary-light text-primary px-3 py-2 rounded-pill fw-bold mb-3 d-inline-block">NEW ARRIVALS 2026</span>
                <h1 class="display-3 fw-800 mb-4 lh-sm">
                    Find Your Next <span class="text-primary-gradient">Great Adventure</span> In A Book.
                </h1>
                <p class="lead text-muted mb-5 pe-lg-5 fs-5">
                    Explore our curated collection of high-quality digital books. From educational resources to classic literature, we have it all.
                </p>
                <div class="search-box-wrap d-flex mb-4 border align-items-center p-2 rounded-pill shadow-sm">
                    <form action="{% url 'book_list' %}" method="GET" class="d-flex flex-grow-1">
                        <i class="fas fa-search text-muted ms-3"></i>
                        <input type="text" name="q" class="form-control border-0 bg-transparent fs-6 shadow-none" placeholder="Search by title, author or category...">
                        <button class="btn btn-primary rounded-pill px-4 ms-2 d-none d-md-block">Search</button>
                    </form>
                </div>
                <div class="d-flex gap-4 align-items-center text-muted small mt-2 px-3">
                    <span><i class="fas fa-check-circle text-primary me-2"></i>Instant Download</span>
                    <span><i class="fas fa-check-circle text-primary me-2"></i>Secure Payment</span>
                    <span><i class="fas fa-check-circle text-primary me-2"></i>Premium Quality</span>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block fade-in-up" style="animation-delay: 0.2s;">
                <div class="hero-image-wrap position-relative">
                    <!-- Illustration or Image Placeholder -->
                    <div class="floating-shape shape-1"></div>
                    <div class="floating-shape shape-2"></div>
                    <div class="glass-card shadow-lg p-3 rounded-4 bg-white">
                        <img src="https://images.pexels.com/photos/159866/books-book-pages-read-literature-159866.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Hero Books" class="img-fluid rounded-4 shadow-sm" style="min-height: 450px; object-fit: cover;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Categories Section -->
<section class="container mb-5 py-4">
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div>
            <h2 class="fw-bold mb-1">Browse Categories</h2>
            <p class="text-muted mb-0 small">Find books by your favorite genres</p>
        </div>
        <a href="{% url 'book_list' %}" class="btn btn-link text-decoration-none fw-bold text-primary hover-primary">
            View All <i class="fas fa-arrow-right ms-2 small"></i>
        </a>
    </div>
    <div class="row g-4">
        {% for category in categories %}
        <div class="col-md-3 col-6">
            <a href="{% url 'book_list' %}?category={{ category.slug }}" class="text-decoration-none">
                <div class="category-pill h-100 d-flex flex-column align-items-center justify-content-center">
                    <div class="icon-wrap bg-primary-light text-primary rounded-circle mb-3 d-flex align-items-center justify-content-center" style="width: 64px; height: 64px;">
                        {% if category.image %}
                            <img src="{{ category.image.url }}" class="img-fluid rounded-circle" style="width: 40px; height: 40px; object-fit: cover;">
                        {% else %}
                            <i class="fas fa-book-open fa-lg"></i>
                        {% endif %}
                    </div>
                    <h6 class="mb-0 text-dark fw-bold">{{ category.name }}</h6>
                    <span class="small text-muted mt-1">{{ category.books.count }} Books</span>
                </div>
            </a>
        </div>
        {% empty %}
        <!-- Default Demo Categories if none exist -->
        <div class="col-md-3 col-6">
            <div class="category-pill bg-light border-0 opacity-50">
                <i class="fas fa-graduation-cap fa-2x mb-3 text-muted"></i>
                <h6 class="mb-0 text-muted">Educational</h6>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="category-pill bg-light border-0 opacity-50">
                <i class="fas fa-feather fa-2x mb-3 text-muted"></i>
                <h6 class="mb-0 text-muted">Literature</h6>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="category-pill bg-light border-0 opacity-50">
                <i class="fas fa-history fa-2x mb-3 text-muted"></i>
                <h6 class="mb-0 text-muted">History</h6>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="category-pill bg-light border-0 opacity-50">
                <i class="fas fa-briefcase fa-2x mb-3 text-muted"></i>
                <h6 class="mb-0 text-muted">Business</h6>
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- Featured Books -->
<section class="container mb-5 py-5">
    <div class="text-center mb-5">
        <h2 class="fw-bold mb-1">Featured Collections</h2>
        <p class="text-muted mb-0">Our hand-picked selections for you</p>
    </div>
    
    <div class="row g-4 justify-content-center">
        {% for book in featured_books %}
        <div class="col-lg-3 col-md-6">
            <div class="card book-card h-100">
                <div class="position-relative">
                    {% if book.cover_image %}
                    <img src="{{ book.cover_image.url }}" class="card-img-top" alt="{{ book.title }}" style="height: 350px; object-fit: cover;">
                    {% else %}
                    <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 350px;">
                        <i class="fas fa-book fa-3x text-muted opacity-25"></i>
                    </div>
                    {% endif %}
                    <div class="position-absolute top-0 end-0 m-3">
                        <span class="badge bg-white text-dark shadow-sm rounded-pill fw-bold px-3 py-2">${{ book.price }}</span>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-primary small fw-bold mb-2 text-uppercase letter-spacing-1">{{ book.category.name }}</p>
                    <h5 class="card-title fw-bold text-dark mb-3 line-clamp-2">{{ book.title }}</h5>
                    <div class="d-grid mt-4">
                        <a href="{% url 'book_detail' book.slug %}" class="btn btn-outline-dark rounded-pill">View Details</a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <div class="bg-light p-5 rounded-4 d-inline-block">
                <i class="fas fa-books-medical fa-3x text-muted mb-4"></i>
                <p class="lead text-muted">Our shelves are being stocked. Check back soon!</p>
                <a href="/admin/core/book/add/" class="btn btn-primary rounded-pill px-4 mt-3">Add First Book</a>
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- Why Choose Us / Trust Badges -->
<section class="bg-light py-5 mt-5">
    <div class="container">
        <div class="row g-4 py-4 text-center">
            <div class="col-md-4">
                <div class="p-4">
                    <i class="fas fa-bolt fa-3x text-primary mb-4 opacity-75"></i>
                    <h5 class="fw-bold">Instant Access</h5>
                    <p class="text-muted small">Download your books immediately after payment confirmation. No waiting, no shipping.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 border-start border-end border-opacity-10">
                    <i class="fas fa-shield-halved fa-3x text-primary mb-4 opacity-75"></i>
                    <h5 class="fw-bold">Secure Payment</h5>
                    <p class="text-muted small">We support EVC Plus, Zaad, and Sahal. Your transactions are safe and verified manually.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4">
                    <i class="fas fa-headset fa-3x text-primary mb-4 opacity-75"></i>
                    <h5 class="fw-bold">Premium Support</h5>
                    <p class="text-muted small">Need help with your download? Our team is available 24/7 to assist you via WhatsApp.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- AdSense Header Slot (Styled) -->
<div class="container mt-5">
    <div class="adsense-slot rounded-4 border-0 bg-white shadow-sm p-5 text-center text-muted small">
        <i class="fas fa-ad fa-lg mb-2 d-block"></i>
        Sponsorship Space Available
    </div>
</div>

<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .letter-spacing-1 {
        letter-spacing: 1px;
    }
    .hero-image-wrap::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px solid var(--primary);
        border-radius: 2rem;
        top: 20px;
        left: 20px;
        z-index: -1;
        opacity: 0.2;
    }
    .floating-shape {
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        filter: blur(40px);
    }
    .shape-1 {
        width: 200px;
        height: 200px;
        background: rgba(13, 110, 253, 0.1);
        top: -50px;
        right: -50px;
    }
    .shape-2 {
        width: 150px;
        height: 150px;
        background: rgba(255, 159, 28, 0.05);
        bottom: -30px;
        left: -30px;
    }
</style>
{% endblock %}