{% extends "base.html" %}
{% block content %}

<!-- Top Sellers -->
<div class="section-head">
  <h2 class="mm-section-title m-0">Top Sellers</h2>
  <a href="/store/">View all</a>
</div>

<div class="row g-4 mb-5">
  {% for p in top_sellers %}
  <div class="col-12 col-md-6 col-lg-3">
    <div class="mm-prod-card h-100 d-flex flex-column">
      {% if p.thumbnail %}
        <img src="{{ p.thumbnail.url }}" class="mm-prod-img" alt="{{ p.title }}">
      {% else %}
        <div class="mm-prod-img d-flex align-items-center justify-content-center text-muted">No Image</div>
      {% endif %}
      <div class="px-3 pb-3 d-flex flex-column gap-2">
        <div class="mm-title">{{ p.title }}</div>
        <div class="mm-meta">
          {% if p.weight_grams %}per {{ p.weight_grams }} g{% else %}per {{ p.unit }}{% endif %}
        </div>
        <div class="fw-bold">$ {{ p.price }}</div>
        <div class="text-warning">★ {{ p.rating|floatformat:1 }}</div>

        <form action="{% url 'add_to_cart' p.slug %}" method="post" class="mt-2">
          {% csrf_token %}
          <input type="hidden" name="qty" value="1">
          <button class="mm-btn mm-btn-block">Add to Cart</button>
        </form>
      </div>
    </div>
  </div>
  {% empty %}
    <p>No top sellers yet.</p>
  {% endfor %}
</div>

<!-- Featured Categories -->
<section class="mm-section">
  <h2 class="mm-section-title">Featured Categories</h2>
  <div class="row g-4">
    {% for c in categories %}
      <div class="col-12 col-md-6 col-lg-4">
        <a href="{% url 'category' c.slug %}" class="text-decoration-none">
          <div class="mm-cat-tile">
            <div class="mm-cat-bg"
                 style="--tile: {% cycle '#22c55e' '#fb923c' '#f97316' '#ef4444' '#0ea5e9' '#a78bfa' %};"></div>
            <div class="mm-cat-caption">{{ c.name }}</div>
          </div>
        </a>
      </div>
    {% empty %}
      <p>No categories yet.</p>
    {% endfor %}
  </div>
</section>

<!-- New Arrivals -->
<section class="mm-section mt-5">
  <h2 class="mm-section-title">New Arrivals</h2>
  <div class="row g-3">
    {% for p in products %}
      <div class="col-6 col-md-4 col-lg-3">
        <div class="mm-card h-100 d-flex flex-column">
          {% if p.thumbnail %}
            <img src="{{ p.thumbnail.url }}" class="mm-thumb w-100" alt="{{ p.title }}">
          {% else %}
            <div class="mm-thumb d-flex align-items-center justify-content-center text-muted">No Image</div>
          {% endif %}
          <div class="p-3 d-flex flex-column gap-2">
            <div class="mm-title">
              <a href="{% url 'product_detail' p.slug %}" class="text-decoration-none">{{ p.title }}</a>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <small class="mm-cat">{{ p.category.name }}</small>
              <span class="mm-stars">★ {{ p.rating|floatformat:1 }}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <div class="mm-price">$ {{ p.price }}</div>
              <form action="{% url 'add_to_cart' p.slug %}" method="post">
                {% csrf_token %}
                <input type="hidden" name="qty" value="1">
                <button class="mm-btn btn-sm">Add</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    {% empty %}
      <p>No products yet.</p>
    {% endfor %}
  </div>
</section>
<!-- Why / Deal / Tips -->
<section class="my-5 py-2">
  <div class="row g-4">
    <!-- Why MapleMart -->
    <div class="col-12 col-lg-4">
      <div class="mm-soft-card h-100">
        <h3 class="title">Why MapleMart?</h3>
        <ul class="mm-why-list">
          <li><span class="mm-dot mm-dot--green"></span> Fresh products — picked daily</li>
          <li><span class="mm-dot mm-dot--orange"></span> Fast delivery across Toronto</li>
          <li><span class="mm-dot mm-dot--yellow"></span> Fair pricing in CAD</li>
        </ul>
      </div>
    </div>

    <!-- Deal of the Day -->
    <div class="col-12 col-lg-4">
      <div class="mm-soft-card h-100 d-flex flex-column">
        <h3 class="title">Deal of the Day</h3>
        {% if deal %}
          <p class="mb-3">Save 15% on <strong>{{ deal.title }}</strong> today.</p>
          <a href="{% url 'product_detail' deal.slug %}" class="mm-cta">Shop {{ deal.title }}</a>
        {% else %}
          <p class="mb-3">Today’s special is coming soon.</p>
          <a class="mm-cta disabled" aria-disabled="true">Shop</a>
        {% endif %}
      </div>
    </div>

    <!-- Fresh Tips & Recipes -->
    <div class="col-12 col-lg-4">
      <div class="mm-soft-card h-100 d-flex flex-column">
        <h3 class="title">Fresh Tips & Recipes</h3>
        <p class="mb-3">Explore quick recipes and nutrition notes.</p>
        <a href="/blog/" class="btn btn-light border-0 rounded-3 px-3">Visit Blog</a>
      </div>
    </div>
  </div>
</section>
<!-- Customer Love -->
<section class="my-5">
  <h2 class="mm-section-title">Customer Love</h2>
  <div class="row g-4">
    {% if testimonials %}
      {% for t in testimonials %}
      <div class="col-12 col-lg-4">
        <div class="mm-quote-card h-100">
          <div class="mm-quote">“{{ t.quote }}”</div>
          <div class="mm-quote-author">— {{ t.author }}</div>
        </div>
      </div>
      {% endfor %}
    {% else %}
      <!-- fallback (static) -->
      <div class="col-12 col-lg-4">
        <div class="mm-quote-card h-100">
          <div class="mm-quote">“Super fast delivery and the apples were incredibly fresh.”</div>
          <div class="mm-quote-author">— Emma T.</div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="mm-quote-card h-100">
          <div class="mm-quote">“Great selection and fair prices. My go-to for weekly groceries.”</div>
          <div class="mm-quote-author">— Daniel K.</div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="mm-quote-card h-100">
          <div class="mm-quote">“Loved the salmon deal of the day! Will order again.”</div>
          <div class="mm-quote-author">— Priya S.</div>
        </div>
      </div>
    {% endif %}
  </div>
</section>


{% endblock %}