{% extends 'base.html' %}

{% block title %}Thangka Arts - Authentic Tibetan Buddhist Art from Nepal{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-4">
                    Authentic Tibetan Buddhist Thangka Art
                </h1>
                <p class="lead mb-4">
                    Discover handcrafted Thangka paintings from Nepal, created with traditional techniques 
                    and spiritual devotion. Each piece tells a story of enlightenment and wisdom.
                </p>
                <div class="d-flex gap-3">
                    <a href="{% url 'products:product_list' %}" class="btn btn-light btn-lg">
                        <i class="fas fa-shopping-bag me-2"></i>Shop Now
                    </a>
                    <a href="#about" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-info-circle me-2"></i>Learn More
                    </a>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="hero-image">
                    <i class="fas fa-om" style="font-size: 15rem; opacity: 0.3;"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-3 text-center">
                <div class="feature-item">
                    <i class="fas fa-palette fa-3x text-primary mb-3"></i>
                    <h5>Handmade Quality</h5>
                    <p class="text-muted">Each Thangka is carefully crafted by skilled artisans</p>
                </div>
            </div>
            <div class="col-md-3 text-center">
                <div class="feature-item">
                    <i class="fas fa-shipping-fast fa-3x text-primary mb-3"></i>
                    <h5>Free Shipping</h5>
                    <p class="text-muted">Worldwide shipping at no extra cost</p>
                </div>
            </div>
            <div class="col-md-3 text-center">
                <div class="feature-item">
                    <i class="fas fa-shield-alt fa-3x text-primary mb-3"></i>
                    <h5>Secure Payment</h5>
                    <p class="text-muted">Safe and secure payment processing</p>
                </div>
            </div>
            <div class="col-md-3 text-center">
                <div class="feature-item">
                    <i class="fas fa-headset fa-3x text-primary mb-3"></i>
                    <h5>24/7 Support</h5>
                    <p class="text-muted">Customer support whenever you need it</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Products Section -->
<section class="py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-lg-8">
                <h2 class="fw-bold">Featured Thangkas</h2>
                <p class="text-muted">Discover our most popular and beautifully crafted Thangka paintings</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="{% url 'products:product_list' %}" class="btn btn-outline-primary">
                    View All Products <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
        </div>
        
        <div class="row g-4">
            {% for product in featured_products %}
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 product-card">
                    {% if product.images.first %}
                        <img src="{{ product.images.first.image.url }}" class="card-img-top" alt="{{ product.name }}" style="height: 200px; object-fit: cover;">
                    {% else %}
                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                            <i class="fas fa-image fa-3x text-muted"></i>
                        </div>
                    {% endif %}
                    
                    {% if product.is_on_sale %}
                        <div class="position-absolute top-0 start-0 m-2">
                            <span class="discount-badge">-{{ product.discount_percentage }}%</span>
                        </div>
                    {% endif %}
                    
                    <div class="card-body d-flex flex-column">
                        <h6 class="card-title">{{ product.name }}</h6>
                        <p class="card-text text-muted small">{{ product.category.name }}</p>
                        
                        <div class="mt-auto">
                            <div class="mb-2">
                                {% if product.is_on_sale %}
                                    <span class="product-price sale-price">${{ product.sale_price }}</span>
                                    <span class="original-price ms-2">${{ product.price }}</span>
                                {% else %}
                                    <span class="product-price">${{ product.price }}</span>
                                {% endif %}
                            </div>
                            
                            <div class="d-grid">
                                <a href="{% url 'products:product_detail' product.slug %}" class="btn btn-outline-primary btn-sm">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <i class="fas fa-palette fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No featured products available</h5>
                <p class="text-muted">Check back soon for our latest Thangka collection</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Categories Section -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Shop by Category</h2>
            <p class="text-muted">Explore different types of Thangka paintings and spiritual art</p>
        </div>
        
        <div class="row g-4">
            {% for category in categories %}
            <div class="col-md-6 col-lg-4">
                <div class="category-card">
                    {% if category.image %}
                        <img src="{{ category.image.url }}" alt="{{ category.name }}" class="img-fluid mb-3" style="height: 120px; object-fit: cover;">
                    {% else %}
                        <div class="bg-light rounded mb-3 d-flex align-items-center justify-content-center" style="height: 120px;">
                            <i class="fas fa-image fa-2x text-muted"></i>
                        </div>
                    {% endif %}
                    
                    <h5 class="fw-bold mb-2">{{ category.name }}</h5>
                    <p class="text-muted small mb-3">{{ category.description|truncatewords:15 }}</p>
                    
                    <a href="{% url 'products:category_list' category.slug %}" class="btn btn-primary">
                        Explore {{ category.name }}
                    </a>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <i class="fas fa-th-large fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No categories available</h5>
                <p class="text-muted">Categories will be added soon</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2 class="fw-bold mb-4">About Thangka Arts</h2>
                <p class="lead mb-4">
                    We are dedicated to preserving and sharing the ancient art of Thangka painting, 
                    bringing authentic Tibetan Buddhist art from Nepal to the world.
                </p>
                <p class="mb-4">
                    Each Thangka is meticulously handcrafted by skilled artisans using traditional 
                    techniques passed down through generations. Our collection includes Buddha Thangkas, 
                    Mandalas, Tara paintings, and more, each carrying deep spiritual significance.
                </p>
                <div class="row g-3">
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            <span>Authentic Materials</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            <span>Traditional Techniques</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            <span>Spiritual Significance</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            <span>Worldwide Shipping</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="about-image">
                    <i class="fas fa-om" style="font-size: 20rem; opacity: 0.1;"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Get in Touch</h2>
            <p class="text-muted">Have questions about our Thangka collection? We're here to help!</p>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="row g-4">
                    <div class="col-md-4 text-center">
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt fa-2x text-primary mb-3"></i>
                            <h6>Location</h6>
                            <p class="text-muted small">Kathmandu, Nepal</p>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="contact-item">
                            <i class="fas fa-phone fa-2x text-primary mb-3"></i>
                            <h6>Phone</h6>
                            <p class="text-muted small">+977 984-0207027</p>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="contact-item">
                            <i class="fas fa-envelope fa-2x text-primary mb-3"></i>
                            <h6>Email</h6>
                            <p class="text-muted small">info@thangkaarts.com</p>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-4">
                    <a href="mailto:info@thangkaarts.com" class="btn btn-primary">
                        <i class="fas fa-envelope me-2"></i>Send Message
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}