{% extends "base.html" %}

{% block title %}PDF Editor - Home{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- Hero Section -->
        <div class="jumbotron bg-gradient text-white rounded p-5 mb-5">
            <h1 class="display-4">
                <i class="fas fa-file-pdf me-3"></i>PDF Editor Web App
            </h1>
            <p class="lead">
                Ihre lokale Lösung für PDF-Bearbeitung: Bilder zu PDF konvertieren, 
                PDFs zusammenführen, Seiten extrahieren und vieles mehr.
            </p>
            <hr class="my-4">
            <p>Einfach zu bedienen, vollständig lokal und sicher.</p>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Bilder zu PDF -->
    <div class="col-md-6">
        <div class="card h-100 feature-card">
            <div class="card-body text-center">
                <div class="icon-wrapper mb-3">
                    <i class="fas fa-images fa-3x text-primary"></i>
                </div>
                <h5 class="card-title">Bilder zu PDF</h5>
                <p class="card-text">
                    Wählen Sie mehrere Bilder aus und konvertieren Sie diese 
                    in eine einzige PDF-Datei. Unterstützt JPG, PNG, GIF und mehr.
                </p>
                <div class="features-list mb-3">
                    <small class="text-muted">
                        <i class="fas fa-check me-2"></i>Drag & Drop Support<br>
                        <i class="fas fa-check me-2"></i>Automatische Größenanpassung<br>
                        <i class="fas fa-check me-2"></i>Reihenfolge sortierbar
                    </small>
                </div>
            </div>
            <div class="card-footer">
                <a href="{{ url_for('images_to_pdf_page') }}" class="btn btn-primary w-100">
                    <i class="fas fa-arrow-right me-2"></i>Jetzt starten
                </a>
            </div>
        </div>
    </div>

    <!-- PDF Tools -->
    <div class="col-md-6">
        <div class="card h-100 feature-card">
            <div class="card-body text-center">
                <div class="icon-wrapper mb-3">
                    <i class="fas fa-tools fa-3x text-success"></i>
                </div>
                <h5 class="card-title">PDF Tools</h5>
                <p class="card-text">
                    Erweiterte PDF-Bearbeitungswerkzeuge für alle Ihre Anforderungen.
                    Zusammenführen, teilen und konvertieren.
                </p>
                <div class="features-list mb-3">
                    <small class="text-muted">
                        <i class="fas fa-check me-2"></i>PDFs zusammenführen<br>
                        <i class="fas fa-check me-2"></i>PDF zu Bildern<br>
                        <i class="fas fa-check me-2"></i>Seiten extrahieren
                    </small>
                </div>
            </div>
            <div class="card-footer">
                <a href="{{ url_for('pdf_tools_page') }}" class="btn btn-success w-100">
                    <i class="fas fa-arrow-right me-2"></i>Tools öffnen
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Info Section -->
<div class="row mt-5">
    <div class="col-12">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-info-circle me-2"></i>Wie es funktioniert
                </h5>
                <div class="row">
                    <div class="col-md-4 text-center">
                        <div class="step-icon mb-3">
                            <i class="fas fa-upload fa-2x text-primary"></i>
                        </div>
                        <h6>1. Dateien hochladen</h6>
                        <p class="small text-muted">
                            Ziehen Sie Ihre Dateien einfach in den Upload-Bereich 
                            oder klicken Sie zum Auswählen.
                        </p>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="step-icon mb-3">
                            <i class="fas fa-cogs fa-2x text-warning"></i>
                        </div>
                        <h6>2. Bearbeiten</h6>
                        <p class="small text-muted">
                            Sortieren Sie die Reihenfolge, wählen Sie Optionen 
                            und starten Sie die Verarbeitung.
                        </p>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="step-icon mb-3">
                            <i class="fas fa-download fa-2x text-success"></i>
                        </div>
                        <h6>3. Herunterladen</h6>
                        <p class="small text-muted">
                            Laden Sie Ihre fertige PDF-Datei oder 
                            das Ergebnis direkt herunter.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Features -->
<div class="row mt-5">
    <div class="col-12">
        <h3 class="text-center mb-4">Warum PDF Editor wählen?</h3>
        <div class="row g-3">
            <div class="col-md-3 text-center">
                <i class="fas fa-shield-alt fa-2x text-primary mb-2"></i>
                <h6>100% Lokal</h6>
                <small class="text-muted">Ihre Dateien verlassen nie Ihren Computer</small>
            </div>
            <div class="col-md-3 text-center">
                <i class="fas fa-bolt fa-2x text-warning mb-2"></i>
                <h6>Schnell</h6>
                <small class="text-muted">Keine Upload-Wartezeiten, sofortige Verarbeitung</small>
            </div>
            <div class="col-md-3 text-center">
                <i class="fas fa-mobile-alt fa-2x text-success mb-2"></i>
                <h6>Responsiv</h6>
                <small class="text-muted">Funktioniert auf Desktop, Tablet und Handy</small>
            </div>
            <div class="col-md-3 text-center">
                <i class="fas fa-code fa-2x text-info mb-2"></i>
                <h6>Open Source</h6>
                <small class="text-muted">Transparenter Code, den Sie verstehen können</small>
            </div>
        </div>
    </div>
</div>
{% endblock %}