@attribute [Route(RouteConstants.Main.MainPage)]
@inject IJSRuntime JS

<PageTitle>صفحه اصلی | کارا بازار سلامت</PageTitle>

@* ═══════════════════════════════════════════════
   1. HERO — Bold, minimal, centered
   ═══════════════════════════════════════════════ *@
<section class="hero-gradient py-12 py-md-16">
    <MudContainer MaxWidth="MaxWidth.Medium">
        <MudStack AlignItems="AlignItems.Center" Spacing="4" Class="text-center">
            <MudChip T="string" Color="Color.Default" Variant="Variant.Filled"
                     Class="pulse-chip hero-chip-glass" Size="Size.Small">
                🌿 پلتفرم سلامت‌محور فروش و تیم‌سازی
            </MudChip>

            <MudText Typo="Typo.h1" Class="hero-title" Style="max-width:680px;">
                @(_pageData?.HeroTitle ?? "رشد تیم، فروش واقعی، پاداش شفاف")
            </MudText>

            <MudText Typo="Typo.body1" Class="hero-subtitle" Style="max-width:520px;">
                @(_pageData?.HeroSubtitle ?? "با دعوت از دوستان، از خریدهای واقعی محصولات سلامت پاداش بگیرید. ثبت‌نام سریع، داشبورد لحظه‌ای.")
            </MudText>

            <MudStack Row="true" Spacing="2" Class="mt-2 flex-wrap" Justify="Justify.Center">
                <MudButton Variant="Variant.Filled"
                           Class="rounded-pill hero-cta-primary"
                           Size="Size.Large"
                           OnClick="NavigateToRegistrationWizard">
                    @(_settings?.HeroButtonPrimaryText ?? "شروع رایگان")
                </MudButton>
                <MudButton Variant="Variant.Outlined"
                           Class="rounded-pill hero-cta-outline"
                           Size="Size.Large"
                           OnClick="@(() => Navigation.NavigateTo("/blog"))">
                    @(_settings?.HeroButtonSecondaryText ?? "آخرین اخبار")
                </MudButton>
            </MudStack>

            @* ── Trust badges ── *@
            <MudStack Row="true" Spacing="4" Class="mt-4 flex-wrap" Justify="Justify.Center" AlignItems="AlignItems.Center">
                @foreach (var badge in _trustBadges)
                {
                    <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                        <MudIcon Icon="@badge.Icon" Size="Size.Small" Style="color:rgba(255,255,255,.7);" />
                        <MudText Typo="Typo.caption" Style="color:rgba(255,255,255,.8);">@badge.Text</MudText>
                    </MudStack>
                }
            </MudStack>
        </MudStack>
    </MudContainer>
</section>

@* ═══════════════════════════════════════════════
   1b. FEATURED POST BANNER — below hero
   ═══════════════════════════════════════════════ *@
@if (_latestPosts.Any())
{
    var featured = _latestPosts.First();
    <section class="py-4" style="background:var(--mud-palette-surface);">
        <MudContainer MaxWidth="MaxWidth.Medium">
            <MudPaper Elevation="1" Class="landing-blog-banner rounded-xl cursor-pointer pa-3"
                      @onclick="() => NavigateToPost(featured.Slug)">
                <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center">
                    @if (!string.IsNullOrWhiteSpace(featured.ThumbnailUrl))
                    {
                        <AppImage Path="@featured.ThumbnailUrl"
                                  Alt="@featured.Title"
                                  ObjectFit="ObjectFit.Cover"
                                  Class="landing-blog-thumb"
                                  Fallback="@Icons.Material.Filled.Article" />
                    }
                    else
                    {
                        <MudAvatar Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" Class="rounded-lg" Style="min-width:64px;">
                            <MudIcon Icon="@Icons.Material.Filled.Article" />
                        </MudAvatar>
                    }
                    <MudStack Spacing="1" Style="flex:1; min-width:0;">
                        <MudChip T="string" Size="Size.Small" Variant="Variant.Outlined" Color="Color.Primary">
                            🔥 جدیدترین مطلب
                        </MudChip>
                        <MudText Typo="Typo.subtitle1" Class="landing-blog-title">@featured.Title</MudText>
                        @if (!string.IsNullOrWhiteSpace(featured.Summary))
                        {
                            <MudText Typo="Typo.body2" Class="landing-blog-summary mud-text-secondary">@featured.Summary</MudText>
                        }
                    </MudStack>
                    <MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Class="mud-text-secondary d-none d-sm-flex" />
                </MudStack>
            </MudPaper>
        </MudContainer>
    </section>
}

@* ═══════════════════════════════════════════════
   1c. TOP-SELLING REGULAR PRODUCTS
   ═══════════════════════════════════════════════ *@
@if (_loadingTopProducts)
{
    <section class="section-landing" style="background:var(--mud-palette-background-gray);">
        <MudContainer MaxWidth="MaxWidth.Large">
            <MudStack AlignItems="AlignItems.Center" Class="py-4">
                <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Small" />
            </MudStack>
        </MudContainer>
    </section>
}
else
{
    @if (_topRegularProducts.Any())
    {
        <section class="section-landing" style="background:var(--mud-palette-background-gray);">
            <MudContainer MaxWidth="MaxWidth.Large">
                <div class="text-center mb-6 fade-in-up">
                    <MudText Typo="Typo.h3">محصولات پرفروش فروشگاه</MudText>
                    <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
                        محبوب‌ترین محصولات کارا بازار سلامت
                    </MudText>
                </div>

                <MudGrid Spacing="2" Justify="Justify.FlexStart">
                    @foreach (var p in _topRegularProducts)
                    {
                        <MudItem xs="6" sm="6" md="4">
                            <MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden landing-product-card"
                                     Style="cursor:pointer;"
                                     @onclick="() => NavigateToRegularProduct(p.Id)">
                                <MudCardContent Class="d-flex flex-column pa-1 h-100">
                                    <div style="aspect-ratio:1/1;width:100%;background-image:url('@p.ImageUrl');background-size:cover;background-position:center;border-radius:0.5rem;position:relative;">
                                        @if (p.RemainingCount <= 0)
                                        {
                                            <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;border-radius:0.5rem;">
                                                <MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">ناموجود</MudChip>
                                            </div>
                                        }
                                        else if (p.RemainingCount <= 5)
                                        {
                                            <MudChip T="string" Color="Color.Warning" Variant="Variant.Filled" Size="Size.Small"
                                                     Style="position:absolute;top:8px;right:8px;">
                                                فقط @p.RemainingCount عدد
                                            </MudChip>
                                        }
                                    </div>
                                    <div class="pa-1 flex-grow-1 d-flex flex-column justify-space-between">
                                        <MudText Typo="Typo.subtitle1" Style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">@p.Title</MudText>
                                        @if (_isAuthenticated)
                                        {
                                            <MudText Typo="Typo.subtitle2" Color="Color.Primary">@FormatPrice(p.Price)</MudText>
                                        }
                                        else
                                        {
                                            <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                                <MudIcon Icon="@Icons.Material.Filled.Lock" Size="Size.Small" Class="me-1"/>برای مشاهده قیمت وارد شوید
                                            </MudText>
                                        }
                                    </div>
                                </MudCardContent>
                                <MudCardActions Class="mt-auto pa-2" @onclick:stopPropagation="true">
                                    <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true"
                                               StartIcon="@Icons.Material.Filled.AddShoppingCart"
                                               Disabled="@(p.RemainingCount <= 0)"
                                               OnClick="@(() => AddRegularToCart(p))">
                                        @(p.RemainingCount <= 0 ? "ناموجود" : "افزودن به سبد")
                                    </MudButton>
                                </MudCardActions>
                            </MudCard>
                        </MudItem>
                    }
                </MudGrid>

                <div class="text-center mt-6">
                    <MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="rounded-pill"
                               Href="@RouteConstants.Store.Products"
                               EndIcon="@Icons.Material.Filled.ArrowBack">
                        مشاهده همه محصولات
                    </MudButton>
                </div>
            </MudContainer>
        </section>
    }

    @* ═══════════════════════════════════════════════
       1d. TOP-SELLING DISCOUNT STORE PRODUCTS
       ═══════════════════════════════════════════════ *@
    @if (_topDiscountProducts.Any())
    {
        <section class="section-landing">
            <MudContainer MaxWidth="MaxWidth.Large">
                <div class="text-center mb-6 fade-in-up">
                    <MudText Typo="Typo.h3">محصولات پرفروش فروشگاه اعتباری</MudText>
                    <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
                        محصولات ویژه اعضای باشگاه با پرداخت اعتباری
                    </MudText>
                </div>

                <MudGrid Spacing="2" Justify="Justify.FlexStart">
                    @foreach (var p in _topDiscountProducts)
                    {
                        <MudItem xs="6" sm="6" md="4">
                            <MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden landing-product-card"
                                     Style="cursor:pointer;"
                                     @onclick="() => NavigateToDiscountProduct(p.Id)">
                                <MudCardContent Class="d-flex flex-column pa-1 h-100">
                                    <div style="aspect-ratio:1/1;width:100%;background-image:url('@(string.IsNullOrWhiteSpace(p.ThumbnailUrl) ? p.ImageUrl : p.ThumbnailUrl)');background-size:cover;background-position:center;border-radius:0.5rem;position:relative;">
                                        @if (p.RemainingCount <= 0)
                                        {
                                            <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;border-radius:0.5rem;">
                                                <MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">ناموجود</MudChip>
                                            </div>
                                        }
                                        else if (p.RemainingCount <= 5)
                                        {
                                            <MudChip T="string" Color="Color.Warning" Variant="Variant.Filled" Size="Size.Small"
                                                     Style="position:absolute;top:8px;right:8px;">
                                                فقط @p.RemainingCount عدد
                                            </MudChip>
                                        }
                                        @if (p.MaxDiscountPercent > 0)
                                        {
                                            <MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Size="Size.Small"
                                                     Style="position:absolute;top:8px;left:8px;">
                                                @p.MaxDiscountPercent% اعتبار
                                            </MudChip>
                                        }
                                    </div>
                                    <div class="pa-1 flex-grow-1 d-flex flex-column justify-space-between">
                                        <MudText Typo="Typo.subtitle1" Style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">@p.Title</MudText>
                                        @if (_isAuthenticated)
                                        {
                                            <div>
                                                <MudText Typo="Typo.subtitle2" Color="Color.Primary">@FormatDiscountPrice(p.Price)</MudText>
                                                <MudText Typo="Typo.overline" Class="mud-text-secondary" Style="font-size:0.6rem;line-height:1;">(+ ارزش افزوده)</MudText>
                                            </div>
                                        }
                                        else
                                        {
                                            <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                                <MudIcon Icon="@Icons.Material.Filled.Lock" Size="Size.Small" Class="me-1"/>برای مشاهده قیمت وارد شوید
                                            </MudText>
                                        }
                                    </div>
                                </MudCardContent>
                                <MudCardActions Class="mt-auto pa-2" @onclick:stopPropagation="true">
                                    <MudButton Variant="Variant.Filled" Color="Color.Secondary" FullWidth="true"
                                               StartIcon="@Icons.Material.Filled.AddShoppingCart"
                                               Disabled="@(p.RemainingCount <= 0)"
                                               OnClick="@(() => AddDiscountToCart(p))">
                                        @(p.RemainingCount <= 0 ? "ناموجود" : "افزودن به سبد")
                                    </MudButton>
                                </MudCardActions>
                            </MudCard>
                        </MudItem>
                    }
                </MudGrid>

                <div class="text-center mt-6">
                    <MudButton Variant="Variant.Outlined" Color="Color.Secondary" Class="rounded-pill"
                               Href="@RouteConstants.DiscountStore.Products"
                               EndIcon="@Icons.Material.Filled.ArrowBack">
                        مشاهده همه محصولات اعتباری
                    </MudButton>
                </div>
            </MudContainer>
        </section>
    }
}

@* ═══════════════════════════════════════════════
   2. HOW IT WORKS — 3 numbered steps
   ═══════════════════════════════════════════════ *@
<section class="section-landing">
    <MudContainer MaxWidth="MaxWidth.Large">
        <div class="text-center mb-8 fade-in-up">
            <MudText Typo="Typo.h3">@(_settings?.StepsTitle ?? "سه گام تا شروع")</MudText>
            <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
                بدون پیچیدگی، سریع و آسان
            </MudText>
        </div>

        <MudGrid Spacing="4" Justify="Justify.Center">
            @foreach (var (step, i) in _steps.Select((s, i) => (s, i)))
            {
                <MudItem xs="12" sm="4">
                    <MudPaper Elevation="0" Class="pa-5 rounded-xl feature-card-v2 text-center fade-in-up" data-delay="@(i * 150)">
                        <MudAvatar Size="Size.Large" Color="Color.Primary" Variant="Variant.Filled" Class="mx-auto mb-3 landing-step-num">
                            <MudText Typo="Typo.h5" Style="color:#fff;font-weight:800;">@(i + 1)</MudText>
                        </MudAvatar>
                        <MudText Typo="Typo.h6" Class="mb-1">@step.Title</MudText>
                        <MudText Typo="Typo.body2" Class="mud-text-secondary">@step.Desc</MudText>
                    </MudPaper>
                </MudItem>
            }
        </MudGrid>
    </MudContainer>
</section>

@* ═══════════════════════════════════════════════
   3. FEATURES — 6 cards with icons
   ═══════════════════════════════════════════════ *@
<section class="section-landing" style="background:var(--mud-palette-background-gray);">
    <MudContainer MaxWidth="MaxWidth.Large">
        <div class="text-center mb-8 fade-in-up">
            <MudText Typo="Typo.h3">@(_settings?.FeaturesTitle ?? "چرا کارا بازار سلامت؟")</MudText>
            <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2" Style="max-width:540px;margin:0 auto;">
                ابزارهایی ساده و قدرتمند برای رشد کسب‌وکار شما
            </MudText>
        </div>

        <MudGrid Spacing="3" Justify="Justify.Center">
            @foreach (var (icon, title, desc, delay) in _features)
            {
                <MudItem xs="12" sm="6" md="4">
                    <MudPaper Elevation="0" Class="pa-5 rounded-xl feature-card-v2 fade-in-up" data-delay="@delay">
                        <MudStack Spacing="2">
                            <MudAvatar Color="Color.Primary" Variant="Variant.Filled" Size="Size.Medium" Class="mb-1">
                                <MudIcon Icon="@icon" />
                            </MudAvatar>
                            <MudText Typo="Typo.h6">@title</MudText>
                            <MudText Typo="Typo.body2" Class="mud-text-secondary">@desc</MudText>
                        </MudStack>
                    </MudPaper>
                </MudItem>
            }
        </MudGrid>
    </MudContainer>
</section>

@* ═══════════════════════════════════════════════
   4. STATS — Counter cards
   ═══════════════════════════════════════════════ *@
<section class="section-landing">
    <MudContainer MaxWidth="MaxWidth.Medium">
        <MudGrid Spacing="3" Justify="Justify.Center">
            @foreach (var stat in _stats)
            {
                <MudItem xs="6" sm="3">
                    <MudPaper Elevation="2" Class="pa-4 rounded-xl stat-card fade-in-up text-center">
                        <MudText Class="stat-number" Color="@stat.Color" id="@stat.ElementId">@stat.Display</MudText>
                        <MudText Typo="Typo.caption" Class="mud-text-secondary mt-1">@stat.Label</MudText>
                    </MudPaper>
                </MudItem>
            }
        </MudGrid>
    </MudContainer>
</section>

@* ═══════════════════════════════════════════════
   5. LATEST BLOG POSTS
   ═══════════════════════════════════════════════ *@
@if (_latestPosts.Any())
{
    <section class="section-landing" style="background:var(--mud-palette-background-gray);">
        <MudContainer MaxWidth="MaxWidth.Large">
            <div class="text-center mb-8 fade-in-up">
                <MudText Typo="Typo.h3">آخرین مقالات</MudText>
                <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
                    جدیدترین مطالب و اخبار کارا بازار سلامت
                </MudText>
            </div>

            <MudGrid Spacing="4" Justify="Justify.Center">
                @foreach (var post in _latestPosts.Take(2))
                {
                    <MudItem xs="12" sm="6" md="6">
                        <MudPaper Elevation="1" Class="rounded-xl blog-card-v2 cursor-pointer fade-in-up" Style="overflow:hidden;"
                                  @onclick="() => NavigateToPost(post.Slug)">
                            <div class="blog-thumb" style="height:180px; background:#f0f0f0;">
                                @if (!string.IsNullOrWhiteSpace(post.ThumbnailUrl))
                                {
                                    <AppImage Path="@post.ThumbnailUrl"
                                              Alt="@post.Title"
                                              ObjectFit="ObjectFit.Cover"
                                              Style="width:100%; height:180px;" />
                                }
                                else
                                {
                                    <div style="height:180px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#6366f1,#a78bfa);">
                                        <MudIcon Icon="@Icons.Material.Filled.Article" Size="Size.Large" Style="color:rgba(255,255,255,.5);" />
                                    </div>
                                }
                            </div>
                            <div class="pa-4">
                                @if (post.Categories.Any())
                                {
                                    <MudChip T="string" Size="Size.Small" Variant="Variant.Outlined" Color="Color.Primary" Class="mb-2">
                                        @post.Categories.First().Title
                                    </MudChip>
                                }
                                <MudText Typo="Typo.h6" Class="mb-1" Style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
                                    @post.Title
                                </MudText>
                                @if (!string.IsNullOrWhiteSpace(post.Summary))
                                {
                                    <MudText Typo="Typo.body2" Class="mud-text-secondary mb-2" Style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
                                        @post.Summary
                                    </MudText>
                                }
                                <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center" Class="mt-2">
                                    @if (post.PublishedAt.HasValue)
                                    {
                                        <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                            <MudIcon Icon="@Icons.Material.Filled.CalendarToday" Size="Size.Small" Class="ml-1" />
                                            @post.PublishedAt.Value.ToString("yyyy/MM/dd")
                                        </MudText>
                                    }
                                    <MudSpacer />
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                        <MudIcon Icon="@Icons.Material.Filled.Visibility" Size="Size.Small" Class="ml-1" />
                                        @post.ViewCount
                                    </MudText>
                                </MudStack>
                            </div>
                        </MudPaper>
                    </MudItem>
                }
            </MudGrid>

            <div class="text-center mt-6">
                <MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="rounded-pill"
                           Href="/blog">
                    مشاهده همه مقالات
                </MudButton>
            </div>
        </MudContainer>
    </section>
}

@* ═══════════════════════════════════════════════
   6. TESTIMONIALS
   ═══════════════════════════════════════════════ *@
<section class="section-landing">
    <MudContainer MaxWidth="MaxWidth.Large">
        <div class="text-center mb-8 fade-in-up">
            <MudText Typo="Typo.h3">@(_settings?.TestimonialsTitle ?? "اعتماد مشتریان")</MudText>
            <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
                بخشی از تجربه استفاده از «کارا بازار سلامت»
            </MudText>
        </div>

        <MudGrid Spacing="4" Justify="Justify.Center">
            @foreach (var t in _testimonials)
            {
                <MudItem xs="12" md="4">
                    <MudPaper Elevation="2" Class="pa-5 rounded-xl testimonial-card fade-in-up" data-delay="@t.Delay">
                        <MudStack Spacing="2">
                            <MudRating ReadOnly="true" SelectedValue="5" Size="Size.Small" Color="Color.Warning" />
                            <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                «@t.Quote»
                            </MudText>
                            <MudDivider Class="my-1" />
                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                <MudAvatar Size="Size.Small" Color="Color.Primary" Variant="Variant.Filled">
                                    <MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Small" />
                                </MudAvatar>
                                <div>
                                    <MudText Typo="Typo.subtitle2">@t.Name</MudText>
                                    <MudText Typo="Typo.overline" Class="mud-text-secondary">@t.Role</MudText>
                                </div>
                            </MudStack>
                        </MudStack>
                    </MudPaper>
                </MudItem>
            }
        </MudGrid>
    </MudContainer>
</section>

@* ═══════════════════════════════════════════════
   7. FAQ
   ═══════════════════════════════════════════════ *@
<section class="section-landing" style="background:var(--mud-palette-background-gray);">
    <MudContainer MaxWidth="MaxWidth.Medium">
        <div class="text-center mb-8 fade-in-up">
            <MudText Typo="Typo.h3">@(_settings?.FaqTitle ?? "سوالات متداول")</MudText>
            <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
                پاسخ به سوالات رایج شما
            </MudText>
        </div>

        <div class="fade-in-up">
            <MudExpansionPanels Elevation="1" Class="rounded-xl">
                @foreach (var q in _faqs)
                {
                    <MudExpansionPanel Text="@q.Q">
                        <MudText Typo="Typo.body2" Class="mud-text-secondary">@q.A</MudText>
                    </MudExpansionPanel>
                }
            </MudExpansionPanels>
        </div>
    </MudContainer>
</section>

@* ═══════════════════════════════════════════════
   8. CTA BANNER
   ═══════════════════════════════════════════════ *@
<section class="section-landing-lg">
    <MudContainer MaxWidth="MaxWidth.Medium">
        <div class="cta-banner pa-8 pa-md-12 fade-in-up">
            <MudStack AlignItems="AlignItems.Center" Spacing="3">
                <MudText Typo="Typo.h3" Align="Align.Center" Class="dash-hero-name">
                    @(_settings?.CtaTitle ?? "آماده شروع هستید؟")
                </MudText>
                <MudText Typo="Typo.body1" Align="Align.Center" Class="hero-subtitle">
                    @(_settings?.CtaDescription ?? "همین الان ثبت‌نام کنید و از مزایای کارا بازار سلامت بهره‌مند شوید.")
                </MudText>
                <MudButton Variant="Variant.Filled"
                           Size="Size.Large"
                           Class="rounded-pill mt-2 hero-cta-primary"
                           OnClick="NavigateToRegistrationWizard">
                    @(_settings?.CtaButtonText ?? "شروع رایگان")
                </MudButton>
            </MudStack>
        </div>
    </MudContainer>
</section>
