@page "/"
@inject NavigationManager Nav

<h3 class="mb-4">Willkommen bei OnProf Next</h3>
<p class="text-muted">Wähle einen Bereich aus, um fortzufahren:</p>

<div class="row g-4 mt-3">
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card dashboard-card text-center" @onclick="() => GoToUsers()">
            <div class="card-body">
                <i class="bi bi-people fs-1 text-primary"></i>
                <h5 class="card-title mt-3">Benutzer</h5>
                <p class="text-muted small">Verwalte Benutzer und Rechte.</p>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card dashboard-card text-center" @onclick="() => GoToProjects()">
            <div class="card-body">
                <i class="bi bi-folder2-open fs-1 text-success"></i>
                <h5 class="card-title mt-3">Projekte</h5>
                <p class="text-muted small">Verwalte laufende Projekte und Aufträge.</p>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card dashboard-card text-center" @onclick="() => GoToBookings()">
            <div class="card-body">
                <i class="bi bi-stopwatch fs-1 text-warning"></i>
                <h5 class="card-title mt-3">Buchungen</h5>
                <p class="text-muted small">Erfasse Arbeitszeiten auf Projekte.</p>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card dashboard-card text-center" @onclick="() => GoToAnalysis()">
            <div class="card-body">
                <i class="bi bi-graph-up fs-1 text-danger"></i>
                <h5 class="card-title mt-3">Auswertungen</h5>
                <p class="text-muted small">Analysiere Projektzeiten und Fortschritt.</p>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card dashboard-card text-center" @onclick="() => GoToMandants()">
            <div class="card-body">
                <i class="bi bi-graph-up fs-1 text-danger"></i>
                <h5 class="card-title mt-3">Mandanten</h5>
                <p class="text-muted small">Verwaltung von Mandanten</p>
            </div>
        </div>
    </div>
</div>

@code{
    private void GoToUsers()
    {
        Nav.NavigateTo("/users");
    }

    private void GoToProjects()
    {
        Nav.NavigateTo("/projects");
    }

    private void GoToBookings()
    {
        Nav.NavigateTo("/bookings");
    }

    private void GoToAnalysis()
    {
        Nav.NavigateTo("/analysis");
    }

    private void GoToMandants()
    {
        Nav.NavigateTo("/mandants");
    }

}

<style>
    .dashboard-card {
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-radius: 0.75rem;
    }

    .dashboard-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .card-body i {
        transition: transform 0.3s ease;
    }

    .dashboard-card:hover i {
        transform: scale(1.1);
    }
</style>