@page "/"
@using Koogle.Web.Components.Layout
@using Microsoft.AspNetCore.Components.Authorization

@layout PublicLayout

@inject NavigationManager NavigationManager

<MudContainer MaxWidth="MaxWidth.Large" Class="py-8">

    @* Hero Section *@
    <MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
        <MudGrid>
            <MudItem xs="12" md="8">
                <MudStack Spacing="4">
                    <MudStack Row AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Sports" Size="Size.Large" />
                        <MudText Typo="Typo.caption" Style="opacity: 0.8;" Class="hero-subtitle">Vereinsverwaltung leicht gemacht</MudText>
                    </MudStack>
                    <MudText Typo="Typo.h3" Class="hero-title">
                        KOOGLE - Vereinsverwaltung leicht gemacht
                    </MudText>
                    <MudText Typo="Typo.h6" Style="opacity: 0.9;">
                        Die smarte Lösung für Kegelclubs
                    </MudText>
                    <MudStack Row Spacing="2" Class="mt-4">
                        <MudButton Variant="Variant.Outlined" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Info" Href="#features">
                            Mehr erfahren
                        </MudButton>

                        
                        <AuthorizeView>
                            <Authorized>
                                <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
                                    zur Anwendung
                                </MudButton>
                            </Authorized>
                            <NotAuthorized>
                                <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Login" Href="/account/login">
                                    Jetzt einloggen
                                </MudButton>
                            </NotAuthorized>
                        </AuthorizeView>
                    </MudStack>
                </MudStack>
            </MudItem>
        </MudGrid>
    </MudPaper>

    @* Features Section *@
    <div id="features">
        <MudText Typo="Typo.h5" Class="mb-4 font-weight-bold" Color="Color.Primary">
            Deine Vorteile mit KOOGLE
        </MudText>

        <MudGrid Spacing="4" Class="mb-8">
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Groups" Color="Color.Primary" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Mitgliederverwaltung</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Mitglieder einfach verwaltet</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Create" Color="Color.Success" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Club-Administration</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Gründe einen Verein und lade weitere Personen ein</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.AttachMoney" Color="Color.Warning" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Automatische Kostenabrechnung</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Kosten und Umlagen im Blick</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Color="Color.Info" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Auswertungen</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Pro Person, Tag oder Spiel</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
        </MudGrid>

        <MudGrid Spacing="4" Class="mb-8">
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.EventNote" Color="Color.Info" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Spieltage einfach verwaltet</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Übersichtlich und schnell</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Calculate" Color="Color.Success" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Regelbasierte Umlage</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Ohne Kopfzerbrechen</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.TrendingUp" Color="Color.Error" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Statistiken pro Tag oder Spiel</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Detaillierte Auswertungen</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.SportsBaseball" Color="Color.Primary" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Statistiken pro Person</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Oder Spiel</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Gif" Color="Color.Primary" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Individuelle Gifs sorgen für Lacher am Kegelabend</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">weise Gifs Ereignissen zu</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Games" Color="Color.Primary" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Auswahl an Kegelspielen</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Tafel ohne Wasser und Kreide, synchron auf beliebigen Geräten</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Mail" Color="Color.Info" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Strafen-Berichte per E-Mail</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">Verknüpfe Benutzerkonten und Mitglieder und erhalte Berichte per E-Mail</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudCard Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.AccountBalance" Color="Color.Warning" Size="Size.Large" />
                        <MudText Typo="Typo.subtitle1" Class="font-weight-bold" Align="Align.Center">Kassenbuch</MudText>
                        <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">autom. Buchungen, Kontoabgleich u.v.m wird euer Kassenwart lieben</MudText>
                    </MudStack>
                </MudCard>
            </MudItem>
        </MudGrid>
    </div>

    @* Benefits & Target Section *@
    <MudGrid Spacing="4" Class="mb-8">
        <MudItem xs="12" md="6">
            <MudPaper Class="pa-6 rounded-lg" Elevation="1">
                <MudText Typo="Typo.h6" Class="mb-4 font-weight-bold" Color="Color.Primary">Eure Vorteile</MudText>
                <MudStack Spacing="2">
                    <MudStack Row AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Check" Color="Color.Success" />
                        <MudText>Rollenbasierte Berechtigungen (Viewer/Editor/Schatzmeister/Admin)</MudText>
                    </MudStack>
                    <MudStack Row AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Check" Color="Color.Success" />
                        <MudText>Sichere Authentifizierung</MudText>
                    </MudStack>
                </MudStack>
                <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="mt-4" StartIcon="@Icons.Material.Filled.Info" Href="#features">
                    Mehr erfahren
                </MudButton>
            </MudPaper>
        </MudItem>
        <MudItem xs="12" md="6">
            <MudPaper Class="pa-6 rounded-lg" Elevation="1">
                <MudText Typo="Typo.h6" Class="mb-4 font-weight-bold" Color="Color.Primary">Klingt interessant?</MudText>
                <MudText Typo="Typo.subtitle2" Class="mb-2"><strong>Demozugang</strong></MudText>
                <MudStack Spacing="2">
                    <MudStack Row AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Check" Color="Color.Success" />
                        <MudText>Nutzen den Demo-Zugang um die Anwendung zu testen</MudText>
                    </MudStack>
                    <MudStack Row AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.Check" Color="Color.Success" />
                        <MudText>Registierte einen neuen Verein, und lade Mitglieder ein</MudText>
                    </MudStack>
                </MudStack>
            </MudPaper>
        </MudItem>
    </MudGrid>

    @* Target Audience Section *@
    <MudPaper Class="pa-6 mb-8 rounded-lg" Elevation="1">
        <MudText Typo="Typo.h6" Class="mb-4 font-weight-bold" Color="Color.Primary">Qualität</MudText>
        <MudStack Row AlignItems="AlignItems.Center" Spacing="2">
            <MudIcon Icon="@Icons.Material.Filled.Circle" Color="Color.Success" Size="Size.Small" />
            <MudText>
                Unser <strong>Kegelverein KFB</strong> existiert seit 2000 - Wir wissen also, was Kegelvereine brauchen ;-)
            </MudText>
        </MudStack>
    </MudPaper>

    @* Footer Slogan *@
    <MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
        <MudText Typo="Typo.h5" Align="Align.Center" Class="font-weight-bold">
            "Weniger Verwaltung, mehr Kegeln!"
        </MudText>
    </MudPaper>

    @* Copyright Footer *@
    <MudStack Row Justify="Justify.Center" AlignItems="AlignItems.Center" Spacing="4" Class="mt-6">
        <MudText Typo="Typo.caption" Color="Color.Secondary">© 2025 KOOGLE. Alle Rechte vorbehalten.</MudText>
        <MudLink Href="/impressum" Typo="Typo.caption" Color="Color.Secondary">Impressum</MudLink>
        <MudLink Href="/datenschutz" Typo="Typo.caption" Color="Color.Secondary">Datenschutz</MudLink>
    </MudStack>

</MudContainer>


@code {
}

<style>
    .hero-subtitle {
        font-size: 0.65rem !important;
    }

    @@media (min-width: 600px) {
        .hero-subtitle {
            font-size: 0.75rem !important;
        }
    }

    .hero-title {
        font-size: 1.9rem !important;
    }

    @@media (min-width: 600px) {
        .hero-title {
            font-size: 2.2rem !important;
        }
    }
</style>