{% extends "base.html" %}

{% block title %}Home - {{ app_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto text-center">
        <div class="py-5">
            <h1 class="display-3 mb-4">
                <i class="bi bi-bricks text-danger"></i> LEGO Instructions Manager
            </h1>
            <p class="lead mb-5">
                Organize, manage, and access all your LEGO instruction manuals in one place.
                Upload PDFs and images, search by theme, set number, or year, and integrate with Brickset for automatic set details.
            </p>
            
            {% if not current_user.is_authenticated %}
                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                    <a href="{{ url_for('auth.register') }}" class="btn btn-danger btn-lg px-4 gap-3">
                        <i class="bi bi-person-plus"></i> Get Started
                    </a>
                    <a href="{{ url_for('auth.login') }}" class="btn btn-outline-secondary btn-lg px-4">
                        <i class="bi bi-box-arrow-in-right"></i> Login
                    </a>
                </div>
            {% else %}
                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                    <a href="{{ url_for('main.dashboard') }}" class="btn btn-danger btn-lg px-4 gap-3">
                        <i class="bi bi-speedometer2"></i> Go to Dashboard
                    </a>
                    <div class="btn-group">
                        <a href="{{ url_for('sets.add_set') }}" class="btn btn-outline-secondary btn-lg px-4">
                            <i class="bi bi-box-seam"></i> Add Official Set
                        </a>
                        <a href="{{ url_for('sets.add_set') }}?type=moc" class="btn btn-outline-warning btn-lg px-4">
                            <i class="bi bi-star-fill"></i> Add MOC
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-md-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <i class="bi bi-cloud-upload display-1 text-primary mb-3"></i>
                <h3 class="card-title">Upload & Organize</h3>
                <p class="card-text">
                    Upload instruction PDFs and images for your LEGO sets. Keep everything organized by theme, year, and set number.
                </p>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <i class="bi bi-search display-1 text-success mb-3"></i>
                <h3 class="card-title">Easy Search</h3>
                <p class="card-text">
                    Quickly find any instruction manual using powerful search and filtering. Sort by theme, year, or set number.
                </p>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <i class="bi bi-link-45deg display-1 text-danger mb-3"></i>
                <h3 class="card-title">Brickset Integration</h3>
                <p class="card-text">
                    Connect with Brickset API to automatically populate set details and access official instructions when available.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-lg-10 mx-auto">
        <div class="card shadow">
            <div class="card-body">
                <h3 class="card-title mb-4">
                    <i class="bi bi-info-circle"></i> Features
                </h3>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Upload PDF and image instructions</li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Organize by theme and year</li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Search and filter capabilities</li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> User authentication & profiles</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Brickset API integration</li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Automatic set detail population</li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Image gallery view</li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Responsive design</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}