@attribute [Route(RouteConstants.Contact.Index)]

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

<!-- Hero Section -->
<section class="contact-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>
        </MudStack>
    </MudContainer>
</section>

<MudStack Spacing="6">

    <!-- Contact Form & Info -->
    <section class="py-8">
        <MudContainer MaxWidth="MaxWidth.Large">
            <MudGrid Spacing="6">
                <!-- Contact Form -->
                <MudItem xs="12" lg="8">
                    <MudPaper Elevation="3" Class="pa-6 rounded-2xl mud-theme-surface">
                        <MudText Typo="Typo.h5" Class="mb-6 mud-typography-subtitle1">فرم تماس</MudText>

                        <MudForm @ref="_form" Model="_contactForm">
                            <MudGrid Spacing="4">
                                <MudItem xs="12" md="6">
                                    <MudTextField @bind-Value="_contactForm.FirstName"
                                                  For="@(() => _contactForm.FirstName)"
                                                  Label="نام"
                                                  Variant="Variant.Outlined"
                                                  Required="true"
                                                  RequiredError="وارد کردن نام الزامی است." />
                                </MudItem>

                                <MudItem xs="12" md="6">
                                    <MudTextField @bind-Value="_contactForm.LastName"
                                                  For="@(() => _contactForm.LastName)"
                                                  Label="نام خانوادگی"
                                                  Variant="Variant.Outlined"
                                                  Required="true"
                                                  RequiredError="وارد کردن نام خانوادگی الزامی است." />
                                </MudItem>

                                <MudItem xs="12" md="6">
                                    <MudTextField @bind-Value="_contactForm.Email"
                                                  For="@(() => _contactForm.Email)"
                                                  Label="ایمیل"
                                                  Variant="Variant.Outlined"
                                                  InputType="InputType.Email"
                                                  Required="true"
                                                  RequiredError="وارد کردن ایمیل الزامی است." />
                                </MudItem>

                                <MudItem xs="12" md="6">
                                    <MudTextField @bind-Value="_contactForm.Phone"
                                                  For="@(() => _contactForm.Phone)"
                                                  Label="شماره تماس"
                                                  Variant="Variant.Outlined"
                                                  InputType="InputType.Text" />
                                </MudItem>

                                <MudItem xs="12">
                                    <MudSelect @bind-Value="_contactForm.Subject"
                                               Label="موضوع پیام"
                                               Variant="Variant.Outlined"
                                               Required="true"
                                               RequiredError="انتخاب موضوع الزامی است.">
                                        <MudSelectItem Value="@("general")">عمومی</MudSelectItem>
                                        <MudSelectItem Value="@("support")">پشتیبانی فنی</MudSelectItem>
                                        <MudSelectItem Value="@("sales")">فروش و قیمت‌گذاری</MudSelectItem>
                                        <MudSelectItem Value="@("partnership")">شریک تجاری</MudSelectItem>
                                        <MudSelectItem Value="@("complaint")">شکایت</MudSelectItem>
                                        <MudSelectItem Value="@("suggestion")">پیشنهاد</MudSelectItem>
                                    </MudSelect>
                                </MudItem>

                                <MudItem xs="12">
                                    <MudTextField @bind-Value="_contactForm.Message"
                                                  For="@(() => _contactForm.Message)"
                                                  Label="پیام شما"
                                                  Variant="Variant.Outlined"
                                                  Lines="5"
                                                  Required="true"
                                                  RequiredError="وارد کردن پیام الزامی است."
                                                  Placeholder="پیام خود را بنویسید..." />
                                </MudItem>

                                <MudItem xs="12">
                                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Start">
                                        <MudCheckBox T="bool" @bind-Checked="_contactForm.AcceptTerms" />
                                        <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                            با ارسال این فرم،
                                            <MudLink Href="/privacy" Target="_blank">سیاست حفظ حریم خصوصی</MudLink>
                                            و
                                            <MudLink Href="/terms" Target="_blank">شرایط استفاده</MudLink>
                                            را می‌پذیرم.
                                        </MudText>
                                    </MudStack>
                                </MudItem>
                            </MudGrid>

                            <MudStack Row="true" Justify="Justify.FlexEnd" Class="mt-6">
                                <MudButton Variant="Variant.Filled"
                                           Color="Color.Primary"
                                           OnClick="SubmitContactForm"
                                           Disabled="_isSubmitting"
                                           StartIcon="@Icons.Material.Filled.Send">
                                    @(_isSubmitting ? "در حال ارسال..." : "ارسال پیام")
                                </MudButton>
                            </MudStack>
                        </MudForm>
                    </MudPaper>
                </MudItem>

                <!-- Contact Information -->
                <MudItem xs="12" lg="4">
                    <MudStack Spacing="4">
                        <!-- Contact Details -->
                        <MudPaper Elevation="3" Class="pa-6 rounded-2xl mud-theme-surface">
                            <MudText Typo="Typo.h6" Class="mb-4 mud-typography-subtitle1">اطلاعات تماس</MudText>

                            <MudStack Spacing="4">
                                <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Start">
                                    <MudIcon Icon="@Icons.Material.Filled.LocationOn" Color="Color.Primary" Size="Size.Large" />
                                    <div>
                                        <MudText Typo="Typo.body2" Class="fw-600">آدرس</MudText>
                                        <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                            تهران، خیابان ولیعصر، پلاک ۱۲۳۴<br />
                                            کد پستی: ۱۲۳۴۵۶۷۸۹۰
                                        </MudText>
                                    </div>
                                </MudStack>

                                <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Start">
                                    <MudIcon Icon="@Icons.Material.Filled.Phone" Color="Color.Success" Size="Size.Large" />
                                    <div>
                                        <MudText Typo="Typo.body2" Class="fw-600">تلفن</MudText>
                                        <MudText Typo="Typo.caption" Class="mud-text-secondary">۰۲۱-۱۲۳۴۵۶۷۸</MudText>
                                    </div>
                                </MudStack>

                                <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Start">
                                    <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Info" Size="Size.Large" />
                                    <div>
                                        <MudText Typo="Typo.body2" Class="fw-600">ایمیل</MudText>
                                        <MudText Typo="Typo.caption" Class="mud-text-secondary">info@foursat.co</MudText>
                                    </div>
                                </MudStack>

                                <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Start">
                                    <MudIcon Icon="@Icons.Material.Filled.Schedule" Color="Color.Warning" Size="Size.Large" />
                                    <div>
                                        <MudText Typo="Typo.body2" Class="fw-600">ساعات کاری</MudText>
                                        <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                            شنبه تا پنج‌شنبه<br />
                                            ۹ صبح تا ۶ عصر
                                        </MudText>
                                    </div>
                                </MudStack>
                            </MudStack>
                        </MudPaper>

                        <!-- Social Media -->
                        <MudPaper Elevation="3" Class="pa-6 rounded-2xl mud-theme-surface">
                            <MudText Typo="Typo.h6" Class="mb-4 mud-typography-subtitle1">شبکه‌های اجتماعی</MudText>

                            <MudStack Spacing="3">
                                <MudButton Variant="Variant.Outlined"
                                           Color="Color.Inherit"
                                           StartIcon="@Icons.Custom.Brands.Telegram"
                                           Href="https://t.me/foursat"
                                           Target="_blank"
                                           FullWidth="true">
                                    تلگرام
                                </MudButton>

                                <MudButton Variant="Variant.Outlined"
                                           Color="Color.Inherit"
                                           StartIcon="@Icons.Custom.Brands.Instagram"
                                           Href="https://instagram.com/foursat"
                                           Target="_blank"
                                           FullWidth="true">
                                    اینستاگرام
                                </MudButton>

                                <MudButton Variant="Variant.Outlined"
                                           Color="Color.Inherit"
                                           StartIcon="@Icons.Custom.Brands.LinkedIn"
                                           Href="https://linkedin.com/company/foursat"
                                           Target="_blank"
                                           FullWidth="true">
                                    لینکدین
                                </MudButton>

                                <MudButton Variant="Variant.Outlined"
                                           Color="Color.Inherit"
                                           StartIcon="@Icons.Custom.Brands.WhatsApp"
                                           Href="https://wa.me/989123456789"
                                           Target="_blank"
                                           FullWidth="true">
                                    واتس‌اپ
                                </MudButton>
                            </MudStack>
                        </MudPaper>
                    </MudStack>
                </MudItem>
            </MudGrid>
        </MudContainer>
    </section>

    <!-- Map Section -->
    <section class="py-8 bg-grey-50">
        <MudContainer MaxWidth="MaxWidth.Large">
            <MudText Typo="Typo.h4" Align="Align.Center" Class="mb-8 mud-typography-subtitle1">موقعیت مکانی</MudText>

            <MudPaper Elevation="3" Class="pa-4 rounded-2xl overflow-hidden">
                <!-- Placeholder for Map -->
                <div style="height: 400px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
                    <MudStack AlignItems="AlignItems.Center" Spacing="3">
                        <MudIcon Icon="@Icons.Material.Filled.Map" Size="Size.Large" Style="color: white;" />
                        <MudText Typo="Typo.h6" Style="color: white;">نقشه موقعیت مکانی</MudText>
                        <MudText Typo="Typo.body2" Style="color: rgba(255,255,255,0.8);" Align="Align.Center">
                            تهران، خیابان ولیعصر، پلاک ۱۲۳۴
                        </MudText>
                    </MudStack>
                </div>
            </MudPaper>
        </MudContainer>
    </section>
</MudStack>