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

{% block title %}{% trans "Ethio-Marketplace | Home" %}{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section text-center">
  <div class="container">
    <h1 class="display-4 fw-bold mb-3">{% trans "Welcome to Ethio-Marketplace" %}</h1>
    <p class="lead mb-4">{% trans "Discover amazing products from local vendors across Ethiopia." %}</p>
    <div class="d-flex justify-content-center">
      <a href="{% url 'product_list' %}" class="btn btn-primary btn-lg px-4 me-md-2">{% trans "Shop Now" %}</a>
      <a href="{% url 'vendor_register' %}" class="btn btn-outline-secondary btn-lg px-4">{% trans "Become a Seller" %}</a>
    </div>
  </div>
</section>

<!-- Categories Section -->
<section class="py-5">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="fw-bold">{% trans "Shop by Category" %}</h2>
      <a href="#" class="text-decoration-none">{% trans "View All" %}</a>
    </div>
    <div class="row g-4">
      {% for category in categories %}
      <div class="col-6 col-md-4 col-lg-2">
        <a href="{% url 'category_products' category.slug %}" class="text-decoration-none text-dark">
          <div class="card h-100 text-center border-0 shadow-sm transition-hover">
            <div class="card-body">
              {% if category.image %}
                <img src="{{ category.image.url }}" alt="{{ category.name }}" class="img-fluid mb-2" style="height: 60px; object-fit: contain;">
              {% else %}
                <div class="bg-light rounded-circle mx-auto mb-2 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                  <i class="bi bi-tag fs-3 text-primary"></i>
                </div>
              {% endif %}
              <h6 class="card-title mb-0">{{ category.name }}</h6>
            </div>
          </div>
        </a>
      </div>
      {% empty %}
      <p class="text-center text-muted">{% trans "No categories found." %}</p>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Featured Products Section -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="fw-bold">{% trans "Featured Products" %}</h2>
      <a href="{% url 'product_list' %}" class="text-decoration-none">{% trans "View All" %}</a>
    </div>
    <div class="row g-4">
      {% for product in featured_products %}
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card h-100 border-0 shadow-sm">
          {% if product.image %}
            <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}" style="height: 200px; object-fit: cover;">
          {% else %}
            <div class="card-img-top bg-secondary d-flex align-items-center justify-content-center" style="height: 200px;">
              <span class="text-white">{% trans "No Image" %}</span>
            </div>
          {% endif %}
          <div class="card-body">
            <p class="text-muted small mb-1">{{ product.category.name }}</p>
            <h5 class="card-title h6 mb-2">
              <a href="{% url 'product_detail' product.slug %}" class="text-decoration-none text-dark">
                {{ product.name }}
              </a>
            </h5>
            <p class="fw-bold text-primary mb-3">{{ product.price }} ETB</p>
            <a href="{% url 'cart_add' product.id %}" class="btn btn-outline-primary btn-sm w-100">
              {% trans "Add to Cart" %}
            </a>
          </div>
        </div>
      </div>
      {% empty %}
      <div class="col-12 text-center py-5">
        <p class="text-muted">{% trans "No featured products available." %}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<style>
  .transition-hover:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
  }
</style>
{% endblock %}
