{% extends 'base.html' %}
{% load static %}
{% block title %}Home | NuraStore{% endblock %}

{% block content %}

<div class="mb-5 rounded-3 overflow-hidden shadow-sm position-relative text-white" 
     style="background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); min-height: 300px;">
    
    <div class="position-absolute top-0 start-0 w-100 h-100" style="opacity: 0.1; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 20px 20px;"></div>
    
    <div class="container-fluid py-5 position-relative z-1 d-flex align-items-center" style="min-height: 300px;">
        <div class="col-md-8 px-4">
            <span class="badge bg-warning text-dark mb-2 px-3 py-2 rounded-pill fw-bold text-uppercase">
                <i class="fas fa-bolt me-1"></i> New Arrivals
            </span>
            <h1 class="display-4 fw-bold mb-3">Welcome to NuraStore</h1>
            <p class="fs-4 mb-4 text-white-50">The #1 Marketplace for Quality Products in Northern Nigeria. fast delivery to Kano, Abuja & Beyond.</p>
            <button class="btn btn-light btn-lg px-4 rounded-pill fw-bold text-primary shadow-sm" onclick="document.getElementById('product-section').scrollIntoView({behavior: 'smooth'})">
                Shop Now <i class="fas fa-arrow-down ms-2"></i>
            </button>
        </div>
    </div>
</div>

<div class="container mb-5">
    <div class="row g-4 text-center">
        <div class="col-md-4">
            <div class="p-3 border rounded-3 bg-white shadow-sm h-100">
                <div class="text-primary mb-2"><i class="fas fa-truck-fast fa-2x"></i></div>
                <h5 class="fw-bold">Fast Delivery</h5>
                <p class="text-muted small mb-0">Same-day delivery within Kano metropolis.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="p-3 border rounded-3 bg-white shadow-sm h-100">
                <div class="text-primary mb-2"><i class="fas fa-shield-alt fa-2x"></i></div>
                <h5 class="fw-bold">Secure Payment</h5>
                <p class="text-muted small mb-0">Pay securely via Paystack or Transfer.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="p-3 border rounded-3 bg-white shadow-sm h-100">
                <div class="text-primary mb-2"><i class="fas fa-headset fa-2x"></i></div>
                <h5 class="fw-bold">24/7 Support</h5>
                <p class="text-muted small mb-0">Dedicated support for all your inquiries.</p>
            </div>
        </div>
    </div>
</div>

<div id="product-section" class="sticky-top" style="top: 70px; z-index: 800;">
    <div class="card border-0 shadow-lg mb-4 rounded-3" style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);">
        <div class="card-body p-3">
            <div class="row g-2 align-items-center">
                
                <div class="col-md-5">
                    <div class="input-group">
                        <span class="input-group-text bg-transparent border-end-0 text-muted"><i class="fas fa-search"></i></span>
                        <input type="text" class="form-control border-start-0 ps-0 bg-transparent" id="search-input" placeholder="What are you looking for?" onkeyup="App.applyFilters()">
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-text bg-transparent border-end-0 text-muted"><i class="fas fa-filter"></i></span>
                        <select class="form-select border-start-0 bg-transparent" id="category-select" onchange="App.applyFilters()">
                            <option value="">All Categories</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-text bg-transparent border-end-0 text-muted"><i class="fas fa-sort"></i></span>
                        <select class="form-select border-start-0 bg-transparent" id="sort-select" onchange="App.applyFilters()">
                            <option value="">Sort: Newest</option>
                            <option value="price">Price: Low to High</option>
                            <option value="-price">Price: High to Low</option>
                            <option value="name">Name: A-Z</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-1">
                    <button class="btn btn-light border w-100 text-danger" title="Clear Filters" onclick="App.resetFilters()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-4 px-2">
    <h3 class="fw-bold text-dark m-0">Latest Products</h3>
    <span class="text-muted small">Showing available items</span>
</div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-5" id="product-list">
    </div>

{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Initialize App
        App.loadCategories(); // Load the dropdown
        App.fetchProducts();  // Load the products

        // Update Cart badge if logged in
        if(Auth.isAuthenticated()) {
            App.fetchCart();
        }
    });
</script>
{% endblock %}