@attribute [Route(RouteConstants.Club.Features)]
@using FrontOffice.Main.Utilities
@using MudBlazor

<PageTitle>ویژگی‌های باشگاه مشتریان</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <MudStack Spacing="3">
        <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
            <MudText Typo="Typo.h5">ویژگی‌های باشگاه مشتریان</MudText>
            <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ArrowBack" Href="@RouteConstants.Club.Membership">بازگشت</MudButton>
        </MudStack>

        <MudPaper Elevation="2" Class="pa-4 rounded-lg">
            <MudText Typo="Typo.h6" Class="mb-3">چرا باشگاه مشتریان؟</MudText>
            <MudText Typo="Typo.body1" Class="mb-2">
                با عضویت در باشگاه مشتریان فورست، از تخفیف‌های ویژه، امتیازات خرید و خدمات اختصاصی بهره‌مند شوید.
            </MudText>
        </MudPaper>

        <MudGrid Spacing="3">
            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack Spacing="2">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Discount" Color="Color.Primary" Size="Size.Large" />
                            <MudText Typo="Typo.h6" Color="Color.Primary">تخفیف‌های ویژه</MudText>
                        </MudStack>
                        <MudText Typo="Typo.body2">
                            • تخفیف 10% تا 30% برای تمام محصولات<br />
                            • تخفیف‌های فصلی و مناسبتی اختصاصی<br />
                            • پیشنهادات ویژه برای اعضای باشگاه<br />
                            • کد تخفیف اختصاصی ماهانه
                        </MudText>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack Spacing="2">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Diamond" Color="Color.Secondary" Size="Size.Large" />
                            <MudText Typo="Typo.h6" Color="Color.Secondary">امتیاز خرید</MudText>
                        </MudStack>
                        <MudText Typo="Typo.body2">
                            • دریافت امتیاز برای هر خرید<br />
                            • تبدیل امتیاز به تخفیف باشگاه<br />
                            • امتیاز ویژه در روزهای خاص<br />
                            • قابلیت انتقال امتیاز به دوستان
                        </MudText>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack Spacing="2">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.LocalShipping" Color="Color.Success" Size="Size.Large" />
                            <MudText Typo="Typo.h6" Color="Color.Success">ارسال رایگان</MudText>
                        </MudStack>
                        <MudText Typo="Typo.body2">
                            • ارسال رایگان برای خریدهای بالای 500 هزار تومان<br />
                            • اولویت در ارسال سفارشات<br />
                            • ارسال اکسپرس با تخفیف 50%<br />
                            • امکان ارسال به چند آدرس
                        </MudText>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack Spacing="2">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Support" Color="Color.Info" Size="Size.Large" />
                            <MudText Typo="Typo.h6" Color="Color.Info">پشتیبانی اختصاصی</MudText>
                        </MudStack>
                        <MudText Typo="Typo.body2">
                            • پشتیبانی 24/7 برای اعضای باشگاه<br />
                            • مشاوره خرید تخصصی<br />
                            • خط ویژه پاسخگویی<br />
                            • پیگیری سریع‌تر سفارشات
                        </MudText>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack Spacing="2">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Groups" Color="Color.Warning" Size="Size.Large" />
                            <MudText Typo="Typo.h6" Color="Color.Warning">درآمد شبکه</MudText>
                        </MudStack>
                        <MudText Typo="Typo.body2">
                            • دریافت کمیسیون از خریدهای زیرمجموعه<br />
                            • سیستم باینری درختی<br />
                            • محاسبه خودکار درآمد هفتگی<br />
                            • امکان برداشت درآمد شبکه
                        </MudText>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="pa-4 rounded-lg" Style="height: 100%;">
                    <MudStack Spacing="2">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Event" Color="Color.Tertiary" Size="Size.Large" />
                            <MudText Typo="Typo.h6" Color="Color.Tertiary">رویدادهای ویژه</MudText>
                        </MudStack>
                        <MudText Typo="Typo.body2">
                            • دعوت به رویدادهای اختصاصی<br />
                            • پیش‌فروش محصولات جدید<br />
                            • وبینارهای آموزشی رایگان<br />
                            • جوایز و مسابقات ماهانه
                        </MudText>
                    </MudStack>
                </MudPaper>
            </MudItem>
        </MudGrid>

        <MudPaper Elevation="2" Class="pa-4 rounded-lg">
            <MudText Typo="Typo.h6" Class="mb-3">چگونه عضو شویم؟</MudText>
            <MudStepper Orientation="Orientation.Horizontal" Color="Color.Primary">
                <MudStep Title="انتخاب بسته">
                    <MudText>بسته عضویت مناسب خود را انتخاب کنید</MudText>
                </MudStep>
                <MudStep Title="پرداخت">
                    <MudText>هزینه عضویت را پرداخت کنید</MudText>
                </MudStep>
                <MudStep Title="فعال‌سازی">
                    <MudText>عضویت شما فورا فعال می‌شود</MudText>
                </MudStep>
                <MudStep Title="استفاده">
                    <MudText>از مزایای باشگاه لذت ببرید</MudText>
                </MudStep>
            </MudStepper>
        </MudPaper>

        <MudButton Variant="Variant.Filled" 
                   Color="Color.Primary" 
                   FullWidth="true" 
                   Size="Size.Large"
                   StartIcon="@Icons.Material.Filled.CheckCircle"
                   Href="@RouteConstants.Club.Membership">
            همین حالا عضو شوید
        </MudButton>
    </MudStack>
</MudContainer>