{% extends "base.html" %}

{% block title %}Ethio-Gebeya | Modern Marketplace{% endblock %}

{% block content %}
<header class="hero text-white py-5">
  <div class="container text-center">
    <h1 class="display-3 mb-3">Welcome to Ethio-Gebeya</h1>
    <p class="lead mb-4">Discover the best quality goods in one place.</p>
    <a href="#products" class="btn btn-lg px-4" style="background-color: var(--accent); color: white;">Start Shopping</a>
  </div>
</header>

<section id="products" class="container py-5">
    <h2 class="text-center mb-5 text-dark">Featured Products</h2>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for product in products %}
        <div class="col">
            <article class="product-card h-100 shadow-sm border-0">
                <div class="card-body">
                    <h5 class="card-title">{{ product.name }}</h5>
                    <p class="card-text text-muted">{{ product.description|truncatewords:15 }}</p>
                    <p class="h5 fw-bold text-primary">ETB {{ product.price }}</p>
                    <a href="#" class="btn btn-outline-primary mt-3">View Details</a>
                </div>
            </article>
        </div>
        {% empty %}
        <p class="text-center w-100">No products available yet.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}