{% extends 'base.html' %}
{% load static currency_filters  i18n %}

{% block extra_head %}
  <style>
    .home-hero {
      min-height: 540px;
      border-radius: 30px;
      overflow: hidden;
      position: relative;
      background: linear-gradient(180deg, rgba(13, 110, 253, 0.82), rgba(13, 110, 253, 0.82)), url({% static 'image/WhatsApp Image 2026-04-13 at 16.22.23.jpeg' %}) center/cover no-repeat;
    }

    .home-hero .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(13, 110, 253, 0.55), rgba(13, 110, 253, 0.22));
    }

    .home-hero-content {
      position: relative;
      z-index: 1;
    }

    .home-hero .badge-glow {
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.22);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .category-card,
    .trust-card,
    .featured-card {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .category-card:hover,
    .trust-card:hover,
    .featured-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    }

    .featured-card img {
      max-height: 240px;
      object-fit: cover;
    }

    .hero-stat {
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
    }

    .benefit-icon {
      width: 56px;
      height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      background: rgba(13, 110, 253, 0.1);
      color: #0d6efd;
      font-size: 1.2rem;
    }

    .category-card .category-icon {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      background: #f8f9fa;
      color: #0d6efd;
    }

    .page-hero-list {
      list-style: none;
      padding-left: 0;
    }

    .page-hero-list li::before {
      content: '\2022';
      color: #0d6efd;
      display: inline-block;
      width: 1em;
      margin-left: -1em;
    }

    .hero-cta-group .btn {
      min-width: 160px;
    }

    @media (max-width: 767px) {
      .home-hero {
        min-height: 420px;
      }
    }
  </style>
{% endblock extra_head %}

{% block content %}

  <div class="container py-5">
    <div class="row align-items-center gx-5 mb-5">
      <div class="col-lg-6">

        <span class="badge bg-white text-primary badge-glow mb-3">{% trans "Global marketplace for modern shopping" %}</span>
        <h1 class="display-5 fw-bold text-dark mb-4">{% trans "Discover premium products, trusted brands, and fast delivery worldwide." %}</h1>
        <p class="lead text-muted mb-4">{% trans "BanshiX brings electronics, vehicles, appliances and lifestyle essentials together in one polished storefront designed for effortless shopping." %}</p>

        <div class="d-flex flex-wrap gap-3 hero-cta-group mb-4">
          <a href="{% url 'shop:product_list' %}" class="btn btn-primary btn-lg">{% trans "Shop Now" %}</a>
          <a href="#featured-products" class="btn btn-outline-secondary btn-lg">{% trans "See Deals" %}</a>
        </div>

        <div class="row g-3">
          <div class="col-sm-6">
            <div class="hero-stat p-4">
              <h2 class="h4 mb-1 fw-bold">{{ satisfaction_rate }}%</h2>
              <p class="mb-0 text-muted">{% trans "Customer satisfaction" %}</p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="hero-stat p-4">
              <h2 class="h4 mb-1 fw-bold">50k+</h2>
              <p class="mb-0 text-muted">{% trans "Products available" %}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="home-hero shadow-lg">
          <div class="hero-overlay"></div>
          <div class="position-absolute top-50 start-50 translate-middle text-white text-center px-4 home-hero-content">
            <h2 class="display-6 fw-bold mb-3">{% trans "Shop electronics, autos, home essentials and more." %}</h2>
            <p class="mb-4 text-light">{% trans "Fast shipping, secure checkout, and curated offers for every budget." %}</p>
            <div class="d-flex justify-content-center gap-3 flex-wrap">
              <span class="badge bg-white text-primary py-2 px-3 rounded-pill">{% trans "Premium quality" %}</span>
              <span class="badge bg-white text-primary py-2 px-3 rounded-pill">{% trans "Worldwide delivery" %}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <section class="mb-5">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
          <h2 class="h3 fw-bold mb-1">{% trans "Popular Categories" %}</h2>
          <p class="text-muted mb-0">{% trans "Browse top collections across our store." %}</p>
        </div>
        <a href="{% url 'shop:product_list' %}" class="link-primary">{% trans "Browse all products" %}</a>
      </div>

      <div class="row g-4 sidebar">
        {% for category in categories %}
          <div class="col-md-6 col-xl-3">
            <a href="{% url 'shop:product_list' %}?category={{ category.slug }}" class="text-decoration-none text-dark">
              <div class="category-card border rounded-4 p-4 h-100 d-flex flex-column justify-content-between shadow-sm bg-white">
                <div>
                  <div class="category-icon mb-3"><i class="fas fa-folder-open"></i></div>
                  <h5 class="mb-2">{% blocktrans %}{{ category.name }} {% endblocktrans %}</h5>
                  <p class="text-muted mb-0">{% blocktrans %} Products : {{ category.products.count }}{% endblocktrans %}</p>
                </div>
                <div class="mt-4 text-primary fw-bold">{% trans "View collection" %} <i class="fas fa-arrow-right ms-2"></i></div>
              </div>
            </a>
          </div>
        {% empty %}
          <div class="col-12">
            <div class="alert alert-secondary mb-0">{% trans "No product categories are available at the moment." %}</div>
          </div>
        {% endfor %}
      </div>
    </section>

    <section id="featured-products" class="mb-5">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
          <h2 class="h3 fw-bold mb-1">{% trans "Featured Products" %}</h2>
          <p class="text-muted mb-0">{% trans "Handpicked deals that customers love." %}</p>
        </div>
        <a href="{% url 'shop:product_list' %}" class="link-primary">{% trans "View all products" %}</a>
      </div>

      <div class="row g-4">
        {% for product in featured %}
          <div class="col-sm-6 col-lg-4 col-xl-3">
            <div class="card featured-card h-100 border-0 shadow-sm overflow-hidden">
              <div class="position-relative">
                {% if product.images.all %}
                  {% for img in product.images.all|slice:":1" %}
                    <img src="{{ img.image.url }}" class="card-img-top" alt="{{ product.name }}">
                  {% endfor %}
                {% elif product.image %}
                  <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}">
                {% else %}
                  <img src="{% static 'images/banshix.jpeg' %}" class="card-img-top" alt="{{ product.name }}">
                {% endif %}
                {% with discount=product.get_active_discount %}
                  {% if discount %}
                    <span class="badge bg-danger position-absolute top-0 end-0 m-3 shadow">{% if discount.discount_type == 'percentage' %}{{ discount.discount_value }}% OFF{% else %}{{ currency_symbol }}{{ discount.discount_value }} OFF{% endif %}</span>
                  {% endif %}
                {% endwith %}
              </div>

              <div class="card-body d-flex flex-column">
                <h5 class="card-title fs-6 fw-semibold">{% blocktrans %}{{ product.name|truncatechars:45 }}{% endblocktrans %}</h5>
                <p class="text-muted small mb-3">{% blocktrans %}{{ product.description|truncatechars:75 }}{% endblocktrans %}</p>

                <div class="mb-3">
                  {% with discount=product.get_active_discount %}
                    {% if discount %}
                      <div class="d-flex align-items-center gap-2">
                        <span class="text-muted text-decoration-line-through small">{{ currency_symbol }}{{ product.price|floatformat:2 }}</span>
                        <span class="h5 fw-bold text-success mb-0">{{ currency_symbol }}{{ product.get_discounted_price|floatformat:2 }}</span>
                      </div>
                    {% else %}
                      <span class="h5 fw-bold text-success mb-0">{{ currency_symbol }}{{ product.price|floatformat:2 }}</span>
                    {% endif %}
                  {% endwith %}
                </div>

                <div class="mt-auto d-grid gap-2">
                  <a href="{% url 'shop:product_detail' product.slug %}" class="btn btn-outline-primary btn-sm">{% trans "View product" %}</a>
                  <button
                    hx-post="{% url 'shop:add_to_cart' product.id %}"
                    hx-target="#cart-count"
                    hx-swap="outerHTML"
                    hx-indicator="#loading-spinner-{{ product.id }}"
                    class="btn btn-primary btn-sm">
                    <i class="fas fa-cart-plus me-2"></i>Add to cart
                  </button>
                  <div id="loading-spinner-{{ product.id }}" class="htmx-indicator small text-muted">Adding...</div>
                </div>
              </div>
            </div>
          </div>
        {% empty %}
          <div class="col-12">
            <div class="alert alert-secondary mb-0">{% trans "There are no featured products right now. Please check back soon." %}</div>
          </div>
        {% endfor %}
      </div>
    </section>

    <section class="row g-4">
      <div class="col-md-4">
        <div class="trust-card p-4 bg-white rounded-4 shadow-sm h-100">
          <div class="benefit-icon mb-3"><i class="fas fa-shield-alt"></i></div>
          <h5 class="fw-semibold">{% trans "Secure checkout" %}</h5>
          <p class="text-muted mb-0">{% trans "Protect your payment details with encrypted checkout and trusted payment partners." %}</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="trust-card p-4 bg-white rounded-4 shadow-sm h-100">
          <div class="benefit-icon mb-3"><i class="fas fa-truck-fast"></i></div>
          <h5 class="fw-semibold">{% trans "Fast delivery" %}</h5>
          <p class="text-muted mb-0">{% trans "Enjoy reliable global shipping and transparent tracking from order to delivery." %}</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="trust-card p-4 bg-white rounded-4 shadow-sm h-100">
          <div class="benefit-icon mb-3"><i class="fas fa-headset"></i></div>
          <h5 class="fw-semibold">{% trans "24/7 support" %}</h5>
          <p class="text-muted mb-0">{% trans "Our customer care team is ready to help you with product questions and order support." %}</p>
        </div>
      </div>
    </section>
  </div>
{% endblock content %}