<%- include('partials/header') %>

<section class="hero" style="<%= banners.length > 0 && banners[0].image ? 'background:linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%),url(' + banners[0].image + ');background-size:cover;background-blend-mode:overlay;background-position:center;' : '' %>">
  <div class="container">
    <% if (banners.length > 0) { %>
      <% const banner = banners.find(b => b.active) || banners[0]; %>
      <h1><%= banner.title %></h1>
      <p><%= banner.subtitle %></p>
      <a href="<%= banner.btnLink %>" class="btn btn-primary"><%= banner.btnText %></a>
    <% } else { %>
      <h1>Premium Fashion Collection</h1>
      <p>Discover the latest trends for men and women. Premium quality, delivered across Bangladesh.</p>
      <a href="/shop" class="btn btn-primary">Shop Now</a>
    <% } %>
  </div>
</section>

<section class="section">
  <div class="container">
    <h2 class="section-title">Categories</h2>
    <div class="categories-grid">
      <% categories.forEach(function(cat) { %>
      <a href="/shop?category=<%= cat.slug %>" class="category-card">
        <div class="icon">
          <% if (cat.slug === 'men') { %>&#128694;<% } %>
          <% if (cat.slug === 'women') { %>&#128132;<% } %>
          <% if (cat.slug === 'accessories') { %>&#128083;<% } %>
          <% if (cat.slug === 'footwear') { %>&#128095;<% } %>
        </div>
        <h3><%= cat.name %></h3>
      </a>
      <% }); %>
    </div>
  </div>
</section>

<section class="section section-dark">
  <div class="container">
    <h2 class="section-title">Featured Products</h2>
    <div class="products-grid">
      <% if (featured.length > 0) { %>
        <% featured.forEach(function(p) { %>
        <div class="product-card">
          <a href="/product/<%= p.id %>">
            <div class="product-img" style="<% if (p.image && p.image !== '/uploads/product-default.jpg') { %>background:url('<%= p.image %>');background-size:cover;background-position:center;<% } %>">
              <% if (!p.image || p.image === '/uploads/product-default.jpg') { %>&#128088;<% } %>
            </div>
          </a>
          <div class="product-info">
            <h3><%= p.name %></h3>
            <p class="price">BDT <%= p.price.toLocaleString() %> <span>/=</span></p>
            <form action="/cart/add" method="POST" class="product-actions">
              <input type="hidden" name="id" value="<%= p.id %>">
              <input type="number" name="qty" value="1" min="1" class="qty-input">
              <button type="submit" class="btn btn-primary btn-sm">Add to Cart</button>
            </form>
          </div>
        </div>
        <% }); %>
      <% } else { %>
        <% products.slice(0, 4).forEach(function(p) { %>
        <div class="product-card">
          <a href="/product/<%= p.id %>">
            <div class="product-img" style="<% if (p.image && p.image !== '/uploads/product-default.jpg') { %>background:url('<%= p.image %>');background-size:cover;background-position:center;<% } %>">
              <% if (!p.image || p.image === '/uploads/product-default.jpg') { %>&#128088;<% } %>
            </div>
          </a>
          <div class="product-info">
            <h3><%= p.name %></h3>
            <p class="price">BDT <%= p.price.toLocaleString() %> <span>/=</span></p>
            <form action="/cart/add" method="POST" class="product-actions">
              <input type="hidden" name="id" value="<%= p.id %>">
              <input type="number" name="qty" value="1" min="1" class="qty-input">
              <button type="submit" class="btn btn-primary btn-sm">Add to Cart</button>
            </form>
          </div>
        </div>
        <% }); %>
      <% } %>
    </div>
    <div style="text-align:center;margin-top:40px;">
      <a href="/shop" class="btn btn-secondary">View All Products</a>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <h2 class="section-title">Why Shop With Us</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;">
      <div style="text-align:center;padding:30px;background:#1a1a1a;border:1px solid #2a2a2a;">
        <div style="font-size:40px;margin-bottom:12px;">&#128666;</div>
        <h3 style="color:#d4a574;margin-bottom:8px;">Bangladesh Delivery</h3>
        <p style="color:#8a7a6a;font-size:13px;">We deliver to all districts. Free delivery on orders above BDT <%= (settings.freeDeliveryAbove || 2000).toLocaleString() %></p>
      </div>
      <div style="text-align:center;padding:30px;background:#1a1a1a;border:1px solid #2a2a2a;">
        <div style="font-size:40px;margin-bottom:12px;">&#128179;</div>
        <h3 style="color:#d4a574;margin-bottom:8px;">Secure Payment</h3>
        <p style="color:#8a7a6a;font-size:13px;">Cash on Delivery, bKash, Nagad & Rocket</p>
      </div>
      <div style="text-align:center;padding:30px;background:#1a1a1a;border:1px solid #2a2a2a;">
        <div style="font-size:40px;margin-bottom:12px;">&#128101;</div>
        <h3 style="color:#d4a574;margin-bottom:8px;">24/7 Support</h3>
        <p style="color:#8a7a6a;font-size:13px;">Contact us anytime. We are here to help you</p>
      </div>
    </div>
  </div>
</section>

<%- include('partials/footer') %>
