@page
@model AsadiTools.Pages.Services.ServicesIndexModel
@{ ViewData["Title"] = "خدمات تعمیر ابزار برقی در کرج"; Layout = "_Layout"; }

<div class="bg-blue-800 text-white py-12 px-4">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-extrabold mb-2">خدمات تعمیر ابزار</h1>
        <p class="text-blue-200 text-lg">تعمیر تخصصی انواع ابزار برقی صنعتی توسط تکنیسین‌های مجرب در کرج</p>
    </div>
</div>

<div class="max-w-6xl mx-auto px-4 py-12">
    <section class="mb-14">
        <h2 class="text-xl font-bold text-gray-900 mb-6 pb-2 border-b">خدمات بر اساس برند</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            @foreach (var b in SiteData.Brands)
            {
                <a href="/Services/Brand?id=@b.Id" class="group bg-white rounded-2xl border border-gray-100 p-6 hover:shadow-lg transition-all hover:-translate-y-0.5">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center text-xl font-extrabold shrink-0"
                             style="background-color:@b.Color;color:@b.TextColor">@b.Name[0]</div>
                        <div>
                            <div class="flex items-center gap-2">
                                <span class="font-bold text-gray-900">@b.NameFa</span>
                                @if (b.IsOfficial) { <span class="text-xs bg-yellow-400 text-gray-900 px-1.5 py-0.5 rounded font-bold">رسمی</span> }
                            </div>
                            <div class="text-xs text-gray-400">@b.Name</div>
                        </div>
                    </div>
                    <p class="text-sm text-gray-600 mb-4 leading-7">@b.Description</p>
                    <div class="flex flex-wrap gap-1.5 mb-3">
                        @foreach (var svc in b.Services) { <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">@svc</span> }
                    </div>
                    <div class="text-sm text-blue-600 font-medium">مشاهده خدمات کامل ›</div>
                </a>
            }
        </div>
    </section>

    <section>
        <h2 class="text-xl font-bold text-gray-900 mb-6 pb-2 border-b">خدمات بر اساس نوع ابزار</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            @foreach (var t in SiteData.ToolTypes)
            {
                <div class="bg-white rounded-2xl border border-gray-100 p-6">
                    <div class="flex items-center gap-3 mb-4">
                        <span class="text-3xl">@t.Icon</span>
                        <h3 class="font-bold text-xl text-gray-900">@t.NameFa</h3>
                    </div>
                    <p class="text-gray-500 text-sm leading-7 mb-4">@t.Description</p>
                    <p class="text-sm font-bold text-gray-700 mb-3">مشکلات رایج:</p>
                    <ul class="space-y-2">
                        @foreach (var issue in t.CommonIssues)
                        {
                            <li class="flex items-start gap-2 text-sm text-gray-600"><span class="text-green-500 shrink-0">✓</span> @issue</li>
                        }
                    </ul>
                </div>
            }
        </div>
    </section>
</div>
