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

{% block title %}Willkommen bei SwimMonitor{% endblock %}

{% block header %}
    <div class="container-header">
        <h1 class="display-4">Willkommen bei SwimMonitor</h1>
        <div class="container-status">
            <span class="badge bg-primary">Ihr digitaler Container-Manager</span>
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}
    <i class="fas fa-home me-2"></i>Willkommen
{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- Hero Section -->
    <div class="row mb-5">
        <div class="col-lg-12">
            <div class="card shadow border-start border-bottom">
                <div class="card-body text-center p-5">
                    <h2 class="display-5 mb-4">Ihr digitaler Begleiter für mobile Schwimmcontainer</h2>
                    <p class="lead mb-4">SwimMonitor vereinfacht die Verwaltung Ihrer mobilen Schwimmcontainer und bietet eine intuitive Benutzeroberfläche für alle wichtigen Funktionen.</p>
                    <div class="hero-buttons">
                        <a href="{{ path('api_data') }}" class="btn btn-primary btn-lg me-3">
                            <i class="fas fa-swimming-pool me-2"></i>Container verwalten
                        </a>
                        <a href="{{ path('app_qr_scanner') }}" class="btn btn-outline-primary btn-lg">
                            <i class="fas fa-qrcode me-2"></i>QR-Code scannen
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Grid -->
    <div class="row mb-5">
        <div class="col-lg-4 mb-4">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <h3>Terminverwaltung</h3>
                <p>Verwalten Sie Ihre Schwimmbad-Termine einfach und effizient. Erstellen, bearbeiten und organisieren Sie Termine mit wenigen Klicks.</p>
                <ul class="feature-list">
                    <li><i class="fas fa-check me-2"></i>Termine erstellen und bearbeiten</li>
                    <li><i class="fas fa-check me-2"></i>Automatische Erinnerungen</li>
                    <li><i class="fas fa-check me-2"></i>Übersichtlicher Kalender</li>
                </ul>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-qrcode"></i>
                </div>
                <h3>QR-Code System</h3>
                <p>Scannen Sie QR-Codes für schnelle Check-ins und Check-outs. Das System erkennt automatisch gültige Termine und Container.</p>
                <ul class="feature-list">
                    <li><i class="fas fa-check me-2"></i>Schnelles Ein- und Auschecken</li>
                    <li><i class="fas fa-check me-2"></i>Automatische Validierung</li>
                    <li><i class="fas fa-check me-2"></i>Echtzeit-Status</li>
                </ul>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3>Statistiken & Berichte</h3>
                <p>Behalten Sie den Überblick mit detaillierten Statistiken und Berichten über die Nutzung Ihres Schwimmbads.</p>
                <ul class="feature-list">
                    <li><i class="fas fa-check me-2"></i>Auslastungsstatistiken</li>
                    <li><i class="fas fa-check me-2"></i>Nutzungsberichte</li>
                    <li><i class="fas fa-check me-2"></i>Export-Funktionen</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- How it Works -->
    <div class="row mb-5">
        <div class="col-lg-12">
            <div class="card shadow border-start border-bottom">
                <div class="card-body">
                    <h2 class="text-center mb-4">So funktioniert's</h2>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <div class="timeline-content">
                                <h4>1. Registrierung</h4>
                                <p>Erstellen Sie ein Benutzerkonto und erhalten Sie Zugang zu allen Funktionen.</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-calendar-plus"></i>
                            </div>
                            <div class="timeline-content">
                                <h4>2. Termin buchen</h4>
                                <p>Wählen Sie einen passenden Termin und Container für Ihren Besuch.</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-qrcode"></i>
                            </div>
                            <div class="timeline-content">
                                <h4>3. QR-Code scannen</h4>
                                <p>Scannen Sie den QR-Code am Eingang für schnelles Einchecken.</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-swimming-pool"></i>
                            </div>
                            <div class="timeline-content">
                                <h4>4. Schwimmen genießen</h4>
                                <p>Nutzen Sie die gebuchte Zeit in Ihrem reservierten Container.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Start Guide -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow border-start border-bottom">
                <div class="card-body">
                    <h2 class="text-center mb-4">Schnellstart-Guide</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="quick-start-item">
                                <i class="fas fa-user-plus fa-2x mb-3"></i>
                                <h4>Neuer Benutzer?</h4>
                                <p>Registrieren Sie sich über den "Registrieren" Button oben rechts.</p>
                                <a href="{{ path('admin_user_register') }}" class="btn btn-outline-primary mt-2">
                                    <i class="fas fa-arrow-right me-2"></i>Jetzt registrieren
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="quick-start-item">
                                <i class="fas fa-calendar-plus fa-2x mb-3"></i>
                                <h4>Termin buchen</h4>
                                <p>Wählen Sie einen passenden Termin in der Terminübersicht.</p>
                                <a href="{{ path('api_data') }}" class="btn btn-outline-primary mt-2">
                                    <i class="fas fa-arrow-right me-2"></i>Termine anzeigen
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.container-status {
    margin-left: 1rem;
}

.card {
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
}

.hero-buttons {
    margin-top: 2rem;
}

.feature-card {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    height: 100%;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon i {
    font-size: 2rem;
    color: #2c3e50;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    text-align: left;
}

.feature-list li {
    margin-bottom: 0.5rem;
    color: #6c757d;
}

.timeline {
    position: relative;
    padding: 2rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #e9ecef;
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}

.timeline-icon {
    width: 50px;
    height: 50px;
    background: #2c3e50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1;
}

.timeline-content {
    flex: 1;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-left: 1rem;
}

.quick-start-item {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
    height: 100%;
}

.quick-start-item i {
    color: #2c3e50;
}

.badge {
    font-weight: 500;
    padding: 0.5em 1em;
}

.badge.bg-primary {
    background-color: #2c3e50 !important;
}

.btn-primary {
    background-color: #2c3e50;
    border-color: #2c3e50;
}

.btn-primary:hover {
    background-color: #1a252f;
    border-color: #1a252f;
}

.btn-outline-primary {
    color: #2c3e50;
    border-color: #2c3e50;
}

.btn-outline-primary:hover {
    background-color: #2c3e50;
    border-color: #2c3e50;
}

@media (max-width: 768px) {
    .container-header {
        flex-direction: column;
        text-align: center;
    }
    
    .container-status {
        margin: 1rem 0 0 0;
    }
    
    .timeline::before {
        left: 30px;
    }
    
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .timeline-icon {
        margin-bottom: 1rem;
    }
    
    .timeline-content {
        margin-left: 0;
        width: 100%;
    }
}
</style>
{% endblock %}