FrontOffice/src/FrontOffice.Main/Pages/FAQ.razor

@attribute [Route(RouteConstants.FAQ.Index)]
@inject NavigationManager Navigation

<PageTitle>سوالات متداول | کارا بازار سلامت</PageTitle>

<!-- Hero Section -->
<section class="faq-hero-section py-16">
    <MudContainer MaxWidth="MaxWidth.Large">
        <MudStack AlignItems="AlignItems.Center" Spacing="4">
            <MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Class="mb-2">سوالات متداول</MudChip>
            <MudText Typo="Typo.h2" Align="Align.Center" Class="mb-3">
                پاسخ سوالات شما در اینجا
            </MudText>
            <MudText Typo="Typo.body1" Align="Align.Center" Class="mud-text-secondary mb-6" MaxWidth="600px">
                در این بخش به پرتکرارترین سوالات کاربران پاسخ داده‌ایم. اگر سوال شما در لیست نیست، با تیم پشتیبانی ما تماس بگیرید.
            </MudText>

            <!-- Search Box -->
            <MudPaper Elevation="2" Class="pa-4  w-100" Style="max-width: 500px;">
                <MudTextField @bind-Value="_searchQuery"
                              Label="جستجو در سوالات..."
                              Variant="Variant.Outlined"
                              Adornment="Adornment.Start"
                              AdornmentIcon="@Icons.Material.Filled.Search"
                              FullWidth="true"
                              Immediate="true"
                              Placeholder="سوال خود را تایپ کنید" />
            </MudPaper>
        </MudStack>
    </MudContainer>
</section>

<MudStack Spacing="6">

    <!-- FAQ Categories -->
    <section class="py-8">
        <MudContainer MaxWidth="MaxWidth.Large">
            <MudText Typo="Typo.h4" Align="Align.Center" Class="mb-8">دسته‌بندی سوالات</MudText>
            <MudGrid Spacing="3" Justify="Justify.Center">
                @foreach (var category in _categories)
                {
                    <MudItem xs="12" sm="6" md="4">
                        <MudPaper Elevation="2" Class="pa-4 rounded-xl  cursor-pointer h-100"
                                   OnClick="() => ScrollToCategory(category.Id)">
                            <MudStack AlignItems="AlignItems.Center" Spacing="3">
                                <MudIcon Icon="@category.Icon" Size="Size.Large" Color="Color.Primary" />
                                <MudText Typo="Typo.h6" Align="Align.Center">@category.Title</MudText>
                                <MudText Typo="Typo.caption" Align="Align.Center" Class="mud-text-secondary">
                                    @category.Description
                                </MudText>
                                <MudChip T="string" Color="Color.Info" Variant="Variant.Outlined" Size="Size.Small">
                                    @category.QuestionCount سوال
                                </MudChip>
                            </MudStack>
                        </MudPaper>
                    </MudItem>
                }
            </MudGrid>
        </MudContainer>
    </section>

    <!-- FAQ Content -->
    <section class="py-8">
        <MudContainer MaxWidth="MaxWidth.Large">
            @if (!string.IsNullOrWhiteSpace(_searchQuery))
            {
                <!-- Search Results -->
                <MudStack Spacing="4">
                    <MudText Typo="Typo.h5" Class="mb-4">نتایج جستجو برای "@_searchQuery"</MudText>
                    @if (_filteredQuestions.Any())
                    {
                        <MudExpansionPanels Square="false" Class="">
                            @foreach (var question in _filteredQuestions)
                            {
                                <MudExpansionPanel Text="@question.Question">
                                    <MudText Typo="Typo.body1">@((MarkupString)question.Answer)</MudText>
                                </MudExpansionPanel>
                            }
                        </MudExpansionPanels>
                    }
                    else
                    {
                        <MudStack AlignItems="AlignItems.Center" Class="py-8">
                            <MudIcon Icon="@Icons.Material.Filled.SearchOff" Size="Size.Large" Color="Color.Default" />
                            <MudText Typo="Typo.h6" Class="mt-2">نتیجه‌ای یافت نشد</MudText>
                            <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                سعی کنید از کلمات کلیدی دیگری استفاده کنید.
                            </MudText>
                        </MudStack>
                    }
                </MudStack>
            }
            else
            {
                <!-- Categorized FAQ -->
                @foreach (var category in _categories)
                {
                    <MudStack Spacing="4" Class="mb-8">
                        <div id="@category.Id">
                            <MudText Typo="Typo.h5" Class="mb-4">@category.Title</MudText>
                            <MudExpansionPanels Square="false" Class="">
                                @foreach (var question in category.Questions)
                                {
                                    <MudExpansionPanel Text="@question.Question">
                                        <MudText Typo="Typo.body1">@((MarkupString)question.Answer)</MudText>
                                    </MudExpansionPanel>
                                }
                            </MudExpansionPanels>
                        </div>
                    </MudStack>
                }
            }
        </MudContainer>
    </section>

    <!-- Contact Support -->
    <section class="py-12 bg-grey-50">
        <MudContainer MaxWidth="MaxWidth.Large">
            <MudPaper Elevation="2" Class="pa-8   text-center">
                <MudIcon Icon="@Icons.Material.Filled.ContactSupport" Size="Size.Large" Color="Color.Primary" Class="mb-4" />
                <MudText Typo="Typo.h4" Class="mb-3">سوال شما پاسخ داده نشد؟</MudText>
                <MudText Typo="Typo.body1" Class="mud-text-secondary mb-6">
                    تیم پشتیبانی ما آماده پاسخگویی به سوالات شما است. از طریق راه‌های زیر با ما تماس بگیرید.
                </MudText>

                <MudGrid Spacing="4" Justify="Justify.Center">
                    <MudItem xs="12" md="4">
                        <MudStack AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Primary" Size="Size.Large" />
                            <MudText Typo="Typo.h6">ایمیل</MudText>
                            <MudText Typo="Typo.body2" Class="mud-text-secondary">support@kbs1.co</MudText>
                            <MudButton Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Small">
                                ارسال ایمیل
                            </MudButton>
                        </MudStack>
                    </MudItem>

                    <MudItem xs="12" md="4">
                        <MudStack AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Chat" Color="Color.Success" Size="Size.Large" />
                            <MudText Typo="Typo.h6">چت آنلاین</MudText>
                            <MudText Typo="Typo.body2" Class="mud-text-secondary">پاسخگویی ۲۴ ساعته</MudText>
                            <MudButton Variant="Variant.Filled" Color="Color.Success" Size="Size.Small">
                                شروع چت
                            </MudButton>
                        </MudStack>
                    </MudItem>

                    <MudItem xs="12" md="4">
                        <MudStack AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Phone" Color="Color.Warning" Size="Size.Large" />
                            <MudText Typo="Typo.h6">تلفن</MudText>
                            <MudText Typo="Typo.body2" Class="mud-text-secondary">۰۲۱-۱۲۳۴۵۶۷۸</MudText>
                            <MudButton Variant="Variant.Outlined" Color="Color.Warning" Size="Size.Small">
                                تماس تلفنی
                            </MudButton>
                        </MudStack>
                    </MudItem>
                </MudGrid>
            </MudPaper>
        </MudContainer>
    </section>

</MudStack>