{% extends 'base.html' %}
{% load static %}

{% block title %}My E-Commerce Platform{% endblock %}

{% block content %}
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="#" style="font-family: var(--heading-font); font-weight: 700; color: var(--accent-color-1);">E-Shop</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<header class="hero-section">
    <div class="container">
        <h1>Find Your Next Favorite Thing</h1>
        <p>A curated collection of high-quality products, just for you.</p>
        <a href="#" class="btn btn-primary btn-lg">Shop Now</a>
    </div>
</header>

<main class="container product-grid">
    <h2 class="text-center mb-5">Featured Products</h2>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        {% for product in products %}
        <div class="col">
            <div class="card h-100 product-card">
                <img src="{{ product.image }}" class="card-img-top" alt="{{ product.name }}">
                <div class="card-body text-center">
                    <h5 class="card-title">{{ product.name }}</h5>
                    <p class="card-text">${{ product.price }}</p>
                    <a href="#" class="btn btn-outline-primary">Add to Cart</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</main>

<footer class="py-4 mt-5 bg-light">
    <div class="container text-center">
        <p class="mb-0">&copy; 2025 E-Shop. All Rights Reserved.</p>
    </div>
</footer>
{% endblock %}
