{% extends 'base.html' %}
{% block content %}
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h3 mb-0">Hot Products</h1>
    <div class="share-buttons">
      <span class="me-2">Share:</span>
      {% set share_url = request.url %}
      <a class="btn btn-sm btn-outline-secondary me-1" href="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}" target="_blank" rel="noopener">Facebook</a>
      <a class="btn btn-sm btn-outline-secondary me-1" href="https://twitter.com/intent/tweet?url={{ share_url }}&text={{ page_title }}" target="_blank" rel="noopener">X</a>
      <a class="btn btn-sm btn-outline-secondary" href="https://www.reddit.com/submit?url={{ share_url }}&title={{ page_title }}" target="_blank" rel="noopener">Reddit</a>
    </div>
  </div>

  <div class="row g-3">
    {% for item in hot_products %}
    <div class="col-6 col-md-4 col-lg-3">
      <div class="card h-100 product-card">
        <a href="{{ url_for('product', asin=item.asin) }}" class="text-decoration-none">
          {% if item.image_url %}
          <img src="{{ item.image_url }}" class="card-img-top" alt="{{ item.title }}">
          {% endif %}
          <div class="card-body">
            <h2 class="card-title h6 text-dark">{{ item.title }}</h2>
            {% if item.price %}
            <p class="card-text text-primary fw-semibold">{{ item.price }}</p>
            {% endif %}
            {% if item.star_rating %}
              <div class="small text-muted">⭐ {{ item.star_rating }} ({{ item.review_count or 0 }} reviews)</div>
            {% endif %}
          </div>
        </a>
        <div class="card-footer bg-white border-0 pb-3">
          <a href="{{ item.detail_url }}" class="btn btn-sm btn-primary w-100" target="_blank" rel="noopener">View on Amazon</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
{% endblock %}