@attribute [Route(RouteConstants.About.Index)]
@inject NavigationManager Navigation
@inject SitePageSettingsService PageSettingsService

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

@if (_loading)
{
    <MudContainer MaxWidth="MaxWidth.Large" Class="py-16">
        <LoadingState />
    </MudContainer>
}
else
{
    <!-- Hero Section -->
    <section class="about-hero-section py-16">
        <MudContainer MaxWidth="MaxWidth.Large">
            <MudGrid Justify="Justify.Center" Spacing="4">
                <MudItem xs="12" md="6">
                    <MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Class="mb-2">درباره کارا بازار سلامت</MudChip>
                    <MudStack Spacing="3">
                        <MudText Typo="Typo.h2" Class="mb-3">
                            @(_page?.HeroTitle ?? "پلتفرم هوشمند تیم‌سازی و مدیریت فروش")
                        </MudText>
                        <MudText Typo="Typo.body1" Class="mud-text-secondary mb-4">
                            @(_page?.HeroSubtitle ?? "ما با ارائه ابزارهای نوآورانه، به کسب‌وکارها کمک می‌کنیم تا تیم‌های فروش خود را گسترش دهند و به صورت کارآمد مدیریت کنند.")
                        </MudText>
                        <MudStack Row="true" Spacing="2" Class="flex-wrap">
                            <MudButton Variant="Variant.Filled"
                                       Color="Color.Primary"
                                       Size="Size.Large"
                                       OnClick="() => Navigation.NavigateTo(RouteConstants.Main.MainPage)">
                                شروع کنید
                            </MudButton>
                            <MudButton Variant="Variant.Outlined"
                                       Color="Color.Primary"
                                       Size="Size.Large"
                                       OnClick="() => Navigation.NavigateTo(RouteConstants.Contact.Index)">
                                تماس با ما
                            </MudButton>
                        </MudStack>
                    </MudStack>
                </MudItem>
                <MudItem xs="12" md="6">
                    <MudPaper Class="pa-8 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
                        <AppImage Path="@(_page?.HeroImagePath ?? "images/team-work.jpg")"
                                  Alt="جلسه تیم فروش"
                                  ObjectFit="ObjectFit.Cover"
                                  ObjectPosition="ObjectPosition.Center"
                                  Style="width:100%"
                                  Class="rounded-xl" />
                    </MudPaper>
                </MudItem>
            </MudGrid>
        </MudContainer>
    </section>

    <MudStack Spacing="8">

        <!-- Mission & Vision -->
        <section class="py-12">
            <MudContainer MaxWidth="MaxWidth.Large">
                <MudText Typo="Typo.h3" Align="Align.Center" Class="mb-8">چشم‌انداز و مأموریت ما</MudText>
                <MudGrid Spacing="4" Justify="Justify.Center">
                    <MudItem xs="12" md="6">
                        <MudPaper Elevation="2" Class="pa-6   text-center h-100">
                            <MudIcon Icon="@Icons.Material.Filled.Visibility" Size="Size.Large" Color="Color.Primary" Class="mb-4" />
                            <MudText Typo="Typo.h5" Class="mb-3">
                                @(_settings?.VisionTitle ?? "چشم‌انداز")
                            </MudText>
                            <MudText Typo="Typo.body1" Class="mud-text-secondary">
                                @(_settings?.VisionText ?? "تبدیل شدن به پیشروترین پلتفرم مدیریت تیم‌های فروش در منطقه، با ارائه راهکارهای هوشمند و کاربرپسند برای کسب‌وکارهای کوچک و بزرگ.")
                            </MudText>
                        </MudPaper>
                    </MudItem>
                    <MudItem xs="12" md="6">
                        <MudPaper Elevation="2" Class="pa-6   text-center h-100">
                            <MudIcon Icon="@Icons.Material.Filled.TrackChanges" Size="Size.Large" Color="Color.Success" Class="mb-4" />
                            <MudText Typo="Typo.h5" Class="mb-3">
                                @(_settings?.MissionTitle ?? "مأموریت")
                            </MudText>
                            <MudText Typo="Typo.body1" Class="mud-text-secondary">
                                @(_settings?.MissionText ?? "توانمندسازی کسب‌وکارها از طریق فناوری‌های نوین، ساده‌سازی فرآیندهای پیچیده و ایجاد فرصت‌های جدید برای رشد و توسعه پایدار.")
                            </MudText>
                        </MudPaper>
                    </MudItem>
                </MudGrid>
            </MudContainer>
        </section>

        <!-- Company Values -->
        <section class="py-12 bg-grey-50">
            <MudContainer MaxWidth="MaxWidth.Large">
                <MudText Typo="Typo.h3" Align="Align.Center" Class="mb-8">ارزش‌های ما</MudText>
                <MudGrid Spacing="3" Justify="Justify.Center">
                    @if (_valueImages.Any())
                    {
                        @foreach (var value in _valueImages)
                        {
                            <MudItem xs="12" sm="6" md="4">
                                <MudPaper Elevation="2" Class="pa-4 rounded-xl  text-center">
                                    @if (!string.IsNullOrWhiteSpace(value.IconName))
                                    {
                                        <MudIcon Icon="@($"Icons.Material.Filled.{value.IconName}")" Size="Size.Large" Color="Color.Primary" Class="mb-3" />
                                    }
                                    <MudText Typo="Typo.h6" Class="mb-2">@value.Title</MudText>
                                    @if (!string.IsNullOrWhiteSpace(value.Description))
                                    {
                                        <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                            @value.Description
                                        </MudText>
                                    }
                                </MudPaper>
                            </MudItem>
                        }
                    }
                    else
                    {
                        @* Fallback: hardcoded values *@
                        <MudItem xs="12" sm="6" md="4">
                            <MudPaper Elevation="2" Class="pa-4 rounded-xl  text-center">
                                <MudIcon Icon="@Icons.Material.Filled.Security" Size="Size.Large" Color="Color.Info" Class="mb-3" />
                                <MudText Typo="Typo.h6" Class="mb-2">صداقت و شفافیت</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                    در تمامی تعاملات خود با مشتریان و همکاران، صداقت و شفافیت را سرلوحه کار خود قرار داده‌ایم.
                                </MudText>
                            </MudPaper>
                        </MudItem>
                        <MudItem xs="12" sm="6" md="4">
                            <MudPaper Elevation="2" Class="pa-4 rounded-xl  text-center">
                                <MudIcon Icon="@Icons.Material.Filled.Lightbulb" Size="Size.Large" Color="Color.Warning" Class="mb-3" />
                                <MudText Typo="Typo.h6" Class="mb-2">نوآوری</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                    همواره در پی یافتن راهکارهای جدید و بهبود فرآیندها هستیم تا بهترین تجربه را برای کاربران فراهم کنیم.
                                </MudText>
                            </MudPaper>
                        </MudItem>
                        <MudItem xs="12" sm="6" md="4">
                            <MudPaper Elevation="2" Class="pa-4 rounded-xl  text-center">
                                <MudIcon Icon="@Icons.Material.Filled.Group" Size="Size.Large" Color="Color.Success" Class="mb-3" />
                                <MudText Typo="Typo.h6" Class="mb-2">مشتری‌مداری</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                    رضایت و موفقیت مشتریان اولویت اصلی ما است و تمامی تصمیمات خود را بر اساس نیازهای آنها می‌گیریم.
                                </MudText>
                            </MudPaper>
                        </MudItem>
                        <MudItem xs="12" sm="6" md="4">
                            <MudPaper Elevation="2" Class="pa-4 rounded-xl  text-center">
                                <MudIcon Icon="@Icons.Material.Filled.Verified" Size="Size.Large" Color="Color.Primary" Class="mb-3" />
                                <MudText Typo="Typo.h6" Class="mb-2">کیفیت</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                    به کیفیت محصولات و خدمات خود افتخار می‌کنیم و همواره استانداردهای بالایی را رعایت می‌کنیم.
                                </MudText>
                            </MudPaper>
                        </MudItem>
                        <MudItem xs="12" sm="6" md="4">
                            <MudPaper Elevation="2" Class="pa-4 rounded-xl  text-center">
                                <MudIcon Icon="@Icons.Material.Filled.AccessTime" Size="Size.Large" Color="Color.Secondary" Class="mb-3" />
                                <MudText Typo="Typo.h6" Class="mb-2">پاسخگویی</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                    به سرعت به نیازهای مشتریان پاسخ می‌دهیم و پشتیبانی ۲۴ ساعته را فراهم کرده‌ایم.
                                </MudText>
                            </MudPaper>
                        </MudItem>
                        <MudItem xs="12" sm="6" md="4">
                            <MudPaper Elevation="2" Class="pa-4 rounded-xl  text-center">
                                <MudIcon Icon="@Icons.Material.Filled.EmergencyRecording" Size="Size.Large" Color="Color.Error" Class="mb-3" />
                                <MudText Typo="Typo.h6" Class="mb-2">پایداری</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                    به دنبال ایجاد ارزش بلندمدت برای مشتریان و جامعه هستیم و به توسعه پایدار متعهد هستیم.
                                </MudText>
                            </MudPaper>
                        </MudItem>
                    }
                </MudGrid>
            </MudContainer>
        </section>

        <!-- Team Section -->
        <section class="pb-12 bg-grey-50">
            <MudContainer MaxWidth="MaxWidth.Large">
                <MudText Typo="Typo.h3" Align="Align.Center" Class="mb-8">تیم ما</MudText>
                <MudGrid Spacing="4" Justify="Justify.Center">
                    @if (_teamImages.Any())
                    {
                        @foreach (var member in _teamImages)
                        {
                            <MudItem xs="12" sm="6" md="4">
                                <MudPaper Elevation="2" Class="pa-4   text-center">
                                    <MudAvatar Size="Size.Large" Class="mb-3">
                                        @if (!string.IsNullOrWhiteSpace(member.ImagePath))
                                        {
                                            <AppImage Path="@member.ImagePath"
                                                      ObjectFit="ObjectFit.Cover"
                                                      ObjectPosition="ObjectPosition.Center" />
                                        }
                                        else
                                        {
                                            <MudIcon Icon="@Icons.Material.Filled.Person" />
                                        }
                                    </MudAvatar>
                                    <MudText Typo="Typo.h6" Class="mb-1">@member.Title</MudText>
                                    @if (!string.IsNullOrWhiteSpace(member.Subtitle))
                                    {
                                        <MudText Typo="Typo.body2" Class="mud-text-secondary mb-2">@member.Subtitle</MudText>
                                    }
                                    @if (!string.IsNullOrWhiteSpace(member.Description))
                                    {
                                        <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                            @member.Description
                                        </MudText>
                                    }
                                </MudPaper>
                            </MudItem>
                        }
                    }
                    else
                    {
                        @* Fallback: hardcoded team *@
                        <MudItem xs="12" sm="6" md="4">
                            <MudPaper Elevation="2" Class="pa-4   text-center">
                                <MudAvatar Size="Size.Large" Class="mb-3">
                                    <MudImage ObjectFit="ObjectFit.Cover" ObjectPosition="ObjectPosition.Center" Src="images/avatar3.jpg" />
                                </MudAvatar>
                                <MudText Typo="Typo.h6" Class="mb-1">علی رضایی</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary mb-2">مدیرعامل</MudText>
                                <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                    بیش از ۱۰ سال تجربه در حوزه فناوری و مدیریت کسب‌وکار
                                </MudText>
                            </MudPaper>
                        </MudItem>
                        <MudItem xs="12" sm="6" md="4">
                            <MudPaper Elevation="2" Class="pa-4   text-center">
                                <MudAvatar Size="Size.Large" Class="mb-3">
                                    <MudImage ObjectFit="ObjectFit.Cover" ObjectPosition="ObjectPosition.Center" Src="images/avatar4.jpg" />
                                </MudAvatar>
                                <MudText Typo="Typo.h6" Class="mb-1">مریم احمدی</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary mb-2">مدیر محصول</MudText>
                                <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                    متخصص در طراحی تجربه کاربری و توسعه محصول
                                </MudText>
                            </MudPaper>
                        </MudItem>
                        <MudItem xs="12" sm="6" md="4">
                            <MudPaper Elevation="2" Class="pa-4   text-center">
                                <MudAvatar Size="Size.Large" Class="mb-3">
                                    <MudImage ObjectFit="ObjectFit.Cover" ObjectPosition="ObjectPosition.Center" Src="images/avatar5.jpg" />
                                </MudAvatar>
                                <MudText Typo="Typo.h6" Class="mb-1">حسن کریمی</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary mb-2">مدیر فنی</MudText>
                                <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                    مهندس نرم‌افزار با تخصص در معماری سیستم‌های توزیع‌شده
                                </MudText>
                            </MudPaper>
                        </MudItem>
                    }
                </MudGrid>
            </MudContainer>
        </section>
    </MudStack>
}

