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

<PageTitle>درباره ما | فرصت</PageTitle>

<!-- 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">
                        پلتفرم هوشمند شبکه‌سازی و مدیریت تیم
                    </MudText>
                    <MudText Typo="Typo.body1" Class="mud-text-secondary mb-4">
                        ما با ارائه ابزارهای نوآورانه، به کسب‌وکارها کمک می‌کنیم تا شبکه‌های فروش خود را گسترش دهند و تیم‌های خود را به صورت کارآمد مدیریت کنند.
                    </MudText>
                    <MudStack Row="true" Spacing="2">
                        <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="ScrollToContact">
                            تماس با ما
                        </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);">
                    <MudImage Src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=800&auto=format&fit=crop"
                              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 mud-typography-subtitle1">چشم‌انداز و مأموریت ما</MudText>
            <MudGrid Spacing="4" Justify="Justify.Center">
                <MudItem xs="12" md="6">
                    <MudPaper Elevation="3" Class="pa-6 rounded-2xl mud-theme-surface 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">چشم‌انداز</MudText>
                        <MudText Typo="Typo.body1" Class="mud-text-secondary">
                            تبدیل شدن به پیشروترین پلتفرم مدیریت شبکه‌های فروش در منطقه، با ارائه راهکارهای هوشمند و کاربرپسند برای کسب‌وکارهای کوچک و بزرگ.
                        </MudText>
                    </MudPaper>
                </MudItem>
                <MudItem xs="12" md="6">
                    <MudPaper Elevation="3" Class="pa-6 rounded-2xl mud-theme-surface 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">مأموریت</MudText>
                        <MudText Typo="Typo.body1" Class="mud-text-secondary">
                            توانمندسازی کسب‌وکارها از طریق فناوری‌های نوین، ساده‌سازی فرآیندهای پیچیده و ایجاد فرصت‌های جدید برای رشد و توسعه پایدار.
                        </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 mud-typography-subtitle1">ارزش‌های ما</MudText>
            <MudGrid Spacing="3" Justify="Justify.Center">
                <MudItem xs="12" sm="6" md="4">
                    <MudPaper Elevation="2" Class="pa-4 rounded-xl mud-theme-surface 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 mud-theme-surface 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 mud-theme-surface 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 mud-theme-surface 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 mud-theme-surface 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 mud-theme-surface 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 mud-typography-subtitle1">تیم ما</MudText>
            <MudGrid Spacing="4" Justify="Justify.Center">
                <MudItem xs="12" sm="6" md="4">
                    <MudPaper Elevation="3" Class="pa-4 rounded-2xl mud-theme-surface text-center">
                        <MudAvatar Size="Size.Large" Class="mb-3">
                            <MudImage ObjectFit="ObjectFit.Cover"
                                      ObjectPosition="ObjectPosition.Center"
                                      Src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=256&auto=format&fit=crop" />
                        </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="3" Class="pa-4 rounded-2xl mud-theme-surface text-center">
                        <MudAvatar Size="Size.Large" Class="mb-3">
                            <MudImage ObjectFit="ObjectFit.Cover"
                                      ObjectPosition="ObjectPosition.Center"
                                      Src="https://images.unsplash.com/photo-1494790108755-2616b612b786?q=80&w=256&auto=format&fit=crop" />
                        </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="3" Class="pa-4 rounded-2xl mud-theme-surface text-center">
                        <MudAvatar Size="Size.Large" Class="mb-3">
                            <MudImage ObjectFit="ObjectFit.Cover"
                                      ObjectPosition="ObjectPosition.Center"
                                      Src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&auto=format&fit=crop" />
                        </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>