@page
@model AsadiTools.Pages.DeWalt.DeWaltIndexModel
@{ Layout = "_Layout"; }

@section Head {
<script type="application/ld+json">
{"@@context":"https://schema.org","@@type":"Service","name":"تعمیر ابزار دیوالت در کرج","provider":{"@@type":"LocalBusiness","name":"آساد ابزار کرج","telephone":"+98-261-XXXXXXX","address":{"@@type":"PostalAddress","addressLocality":"کرج","addressCountry":"IR"}},"serviceType":"تعمیر ابزار برقی","brand":{"@@type":"Brand","name":"DeWalt"},"areaServed":"کرج"}
</script>
}

<!-- ═══════════ HERO ═══════════ -->
<section class="relative text-white overflow-hidden" style="min-height:420px;background:#1a1200">
    <div class="absolute inset-0 bg-cover bg-center opacity-30"
         style="background-image:url('https://images.unsplash.com/photo-1504148455328-c376907d081c?w=1400&q=80&auto=format&fit=crop')"></div>
    <div class="absolute inset-0 bg-gradient-to-l from-yellow-900/40 to-transparent"></div>
    <div class="relative max-w-6xl mx-auto px-4 py-16 flex flex-col md:flex-row items-center gap-10">
        <!-- DeWalt logo area -->
        <div class="shrink-0">
            <div class="w-40 h-40 rounded-3xl flex items-center justify-center shadow-2xl border-4 border-yellow-400"
                 style="background:#FFCD00">
                <span class="font-extrabold text-gray-900 text-3xl tracking-tighter">DeWALT</span>
            </div>
        </div>
        <div>
            <div class="inline-flex items-center gap-2 bg-yellow-400 text-gray-900 text-sm font-bold px-4 py-1.5 rounded-full mb-4">
                🛡️ نمایندگی رسمی DeWalt در کرج
            </div>
            <h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-4">
                تعمیر تخصصی<br>
                <span class="text-yellow-400">ابزار دیوالت</span>
            </h1>
            <p class="text-gray-300 text-lg leading-8 max-w-2xl mb-6">
                آساد ابزار مجاز تنها مرکز تعمیر رسمی ابزار DeWalt در شهر کرج است.
                بیش از ۱۵ مدل از پرفروش‌ترین ابزار دیوالت را با قطعات اصل تعمیر می‌کنیم.
            </p>
            <div class="flex flex-wrap gap-3">
                <a href="tel:02634567890" class="bg-yellow-400 text-gray-900 font-bold px-6 py-3 rounded-xl hover:bg-yellow-300 transition-colors">📞 تماس برای تعمیر</a>
                <a href="#tools" class="border-2 border-yellow-400/50 text-yellow-300 font-bold px-6 py-3 rounded-xl hover:border-yellow-400 transition-colors">مشاهده ابزارها ↓</a>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════ TRUST STRIP ═══════════ -->
<div class="bg-yellow-400 py-3 px-4">
    <div class="max-w-6xl mx-auto flex flex-wrap justify-center gap-6 text-gray-900 text-sm font-semibold">
        @foreach (var t in new[] { "🛡️ ضمانت ۳ ماهه کتبی", "🔩 قطعات اصل DeWalt", "⚡ تحویل زیر ۴۸ ساعت", "📞 مشاوره رایگان", "🎓 تکنیسین آموزش‌دیده DeWalt" })
        {
            <span>@t</span>
        }
    </div>
</div>

<!-- ═══════════ CATEGORY TABS ═══════════ -->
<nav id="tools" class="bg-white border-b sticky top-[65px] z-40">
    <div class="max-w-6xl mx-auto px-4 flex gap-1 overflow-x-auto py-2">
        @{
            var cats = new[] {
                ("all",           "همه ابزار"),
                ("drill",         "🔩 دریل"),
                ("driver",        "🔧 پیچ‌گوشتی"),
                ("grinder",       "⚙️ فرز آنگولر"),
                ("rotary-hammer", "🏗️ بتن‌کن"),
                ("saw",           "🪚 ابزار برش"),
                ("chop-saw",      "💿 گردبر"),
                ("miter-saw",     "📐 فارسی‌بر"),
                ("woodworking",   "🪵 نجاری"),
                ("multi",         "🔧 چندکاره"),
                ("sander",        "💨 سنباده"),
                ("hedge-trimmer", "🌿 شمشادزن"),
                ("laser-level",   "🔴 تراز لیزری"),
                ("laser-measure", "📏 متر لیزری"),
            };
        }
        @foreach (var (catId, catName) in cats)
        {
            <button onclick="filterTools('@catId')"
                    id="tab-@catId"
                    class="tab-btn shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition-colors text-gray-600 hover:bg-yellow-50 hover:text-yellow-700 whitespace-nowrap">
                @catName
            </button>
        }
    </div>
</nav>

<!-- ═══════════ TOOLS GRID ═══════════ -->
<section class="py-12 px-4 bg-gray-50">
    <div class="max-w-6xl mx-auto">
        <div id="tools-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @{
                var catImages = new Dictionary<string, string>
                {
                    ["drill"]         = "https://images.unsplash.com/photo-1572981779307-38b8cabb2407?w=500&q=75&auto=format&fit=crop",
                    ["driver"]        = "https://images.unsplash.com/photo-1530124566582-a618bc2615dc?w=500&q=75&auto=format&fit=crop",
                    ["grinder"]       = "https://images.unsplash.com/photo-1487452066049-a710f7296400?w=500&q=75&auto=format&fit=crop",
                    ["rotary-hammer"] = "https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=500&q=75&auto=format&fit=crop",
                    ["saw"]           = "https://images.unsplash.com/photo-1504148455328-c376907d081c?w=500&q=75&auto=format&fit=crop",
                    ["chop-saw"]      = "https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=500&q=75&auto=format&fit=crop",
                    ["miter-saw"]     = "https://images.unsplash.com/photo-1558618047-3c8c1d8b9df1?w=500&q=75&auto=format&fit=crop",
                    ["woodworking"]   = "https://images.unsplash.com/photo-1588854337115-1c67d9247e4d?w=500&q=75&auto=format&fit=crop",
                    ["multi"]         = "https://images.unsplash.com/photo-1518770660439-4636190af475?w=500&q=75&auto=format&fit=crop",
                    ["sander"]        = "https://images.unsplash.com/photo-1581579438747-1dc8d17bbce4?w=500&q=75&auto=format&fit=crop",
                    ["hedge-trimmer"] = "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=500&q=75&auto=format&fit=crop",
                    ["laser-level"]   = "https://images.unsplash.com/photo-1609220136736-443140cfeaa8?w=500&q=75&auto=format&fit=crop",
                    ["laser-measure"] = "https://images.unsplash.com/photo-1518770660439-4636190af475?w=500&q=75&auto=format&fit=crop",
                };
            }
            @foreach (var tool in Model.Tools)
            {
                var img = catImages.TryGetValue(tool.CategoryId, out var u) ? u : catImages["drill"];
                <div class="tool-card bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 border border-gray-100"
                     data-cat="@tool.CategoryId">
                    <!-- Image -->
                    <div class="relative h-44 overflow-hidden">
                        <img src="@img" alt="تعمیر @tool.NameFa" loading="lazy"
                             class="w-full h-full object-cover" />
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                        <!-- DeWalt badge -->
                        <div class="absolute top-3 left-3">
                            <span class="bg-yellow-400 text-gray-900 font-extrabold text-xs px-2 py-1 rounded-lg">DeWALT</span>
                        </div>
                        <!-- Power badge -->
                        <div class="absolute top-3 right-3">
                            <span class="bg-black/60 text-white text-xs px-2 py-1 rounded-lg font-medium">@tool.Power</span>
                        </div>
                        <!-- Icon overlay -->
                        <div class="absolute bottom-3 right-4 text-3xl">@tool.Icon</div>
                    </div>

                    <div class="p-5">
                        <!-- Title & models -->
                        <h3 class="font-bold text-gray-900 text-lg mb-1 leading-snug">@tool.NameFa</h3>
                        <p class="text-xs text-gray-400 mb-3 font-mono">@string.Join(" · ", tool.Models)</p>
                        <p class="text-gray-600 text-sm leading-7 mb-4">@tool.Description</p>

                        <!-- Repair services -->
                        <div class="border-t pt-4">
                            <p class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">خدمات تعمیر</p>
                            <div class="flex flex-wrap gap-1.5">
                                @foreach (var r in tool.RepairItems)
                                {
                                    <span class="text-xs bg-yellow-50 text-yellow-800 border border-yellow-200 px-2 py-0.5 rounded-full">@r</span>
                                }
                            </div>
                        </div>

                        <!-- CTA -->
                        <a href="tel:02634567890"
                           class="mt-4 block w-full bg-yellow-400 text-gray-900 font-bold text-center py-2.5 rounded-xl hover:bg-yellow-300 transition-colors text-sm">
                            📞 درخواست تعمیر
                        </a>
                    </div>
                </div>
            }
        </div>
        <p id="no-results" class="hidden text-center text-gray-400 py-10">ابزاری در این دسته‌بندی یافت نشد.</p>
    </div>
</section>

<!-- ═══════════ REPAIR PROCESS ═══════════ -->
<section class="py-16 px-4 bg-white">
    <div class="max-w-5xl mx-auto">
        <div class="text-center mb-10">
            <h2 class="text-2xl font-bold text-gray-900 mb-2">فرآیند تعمیر ابزار دیوالت</h2>
            <p class="text-gray-500">ساده، شفاف و با ضمانت</p>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
            @{
                var steps = new[] {
                    ("۱", "تحویل دستگاه", "ابزار را به‌صورت حضوری تحویل دهید یا از طریق پست ارسال کنید.", "📦"),
                    ("۲", "بررسی رایگان", "در کمتر از ۲ ساعت عیب‌یابی کامل و برآورد قیمت ارائه می‌شود.", "🔍"),
                    ("۳", "تعمیر با قطعه اصل", "تعمیر توسط تکنیسین مجاز DeWalt با قطعات اورجینال.", "🔧"),
                    ("۴", "تحویل با ضمانت", "تحویل دستگاه با ضمانت‌نامه کتبی ۳ ماهه.", "🛡️"),
                };
            }
            @foreach (var (num, title, desc, icon) in steps)
            {
                <div class="text-center relative">
                    <div class="w-16 h-16 rounded-2xl bg-yellow-400 flex items-center justify-center text-2xl mx-auto mb-4 shadow-md">
                        @icon
                    </div>
                    <div class="absolute top-0 right-1/2 translate-x-1/2 -translate-y-1 bg-gray-900 text-white text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center">@num</div>
                    <h3 class="font-bold text-gray-900 mb-2">@title</h3>
                    <p class="text-sm text-gray-500 leading-6">@desc</p>
                </div>
            }
        </div>
    </div>
</section>

<!-- ═══════════ GENUINE PARTS SECTION ═══════════ -->
<section class="py-16 px-4" style="background:linear-gradient(135deg,#fef9c3,#fef08a)">
    <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 mb-4">قطعات اصل DeWalt</h2>
            <p class="text-gray-700 leading-8 mb-6">
                آساد ابزار تنها از قطعات یدکی ۱۰۰٪ اورجینال DeWalt استفاده می‌کند.
                قطعات مستقیم از نمایندگی رسمی ایران تأمین می‌شود و دارای شناسه تأیید اصالت هستند.
                هیچ قطعه چینی یا غیراصل در تعمیرات ما استفاده نمی‌شود.
            </p>
            <div class="grid grid-cols-2 gap-3">
                @foreach (var part in new[] { "کاربن (ذغال) اصل", "بیرینگ اورجینال", "کلید و رئوستا", "آرمیچر و استاتور", "گیربکس کامل", "چاک ۱۳mm", "پیستون بتن‌کن", "تیغه شمشادزن" })
                {
                    <div class="flex items-center gap-2 bg-white/60 rounded-xl px-3 py-2">
                        <span class="text-yellow-600 font-bold">⚡</span>
                        <span class="text-sm text-gray-800">@part</span>
                    </div>
                }
            </div>
        </div>
        <div class="relative rounded-3xl overflow-hidden shadow-xl" style="height:320px">
            <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=700&q=85&auto=format&fit=crop"
                 alt="قطعات یدکی اصل دیوالت" loading="lazy"
                 class="w-full h-full object-cover" />
        </div>
    </div>
</section>

<!-- ═══════════ FAQ ═══════════ -->
<section class="py-16 px-4 bg-white">
    <div class="max-w-3xl mx-auto">
        <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">سؤالات متداول درباره تعمیر دیوالت</h2>
        <div class="space-y-4">
            @{
                var faqs = new[] {
                    ("چطور بفهمم ابزار دیوالتم نیاز به تعمیر دارد؟",
                     "علائم رایج: جرقه داخل ابزار، کاهش قدرت، صدای غیرعادی، داغ شدن بیش از حد، لرزش شدید. در صورت مشاهده هر کدام، دستگاه را خاموش کنید و با ما تماس بگیرید."),
                    ("هزینه تعمیر ابزار دیوالت چقدر است؟",
                     "هزینه بستگی به نوع عیب و مدل دارد. بررسی اولیه و برآورد قیمت کاملاً رایگان است. قبل از شروع تعمیر، قیمت دقیق به شما اعلام می‌شود."),
                    ("آیا ضمانت تعمیر دارید؟",
                     "بله، تمام تعمیرات آساد ابزار دارای ضمانت‌نامه کتبی ۳ ماهه هستند. در صورت بروز مشکل مجدد در همان قطعه، رایگان تعمیر می‌شود."),
                    ("چه مدت طول می‌کشد ابزار تعمیر شود؟",
                     "اکثر تعمیرات معمولی در ۲۴ تا ۴۸ ساعت انجام می‌شود. تعمیرات سنگین‌تر که نیاز به سفارش قطعه دارند ممکن است ۳ تا ۵ روز طول بکشد."),
                    ("آیا تعمیرات از شهرهای دیگر قبول می‌کنید؟",
                     "بله، ابزار را می‌توانید از طریق پست یا تیپاکس ارسال کنید. ما پس از تعمیر، ابزار را به آدرس شما ارسال می‌کنیم."),
                };
            }
            @foreach (var (q, a) in faqs)
            {
                <details class="group border border-gray-200 rounded-2xl overflow-hidden">
                    <summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-800 hover:bg-gray-50">
                        @q
                        <span class="text-yellow-600 group-open:rotate-45 transition-transform shrink-0 mr-3 text-xl">+</span>
                    </summary>
                    <div class="px-5 pb-5 text-gray-600 text-sm leading-7 border-t border-gray-100 pt-4">
                        @a
                    </div>
                </details>
            }
        </div>
    </div>
</section>

<!-- ═══════════ CONTACT CTA ═══════════ -->
<section class="py-14 px-4 bg-gray-900 text-white">
    <div class="max-w-3xl mx-auto text-center">
        <h2 class="text-3xl font-extrabold mb-3">ابزار دیوالت خود را تعمیر کنید</h2>
        <p class="text-gray-400 mb-8">تنها نمایندگی مجاز تعمیر DeWalt در کرج</p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="tel:02634567890" class="bg-yellow-400 text-gray-900 font-bold px-8 py-3.5 rounded-xl hover:bg-yellow-300 transition-colors text-lg">📞 ۰۲۶-۳۴۵۶۷۸۹۰</a>
            <a href="https://wa.me/989123456789" class="bg-green-600 text-white font-bold px-8 py-3.5 rounded-xl hover:bg-green-700 transition-colors text-lg">💬 واتساپ</a>
            <a href="/Contact" class="border-2 border-white/30 text-white font-bold px-8 py-3.5 rounded-xl hover:border-white transition-colors text-lg">📍 آدرس ما</a>
        </div>
    </div>
</section>

@section Scripts {
<script>
function filterTools(cat) {
    const cards = document.querySelectorAll('.tool-card');
    const tabs  = document.querySelectorAll('.tab-btn');
    let visible = 0;
    cards.forEach(c => {
        const show = cat === 'all' || c.dataset.cat === cat;
        c.style.display = show ? '' : 'none';
        if (show) visible++;
    });
    document.getElementById('no-results').classList.toggle('hidden', visible > 0);
    tabs.forEach(t => {
        const active = t.id === 'tab-' + cat;
        t.classList.toggle('bg-yellow-400', active);
        t.classList.toggle('text-gray-900', active);
        t.classList.toggle('font-bold', active);
        t.classList.toggle('text-gray-600', !active);
    });
}
// Activate "all" tab on load
filterTools('all');
</script>
}