{% extends 'base/base.html' %}

{% block content %}
<!-- Hero Section -->
<header class="bg-hero bg-{{ hero_bg|default:'professional' }} bg-overlay bg-overlay-{{ hero_overlay|default:'primary' }} {% if hero_parallax %}bg-parallax{% endif %} py-5">
    <div class="container py-5">
        <div class="row min-vh-75 align-items-center py-5">
            <div class="col-lg-8 mx-auto text-center">
                <div class="bg-content">
                    {% block hero_content %}
                    <h1 class="display-3 fw-bold mb-4">{{ hero_title|default:"Welcome to PRACA" }}</h1>
                    <p class="lead mb-4">{{ hero_subtitle|default:"Professional equipment rental for content creators" }}</p>
                    <div class="d-flex flex-wrap gap-3 justify-content-center">
                        <a href="{% url 'equipment:list_equipment' %}" class="btn btn-primary btn-lg px-4">
                            <i class="fas fa-camera me-2"></i> Browse Equipment
                        </a>
                        {% if not user.is_authenticated %}
                        <a href="{% url 'account_signup' %}" class="btn btn-outline-light btn-lg px-4">
                            <i class="fas fa-user-plus me-2"></i> Sign Up
                        </a>
                        {% endif %}
                    </div>
                    {% endblock %}
                </div>
            </div>
        </div>
    </div>
    {% if hero_scroll_arrow %}
    <div class="position-absolute bottom-0 start-50 translate-middle-x mb-4">
        <a href="#main-content" class="text-white" style="font-size: 2rem;">
            <i class="fas fa-chevron-down"></i>
        </a>
    </div>
    {% endif %}
</header>

<main id="main-content">
    {% block main_content %}
    <!-- Main content will be inserted here by child templates -->
    {% endblock %}
</main>
{% endblock %}