{% extends "base.html" %}
{% load static %}

{% block content %}
<!-- Hero Section -->
<header class="hero-section text-center">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-8">
                <h1 class="mb-4">Selamat Datang di Pasar UMKM Desa Pemagarsari</h1>
                <p class="lead mb-5 opacity-90 mx-auto max-width-700">Pasar digital untuk produk unggulan lokal dari desa kita sendiri. Berdayakan ekonomi lokal melalui kemudahan transaksi via WhatsApp.</p>
                <div class="d-flex flex-column flex-sm-row justify-content-center gap-3 px-4 px-sm-0">
                    <a href="{% url 'product_list' %}" class="btn btn-accent btn-lg shadow">
                        <i class="fas fa-shopping-bag me-2"></i> Jelajahi Produk
                    </a>
                    <a href="#kategori" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-list-ul me-2"></i> Lihat Kategori
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Image Banner Section -->
<section class="banner-promo py-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="banner-wrapper rounded-4 overflow-hidden shadow-lg">
                    <img src="{% static 'images/banner-umkm.png' %}" class="img-fluid w-100" alt="Banner Pasar UMKM Desa Pemagarsari">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Categories Section -->
<section id="kategori" class="py-5 bg-white">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title">Kategori Pilihan</h2>
        </div>
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-3 g-md-4 justify-content-center">
            {% if categories %}
                {% for category in categories %}
                <div class="col">
                    <a href="{% url 'product_list_by_category' category.slug %}" class="category-pill">
                        <i class="fas {{ category.icon|default:'fa-tag' }} text-primary"></i>
                        <span>{{ category.name }}</span>
                    </a>
                </div>
                {% endfor %}
            {% else %}
                <div class="col">
                    <a href="#" class="category-pill">
                        <i class="fas fa-utensils text-primary"></i>
                        <span>Makanan</span>
                    </a>
                </div>
                <div class="col">
                    <a href="#" class="category-pill">
                        <i class="fas fa-coffee text-primary"></i>
                        <span>Minuman</span>
                    </a>
                </div>
                <div class="col">
                    <a href="#" class="category-pill">
                        <i class="fas fa-palette text-primary"></i>
                        <span>Kerajinan</span>
                    </a>
                </div>
                <div class="col">
                    <a href="#" class="category-pill">
                        <i class="fas fa-tshirt text-primary"></i>
                        <span>Pakaian</span>
                    </a>
                </div>
                <div class="col">
                    <a href="#" class="category-pill">
                        <i class="fas fa-seedling text-primary"></i>
                        <span>Pertanian</span>
                    </a>
                </div>
                <div class="col">
                    <a href="#" class="category-pill">
                        <i class="fas fa-concierge-bell text-primary"></i>
                        <span>Jasa</span>
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- Featured Products -->
<section class="py-5">
    <div class="container">
        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center align-items-sm-end mb-5 text-center text-sm-start gap-3">
            <div>
                <h2 class="mb-1">Produk Terbaru</h2>
                <p class="text-muted mb-0">Temukan yang baru dari UMKM Desa Pemagarsari</p>
            </div>
            <a href="{% url 'product_list' %}" class="btn btn-link text-primary fw-bold text-decoration-none p-0">
                Lihat Semua <i class="fas fa-arrow-right ms-1"></i>
            </a>
        </div>
        <div class="row g-3 g-md-4">
            {% if featured_products %}
                {% for product in featured_products %}
                <div class="col-6 col-lg-3">
                    <div class="card h-100">
                        <div class="position-relative">
                            {% if product.image %}
                                <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}" style="height: 160px; @media(min-width: 768px){height: 200px}; object-fit: cover;">
                            {% else %}
                                <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="height: 160px; @media(min-width: 768px){height: 200px};">
                                    <i class="fas fa-image fa-2x text-muted opacity-50"></i>
                                </div>
                            {% endif %}
                            <span class="badge bg-white text-primary position-absolute top-0 end-0 m-2 shadow-sm border-0">{{ product.category.name }}</span>
                        </div>
                        <div class="card-body p-3 p-md-4 d-flex flex-column">
                            <h5 class="card-title mb-1">
                                <a href="{% url 'product_detail' product.slug %}" class="text-decoration-none text-dark">{{ product.name }}</a>
                            </h5>
                            <p class="small text-muted mb-3 d-none d-md-block"><i class="fas fa-store me-1"></i> {{ product.vendor.name }}</p>
                            <div class="mt-auto">
                                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2">
                                    <span class="product-price">Rp {{ product.price|floatformat:0 }}</span>
                                    <a href="{{ product.get_whatsapp_url }}" target="_blank" class="btn btn-sm wa-btn shadow-sm">
                                        <i class="fab fa-whatsapp me-1"></i> Beli
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <!-- Placeholder for empty state -->
                {% for i in "1234" %}
                <div class="col-6 col-lg-3">
                    <div class="card h-100 shadow-sm opacity-50">
                        <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="height: 160px; @media(min-width: 768px){height: 200px};">
                            <i class="fas fa-box-open fa-2x text-muted opacity-50"></i>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">Produk Contoh {{ i }}</h5>
                            <p class="product-price">Rp XX.XXX</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
</section>

<!-- Call to Action for Vendors -->
<section class="py-5 bg-primary text-white text-center">
    <div class="container py-4">
        <h2 class="text-white mb-3">Punya Usaha di Pemagarsari?</h2>
        <p class="lead mb-4 opacity-90 mx-auto max-width-700">Daftarkan usaha Anda sekarang dan jangkau lebih banyak pembeli secara online.</p>
        <a href="/admin/" class="btn btn-accent btn-lg px-5 shadow-sm">
            <i class="fas fa-user-plus me-2"></i> Daftar Sebagai Vendor
        </a>
    </div>
</section>
{% endblock %}