@page "/"
@using PlaylistShared.Pwa.Services
@inject NavigationManager Navigation
@inject AuthenticationStateProvider AuthProvider

<MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
    <MudCard>
        <MudCardHeader>
            <CardHeaderContent>
                <MudText Typo="Typo.h4" GutterBottom>🎵 Playlist share</MudText>
                <MudText Typo="Typo.body1">
                    Делитесь плейлистами Яндекс.Музыки с друзьями и управляйте треками вместе!
                </MudText>
            </CardHeaderContent>
        </MudCardHeader>

        <MudCardContent>
            <MudText Typo="Typo.body2" Class="mb-4">
                Playlist share — это веб-приложение, которое позволяет создавать совместные плейлисты,
                предоставлять доступ к ним по ссылке и слушать музыку прямо в браузере.
                Для работы требуется аккаунт Яндекс.Музыки (подписка не обязательна).
            </MudText>

            <!-- Блок с требованием регистрации для расшаривания -->
            <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Class="my-4">
                <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                    <MudIcon Icon="@Icons.Material.Filled.Share" Size="Size.Medium" />
                    <div style="flex: 1;">
                        <MudText Typo="Typo.body1" FontWeight="FontWeight.Bold">
                            Чтобы расшаривать плейлисты, необходимо зарегистрироваться
                        </MudText>
                        <MudText Typo="Typo.body2">
                            Создайте аккаунт или войдите в существующий — это займёт всего минуту.
                        </MudText>
                    </div>
                    <MudButton Variant="Variant.Filled" Color="Color.Primary" Href="/register">
                        Зарегистрироваться
                    </MudButton>
                    <MudButton Variant="Variant.Outlined" Color="Color.Primary" Href="/login">
                        Войти
                    </MudButton>
                </div>
            </MudAlert>

            <!-- Краткие преимущества -->
            <MudGrid>
                <MudItem xs="12" sm="4">
                    <MudPaper Class="pa-3 text-center" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
                        <MudIcon Icon="@Icons.Material.Filled.Link" Size="Size.Medium" Color="Color.Primary" />
                        <MudText Typo="Typo.body2" Class="mt-2">Создавайте ссылки-приглашения</MudText>
                    </MudPaper>
                </MudItem>
                <MudItem xs="12" sm="4">
                    <MudPaper Class="pa-3 text-center" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
                        <MudIcon Icon="@Icons.Material.Filled.People" Size="Size.Medium" Color="Color.Primary" />
                        <MudText Typo="Typo.body2" Class="mt-2">Совместное управление треками</MudText>
                    </MudPaper>
                </MudItem>
                <MudItem xs="12" sm="4">
                    <MudPaper Class="pa-3 text-center" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
                        <MudIcon Icon="@Icons.Material.Filled.Security" Size="Size.Medium" Color="Color.Primary" />
                        <MudText Typo="Typo.body2" Class="mt-2">Гибкие настройки доступа</MudText>
                    </MudPaper>
                </MudItem>
            </MudGrid>

            <MudDivider Class="my-4" />

            <MudText Typo="Typo.body2" Color="Color.Secondary">
                🔐 Все данные передаются по защищённому соединению, токены хранятся в зашифрованном виде.
            </MudText>
        </MudCardContent>
    </MudCard>
</MudContainer>