{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}">
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/home.js') }}" defer></script>
{% endblock %}

{% block content %}

<section class="hero-section">
  <div class="hero-content">
    <h1 class="hero-title">Welcome to WearWell Shop</h1>
    <p class="hero-subtitle">Discover premium fashion for every occasion. Quality clothing, unbeatable prices, and style
      that lasts.</p>

    <div class="hero-search">
      <form action="{{ url_for('main.products') }}" method="GET">
        <input type="text" name="q" placeholder="Search for products, brands, or categories..."
          class="hero-search-input">
        <button type="submit" class="hero-search-button">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </button>
      </form>
    </div>
  </div>
</section>

<section class="categories-section">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Shop by Category</h2>
      <a href="{{ url_for('main.products') }}" class="view-all-link">
        View All Categories →
      </a>
    </div>
    <div class="categories-grid">
      {% for category in categories[:6] %}
      <a href="{{ url_for('main.products', category=category.id) }}" class="category-card">
        <div class="category-image">
          {% if category.name == "T-Shirts" %}👕
          {% elif category.name == "Jeans" %}👖
          {% elif category.name == "Jackets" %}🧥
          {% elif category.name == "Shoes" %}👟
          {% elif category.name == "Accessories" %}👜
          {% elif category.name == "Dresses" %}👗
          {% elif category.name == "Shirts" %}👔
          {% elif category.name == "Hoodies" %}🧢
          {% else %}👚{% endif %}
        </div>
        <div class="category-name">
          {{ category.name }}
          <span class="category-count">{{ category.products|length }} items</span>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
</section>

<section class="featured-section">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Featured Products</h2>
      <a href="{{ url_for('main.products') }}" class="view-all-link">
        View All Products →
      </a>
    </div>

    <div class="products-grid">
      {% for product in featured_products[:8] %}
      <div class="product-card-home">
        {% if product.stock <= 5 and product.stock> 0 %}
          <span class="product-badge">Low Stock</span>
          {% elif product.stock == 0 %}
          <span class="product-badge" style="background: #666;">Out of Stock</span>
          {% endif %}

          <a href="{{ url_for('main.product_detail', id=product.id) }}">
            <div class="product-image-home">
              <img src="{{ product.get_image_url() }}" alt="{{ product.name }}">
            </div>

            <div class="product-info-home">
              <h3 class="product-title-home">{{ product.name }}</h3>

              <div class="product-price-home">${{ "%.2f"|format(product.price) }}</div>

              {% if product.average_rating > 0 %}
              <div class="product-rating-home">
                <div class="stars">
                  {% for i in range(5) %}
                  <span>{% if i < product.average_rating|int %}★{% else %}☆{% endif %}</span>
                      {% endfor %}
                </div>
                <span class="rating-count">({{ product.review_count }})</span>
              </div>
              {% endif %}

              <div class="product-meta-home">
                {% if product.company %}
                <span>{{ product.company }}</span>
                {% endif %}
                {% if product.color %}
                <span>{{ product.color }}</span>
                {% endif %}
              </div>
            </div>
          </a>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="promo-banner">
  <div class="promo-content">
    <h2>Summer Sale is Here! 🌞</h2>
    <p>Get up to 50% off on selected items. Limited time offer!</p>
    <a href="{{ url_for('main.products') }}" class="promo-button">
      Shop Now →
    </a>
  </div>
</section>

<section class="benefits-section">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Why Shop With Us?</h2>
    </div>

    <div class="benefits-grid">
      <div class="benefit-card">
        <span class="benefit-icon">🚚</span>
        <h3 class="benefit-title">Free Shipping</h3>
        <p class="benefit-description">Free delivery on all orders over $50. Fast and reliable shipping nationwide.</p>
      </div>

      <div class="benefit-card">
        <span class="benefit-icon">🔄</span>
        <h3 class="benefit-title">Easy Returns</h3>
        <p class="benefit-description">30-day return policy. If you're not satisfied, we'll make it right.</p>
      </div>

      <div class="benefit-card">
        <span class="benefit-icon">🔒</span>
        <h3 class="benefit-title">Secure Payment</h3>
        <p class="benefit-description">Your payment information is protected with bank-level security.</p>
      </div>

      <div class="benefit-card">
        <span class="benefit-icon">⭐</span>
        <h3 class="benefit-title">Quality Guarantee</h3>
        <p class="benefit-description">Premium materials and craftsmanship in every product we sell.</p>
      </div>
    </div>
  </div>
</section>

<section class="featured-section">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Best Sellers</h2>
      <a href="{{ url_for('main.products') }}" class="view-all-link">
        View More →
      </a>
    </div>

    <div class="products-grid">
      {% for product in best_sellers[:4] %}
      <div class="product-card-home">
        {% if product.stock <= 5 and product.stock> 0 %}
          <span class="product-badge">Popular</span>
          {% endif %}

          <a href="{{ url_for('main.product_detail', id=product.id) }}">
            <div class="product-image-home">
              <img src="{{ product.get_image_url() }}" alt="{{ product.name }}">
            </div>

            <div class="product-info-home">
              <h3 class="product-title-home">{{ product.name }}</h3>

              <div class="product-price-home">${{ "%.2f"|format(product.price) }}</div>

              {% if product.average_rating > 0 %}
              <div class="product-rating-home">
                <div class="stars">
                  {% for i in range(5) %}
                  <span>{% if i < product.average_rating|int %}★{% else %}☆{% endif %}</span>
                      {% endfor %}
                </div>
                <span class="rating-count">({{ product.review_count }})</span>
              </div>
              {% endif %}

              <div class="product-meta-home">
                <span>{{ product.stock }} in stock</span>
                <span>{{ product.like_count }} likes</span>
              </div>
            </div>
          </a>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="newsletter-section">
  <div class="newsletter-content">
    <h2>Stay in the Loop</h2>
    <p>Subscribe to our newsletter for exclusive deals, new arrivals, and style tips.</p>

    <form class="newsletter-form">
      <input type="email" placeholder="Enter your email address" class="newsletter-input" required>
      <button type="submit" class="newsletter-button">Subscribe</button>
    </form>

    <p style="margin-top: 15px; font-size: 0.9em; opacity: 0.8;">
      By subscribing, you agree to our Privacy Policy and consent to receive updates.
    </p>
  </div>
</section>
{% endblock %}