@attribute [Route(RouteConstants.Main.MainPage)]
@inject NavigationManager Navigation

<PageTitle>FrontOffice Platform</PageTitle>

<MudContainer Class="pa-6" MaxWidth="MaxWidth.Large">
    <MudGrid GutterSize="GutterSize.Medium">
        <MudItem xs="12" md="6">
            <MudText Typo="Typo.h3" Class="mb-2">Grow your capital with curated investment packages</MudText>
            <MudText Typo="Typo.body1" Class="mb-4">
                FrontOffice combines product ownership with network-based commissions. Explore verified packages, track your earnings, and manage your team in a single dashboard.
            </MudText>
            <MudStack Direction="Row" Spacing="2">
                <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(()=>NavigateToAuth(true))" StartIcon="@Icons.Material.Filled.PlayArrow">
                    Get Started
                </MudButton>
                <MudButton Variant="Variant.Outlined" Color="Color.Primary" OnClick="@(()=>NavigateToAuth(false))">
                    Sign In
                </MudButton>
            </MudStack>
        </MudItem>
        <MudItem xs="12" md="6">
            <MudPaper Elevation="1" Class="pa-4 d-flex flex-column gap-3">
                <MudStack Spacing="2">
                    <MudText Typo="Typo.subtitle1" Color="Color.Primary">Why FrontOffice?</MudText>
                    <MudStack Direction="Row" AlignItems="AlignItems.Center" Spacing="1">
                        <MudIcon Icon="@Icons.Material.Filled.TrendingUp" Color="Color.Primary" />
                        <MudText Typo="Typo.body2">Hybrid investment + product ownership ensures tangible value.</MudText>
                    </MudStack>
                    <MudStack Direction="Row" AlignItems="AlignItems.Center" Spacing="1">
                        <MudIcon Icon="@Icons.Material.Filled.Groups" Color="Color.Primary" />
                        <MudText Typo="Typo.body2">Binary network model with transparent genealogy tracking.</MudText>
                    </MudStack>
                    <MudStack Direction="Row" AlignItems="AlignItems.Center" Spacing="1">
                        <MudIcon Icon="@Icons.Material.Filled.Payments" Color="Color.Primary" />
                        <MudText Typo="Typo.body2">Instant commission reports and monthly payouts.</MudText>
                    </MudStack>
                </MudStack>
            </MudPaper>
        </MudItem>
    </MudGrid>

    <MudDivider Class="my-6" />

    <MudStack Spacing="1" Class="mb-4" AlignItems="AlignItems.Center">
        <MudText Typo="Typo.h4">Featured Packages</MudText>
        <MudText Typo="Typo.body2" Align="Align.Center" Style="max-width:600px;">
            Discover curated bundles that combine digital ownership, physical products, and network rewards. Choose the plan that matches your investment horizon.
        </MudText>
    </MudStack>

    <MudGrid GutterSize="GutterSize.Medium">
        @foreach (var package in Packages)
        {
            <MudItem xs="12" sm="6" lg="4">
                <MudCard Class="h-100 d-flex flex-column">
                    <MudCardMedia Image="@package.ImageUrl" Height="180" />
                    <MudCardContent Class="d-flex flex-column gap-2">
                        <MudText Typo="Typo.h6">@package.Title</MudText>
                        <MudText Typo="Typo.subtitle2" Color="Color.Primary">@package.Price</MudText>
                        <MudText Typo="Typo.body2" Class="mud-truncate">@package.Summary</MudText>
                    </MudCardContent>
                    <MudCardActions Class="mt-auto d-flex justify-space-between pa-4">
                        <MudButton Variant="Variant.Filled"
                                   Color="Color.Primary"
                                   StartIcon="@Icons.Material.Filled.ShoppingCart"
                                   OnClick="@(()=>HandlePurchase(package))">
                            Buy
                        </MudButton>
                        <MudButton Variant="Variant.Outlined"
                                   Color="Color.Primary"
                                   OnClick="@(()=>HandleDetails(package))">
                            Details
                        </MudButton>
                    </MudCardActions>
                </MudCard>
            </MudItem>
        }
    </MudGrid>

    <MudDivider Class="my-6" />

    <MudPaper Elevation="1" Class="pa-6 d-flex flex-column flex-md-row align-center justify-space-between gap-4">
        <MudStack Spacing="1">
            <MudText Typo="Typo.h5">Ready to build your FrontOffice?</MudText>
            <MudText Typo="Typo.body2">
                Start with a starter package, invite your partners, and monitor your income in real time. Our support team is here to help you onboard smoothly.
            </MudText>
        </MudStack>
        <MudStack Direction="Row" Spacing="2">
            <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(()=>NavigateToAuth(true))">
                Create Account
            </MudButton>
            <MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="ScrollToPackages">
                View Packages
            </MudButton>
        </MudStack>
    </MudPaper>
</MudContainer>