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

{% block content %}
<!-- Hero Section -->
<section class="hero-section py-5 mb-5" style="background: linear-gradient(135deg, #FCF8F3 0%, #F5E8DD 100%); min-height: 80vh; display: flex; align-items: center;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-3 mb-4">Thoughtful Gifts, <br><span style="color: var(--primary-color);">Authentically Polish</span></h1>
                <p class="lead mb-5 text-muted">Create a personalized gift box filled with handpicked candles, books, postcards, and stationary. We deliver the warmth of Poland to your doorstep.</p>
                <div class="d-flex gap-3">
                    <a href="{% url 'catalog' %}" class="btn btn-primary btn-lg">Browse Shop</a>
                    <a href="#" class="btn btn-outline-dark btn-lg rounded-pill px-4">Build a Box</a>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block">
                <div class="position-relative">
                    <div style="width: 450px; height: 450px; background-color: var(--accent-color); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; opacity: 0.2; position: absolute; top: -50px; right: -50px; z-index: 1;"></div>
                    <img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=800&q=80" alt="Gift Box" class="img-fluid rounded-4 shadow-lg position-relative" style="z-index: 2;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Categories Section -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="display-5">The Little Wonders</h2>
            <p class="text-muted">Explore our curated collections</p>
        </div>
        <div class="row g-4">
            {% for category in categories %}
            <div class="col-md-3">
                <a href="{% url 'catalog' %}?category={{ category.slug }}" class="text-decoration-none">
                    <div class="card border-0 h-100 shadow-sm text-center p-4 hover-lift">
                        <div class="mb-3">
                            {% if category.image_url %}
                            <img src="{{ category.image_url }}" alt="{{ category.name }}" class="img-fluid rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
                            {% else %}
                            <div class="bg-light rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                                <span class="fs-1 text-muted">📦</span>
                            </div>
                            {% endif %}
                        </div>
                        <h4 class="h5 mb-0 text-dark">{{ category.name }}</h4>
                    </div>
                </a>
            </div>
            {% empty %}
            <div class="col-12 text-center">
                <p class="text-muted">No categories available yet. Please add some in the <a href="/admin/">Admin panel</a>.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Featured Products -->
<section class="py-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end mb-5">
            <div>
                <h2 class="display-5">Staff Favorites</h2>
                <p class="text-muted mb-0">Our most loved items this month</p>
            </div>
            <a href="{% url 'catalog' %}" class="text-primary text-decoration-none fw-semibold">View All &rarr;</a>
        </div>
        <div class="row g-4">
            {% for product in featured_products %}
            <div class="col-md-4">
                <div class="card border-0 shadow-sm h-100">
                    <img src="{{ product.image_url|default:'https://via.placeholder.com/400x300?text=Gift+Product' }}" class="card-img-top" alt="{{ product.name }}" style="height: 250px; object-fit: cover;">
                    <div class="card-body">
                        <span class="badge bg-light text-muted mb-2">{{ product.category.name }}</span>
                        <h5 class="card-title">{{ product.name }}</h5>
                        <p class="text-primary fw-bold">{{ product.price }} PLN</p>
                        <a href="{% url 'product_detail' product.slug %}" class="btn btn-outline-primary btn-sm w-100">View Details</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Constructor CTA -->
<section class="py-5 mb-5 mt-5">
    <div class="container">
        <div class="bg-dark text-white p-5 rounded-5 overflow-hidden position-relative">
            <div class="row align-items-center">
                <div class="col-lg-7 position-relative" style="z-index: 2;">
                    <h2 class="display-4 mb-4">The Gift Box Constructor</h2>
                    <p class="lead mb-4">Can't decide? Build your own box! Pick the items, choose a card, and we'll pack it beautifully with a handwritten note.</p>
                    <a href="#" class="btn btn-primary btn-lg px-5">Start Building</a>
                </div>
                <div class="col-lg-5">
                    <img src="https://images.unsplash.com/photo-1513201099705-a9746e1e201f?auto=format&fit=crop&w=600&q=80" alt="Box Packing" class="img-fluid rounded-4 opacity-75">
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}