@page
@model AsadiTools.Pages.Contact.ContactIndexModel
@{
    ViewData["Title"] = "تماس با آساد ابزار – نمایندگی دیوالت کرج";
    ViewData["Description"] = "آدرس، تلفن و ساعات کاری آساد ابزار کرج. نمایندگی رسمی دیوالت در کرج.";
    Layout = "_Layout";
    var c = SiteData.Company;
    var mapBbox = $"{c.MapLng - 0.02},{c.MapLat - 0.02},{c.MapLng + 0.02},{c.MapLat + 0.02}";
    var mapUrl  = $"https://www.openstreetmap.org/export/embed.html?bbox={mapBbox}&layer=mapnik&marker={c.MapLat},{c.MapLng}";
}

<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">آساد ابزار – نمایندگی رسمی دیوالت در کرج</p>
    </div>
</div>

<div class="max-w-6xl mx-auto px-4 py-12">
    <div class="grid md:grid-cols-2 gap-10">
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-6">اطلاعات تماس</h2>
            <div class="space-y-4">
                <div class="flex items-start gap-4 p-5 bg-white rounded-2xl border border-gray-100">
                    <span class="text-2xl mt-0.5">📞</span>
                    <div>
                        <div class="font-bold text-gray-800 mb-2">تلفن</div>
                        <a href="tel:@c.TelPhone" class="block text-blue-600 hover:underline text-lg font-bold">@c.Phone</a>
                        <a href="tel:@c.TelMobile" class="block text-blue-600 hover:underline">@c.Mobile</a>
                    </div>
                </div>
                <div class="flex items-start gap-4 p-5 bg-white rounded-2xl border border-gray-100">
                    <span class="text-2xl mt-0.5">📍</span>
                    <div>
                        <div class="font-bold text-gray-800 mb-1">آدرس</div>
                        <p class="text-gray-600">@c.Address</p>
                    </div>
                </div>
                <div class="flex items-start gap-4 p-5 bg-white rounded-2xl border border-gray-100">
                    <span class="text-2xl mt-0.5">🕐</span>
                    <div>
                        <div class="font-bold text-gray-800 mb-1">ساعات کاری</div>
                        <p class="text-gray-600">@c.WorkingHours</p>
                    </div>
                </div>
                <div class="flex gap-3">
                    <a href="https://wa.me/@c.Whatsapp" target="_blank"
                       class="flex-1 flex items-center justify-center gap-2 bg-green-500 text-white py-3.5 rounded-xl font-bold hover:bg-green-600 transition-colors">
                        💬 واتساپ
                    </a>
                    <a href="https://instagram.com/@c.Instagram" target="_blank"
                       class="flex-1 flex items-center justify-center gap-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3.5 rounded-xl font-bold hover:opacity-90 transition-opacity">
                        📷 اینستاگرام
                    </a>
                </div>
            </div>

            <div class="mt-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4">برندهای رسمی</h2>
                <div class="grid grid-cols-2 gap-3">
                    @foreach (var b in SiteData.Brands)
                    {
                        <div class="flex items-center gap-3 p-3 bg-white rounded-xl border border-gray-100">
                            <div class="w-9 h-9 rounded-lg flex items-center justify-center text-sm font-bold shrink-0"
                                 style="background-color:@b.Color;color:@b.TextColor">@b.Name[0]</div>
                            <div>
                                <div class="font-bold text-gray-800 text-sm">@b.NameFa</div>
                                @if (b.IsOfficial) { <div class="text-xs text-yellow-600 font-medium">نمایندگی رسمی</div> }
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>

        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-6">موقعیت روی نقشه</h2>
            <div class="rounded-2xl overflow-hidden border border-gray-200 mb-6" style="height:320px">
                <iframe src="@mapUrl"
                        width="100%" height="320" style="border:0" loading="lazy"
                        title="موقعیت آساد ابزار کرج در نقشه"></iframe>
            </div>
            <p class="text-xs text-gray-400 mb-4">
                نقشه از <a href="https://www.openstreetmap.org" target="_blank" class="underline">OpenStreetMap</a> —
                پس از تعیین آدرس دقیق، مختصات را در <code>SiteData.Company.MapLat/MapLng</code> به‌روز کنید.
            </p>
            <div class="bg-yellow-50 border border-yellow-200 rounded-2xl p-5">
                <h3 class="font-bold text-gray-900 mb-2">مراجعه حضوری</h3>
                <p class="text-sm text-gray-600 leading-7">
                    برای تعمیر ابزار می‌توانید حضوراً مراجعه کنید یا با تماس قبلی ابزار خود را برای ما ارسال نمایید.
                    پس از تشخیص عیب، هزینه تعمیر اعلام می‌شود.
                </p>
            </div>
        </div>
    </div>
</div>