FrontOffice/src/FrontOffice.Main/Pages/Index.razor

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

<PageTitle>صفحه اصلی</PageTitle>

<!-- HERO -->
<section id="hero" class="hero-section">
    <MudContainer MaxWidth="MaxWidth.Large" Class="py-16">
        <MudGrid Justify="Justify.Center" AlignItems="AlignItems.Center" Spacing="3">
            <MudItem xs="12" md="6">
                <MudChip T="string" Color="Color.Primary" Variant="Variant.Filled" Class="mb-3">جدید</MudChip>
                <MudText Typo="Typo.h3" Class="mud-typography-subtitle1 lh-tight mb-1 hero-title">
                    ساخت شبکه‌های هوشمند با فرصت
                </MudText>
                <MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-6">
                    پلن باینری، شجره‌نامه و گزارش‌های کارمزدی شفاف — همه در یک پنل بلِیزر.
                </MudText>

                <MudStack Row="true" Spacing="2" Class="mb-2">
                    <MudButton Color="Color.Primary" OnClick="@(() => Navigation.NavigateTo("#pricing"))">مشاهده قیمت‌ها</MudButton>
                    <MudButton Variant="Variant.Outlined" Color="Color.Inherit" OnClick="@(() => Navigation.NavigateTo("#features"))">معرفی پکیج‌ها</MudButton>
                </MudStack>
            </MudItem>

            <MudItem xs="12" md="6">
                <MudPaper Elevation="8" Class="pa-0 rounded-2xl hero-media">
                    <MudImage Src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=1200&auto=format&fit=crop"
                              Alt="جلسه تیم فروش و شبکه‌سازی"
                              ObjectFit="ObjectFit.Cover"
                              ObjectPosition="ObjectPosition.Center"
                              Style="width:100%"
                              Class="rounded-2xl" />
                    <div class="hero-overlay"></div>
                    <div class="hero-badge px-2 pb-2">
                        <MudText Typo="Typo.subtitle2">نمای لحظه‌ای</MudText>
                        <MudText Typo="Typo.caption" Class="mud-text-secondary">۱۲۸۴ عضو فعال · ‎$۴۸,۹۷۰‎ پرداختی ماه گذشته</MudText>
                    </div>
                </MudPaper>
            </MudItem>
        </MudGrid>
    </MudContainer>
</section>

<!-- STATS -->
<section class="stats-strip">
    <MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
        <MudGrid Spacing="2" Justify="Justify.SpaceAround">
            <MudItem xs="6" md="3">
                <MudPaper Outlined="true" Class="pa-4 rounded-lg">
                    <MudText Typo="Typo.h4" Align="Align.Center" Class="mud-typography-subtitle1">+۵۰٪</MudText>
                    <MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">رشد میانگین شبکه</MudText>
                </MudPaper>
            </MudItem>
            <MudItem xs="6" md="3">
                <MudPaper Outlined="true" Class="pa-4 rounded-lg text-center">
                    <MudText Typo="Typo.h4" Align="Align.Center" Class="mud-typography-subtitle1">۹۹٫۹٪</MudText>
                    <MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">آپ‌تایم سرویس</MudText>
                </MudPaper>
            </MudItem>
            <MudItem xs="6" md="3">
                <MudPaper Outlined="true" Class="pa-4 rounded-lg text-center">
                    <MudText Typo="Typo.h4" Align="Align.Center" Class="mud-typography-subtitle1">۳ روز</MudText>
                    <MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">میانگین زمان استقرار</MudText>
                </MudPaper>
            </MudItem>
            <MudItem xs="6" md="3">
                <MudPaper Outlined="true" Class="pa-4 rounded-lg text-center">
                    <MudText Typo="Typo.h4" Align="Align.Center" Class="mud-typography-subtitle1">+۲۰ کشور</MudText>
                    <MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">پوشش ارسال کد</MudText>
                </MudPaper>
            </MudItem>
        </MudGrid>
    </MudContainer>
</section>

<!-- FEATURES: معرفی پکیج‌ها -->
<section id="features" class="py-14">
    <MudContainer MaxWidth="MaxWidth.Large">
        <MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 mud-typography-subtitle1">پکیج‌ها و امکانات</MudText>
        <MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">بر اساس اندازهٔ تیم خود انتخاب کنید.</MudText>

        <MudGrid Spacing="3" Justify="Justify.Center" Class="stretch-grid">
            @foreach (var p in _packs)
            {
                <MudItem xs="12" md="4" Class="d-flex">
                    <MudPaper Elevation="2" Class="rounded-2xl d-flex flex-column flex-grow-1 overflow-hidden">
                        <MudImage Src="@p.Image"
                                  Alt="@p.Title"
                                  Height="300"
                                  ObjectFit="ObjectFit.Cover"
                                  ObjectPosition="ObjectPosition.Center"
                                  Class="feature-img" />
                        <div class="pa-5">
                            <MudText Typo="Typo.h6" Class="mb-1">@(p.Title)</MudText>
                            <MudText Typo="Typo.body2" Class="mud-text-secondary mb-2">@(p.Body)</MudText>
                            <MudList T="string" Dense="true">
                                @foreach (var item in p.Items)
                                {
                                    <MudListItem T="string" Value="@item">
                                        <MudIcon Icon="@Icons.Material.Filled.Verified" Size="Size.Small" Class="ml-2" />
                                        @item
                                    </MudListItem>
                                }
                            </MudList>
                        </div>
                    </MudPaper>
                </MudItem>
            }
        </MudGrid>
    </MudContainer>
</section>

<!-- PRICING -->
<section id="pricing" class="py-14">
    <MudContainer MaxWidth="MaxWidth.Large">
        <MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 mud-typography-subtitle1">قیمت‌گذاری</MudText>
        <MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">قیمت‌ها به تومان — بدون هزینهٔ پنهان.</MudText>

        <MudGrid Spacing="3" Justify="Justify.Center">
            @foreach (var p in _plans)
            {
                <MudItem xs="12" md="4" Class="d-flex">
                    <MudCard Class="rounded-2xl d-flex flex-column flex-grow-1">
                        <MudCardContent Class="pa-6">
                            <MudText Typo="Typo.overline" Class="mud-text-secondary">@(p.Name)</MudText>
                            <MudText Typo="Typo.h4" Class="mud-typography-subtitle1 mb-2">@p.Price</MudText>
                                <MudList T="string" Dense="true">
                                    @foreach (var item in p.Features)
                                {
                                    <MudListItem T="string" Value="@item">
                                        <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Class="ml-2" />
                                        @(item)
                                    </MudListItem>
                                }
                            </MudList>
                        </MudCardContent>
                        <MudCardActions Class="pa-4 pt-0 d-flex justify-center">
                            <MudButton Color="Color.Primary" FullWidth="true" Variant="@(p.Highlight ? Variant.Filled : Variant.Outlined)">انتخاب پکیج</MudButton>
                        </MudCardActions>
                    </MudCard>
                </MudItem>
            }
        </MudGrid>
    </MudContainer>
</section>

<!-- TESTIMONIALS -->
<section id="testimonials" class="py-14 testimonials">
    <MudContainer MaxWidth="MaxWidth.Large">
        <MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 mud-typography-subtitle1">اعتماد مشتریان</MudText>
        <MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">بخشی از تجربهٔ استفاده از «فرصت».</MudText>

        <MudGrid Spacing="3" Justify="Justify.Center">
            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="rounded-2xl pa-5">
                    <MudStack Spacing="2">
                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                            <MudAvatar>
                                <MudImage ObjectFit="ObjectFit.Cover"
                                          ObjectPosition="ObjectPosition.Center"
                                          Src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=256&auto=format&fit=crop"></MudImage>
                            </MudAvatar>
                            <div>
                                <MudText Typo="Typo.subtitle2">شرکت سینا نت</MudText>
                                <MudText Typo="Typo.overline" Class="mud-text-secondary">مدیر عملیات</MudText>
                            </div>
                        </MudStack>
                        <MudText Typo="Typo.body2">
                            «با فرصت، محاسبهٔ کارمزدها و پایش تیم‌ها بدون اکسل و دردسر انجام می‌شود.»
                        </MudText>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="rounded-2xl pa-5">
                    <MudStack Spacing="2">
                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                            <MudAvatar>
                                <MudImage ObjectFit="ObjectFit.Cover"
                                          ObjectPosition="ObjectPosition.Center"
                                          Src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=256&auto=format&fit=crop"></MudImage>
                            </MudAvatar>
                            <div>
                                <MudText Typo="Typo.subtitle2">هولدینگ آریانا</MudText>
                                <MudText Typo="Typo.overline" Class="mud-text-secondary">مدیر فروش</MudText>
                            </div>
                        </MudStack>
                        <MudText Typo="Typo.body2">
                            «شجره‌نامهٔ بصری و گزارش‌های دقیق باعث شد رشد تیم را لحظه‌ای ببینیم.»
                        </MudText>
                    </MudStack>
                </MudPaper>
            </MudItem>
            
        </MudGrid>
    </MudContainer>
</section>

<!-- FAQ -->
<section id="faq" class="py-14">
    <MudContainer MaxWidth="MaxWidth.Large">
        <MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 mud-typography-subtitle1">سوالات متداول</MudText>
        <MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">پاسخ به سوالات رایج راه‌اندازی و صورتحساب.</MudText>

        <div class="mx-auto max-w-800">
            <MudExpansionPanels Elevation="1" Square="false" Class="rounded-2xl">
                @foreach (var q in _faqs)
                {
                    <MudExpansionPanel Text="@q.Q">
                        <MudText Typo="Typo.body2">@q.A</MudText>
                        </MudExpansionPanel>
                }
            </MudExpansionPanels>
        </div>
    </MudContainer>
</section>

<!-- CTA -->
<section id="contact" class="py-14">
    <MudContainer MaxWidth="MaxWidth.Medium" Class="text-center">
        <MudPaper Elevation="2" Class="pa-4 rounded-2xl">
            <MudText Typo="Typo.h5" Class="mud-typography-subtitle1 mb-2">آمادهٔ راه‌اندازی هستید؟</MudText>
            <MudText Typo="Typo.body1" Class="mud-text-secondary mb-4">ایمیل‌تان را بگذارید تا دسترسی زودهنگام بگیرید.</MudText>
            <MudStack Row="true" Spacing="2" Justify="Justify.Center">
                <MudTextField @bind-Value="_email" For="@(() => _email)" Placeholder="you@company.com" Variant="Variant.Outlined" Class="max-w-56" />
                <MudButton Color="Color.Primary" OnClick="@JoinWaitlist">درخواست دسترسی</MudButton>
            </MudStack>
        </MudPaper>
    </MudContainer>
</section>