<x-public-layout>
    <div class="min-h-screen bg-gray-50 py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                {{-- Header --}}
                <div class="text-center mb-12">
                    <h1 class="text-4xl font-bold text-gray-900 mb-4">الضمان الشامل</h1>
                    <p class="text-xl text-gray-600">
                        نقدم ضماناً شاملاً على جميع سياراتنا المستوردة لراحة بالكم
                    </p>
                </div>

                {{-- Warranty Details --}}
                <div class="grid md:grid-cols-2 gap-8 mb-12">
                    <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
                        <div class="flex items-center gap-2 mb-4">
                            <x-icon name="Shield" class="h-6 w-6 text-blue-600" />
                            <h3 class="font-bold text-lg">الضمان الأساسي</h3>
                        </div>
                        <p class="text-gray-500 text-sm mb-4">تغطية شاملة للمحرك وناقل الحركة والهيكل</p>
                        <ul class="space-y-3">
                            @foreach(['المحرك وناقل الحركة', 'نظام التوجيه والمكابح', 'نظام التكييف والتدفئة', 'النظام الكهربائي'] as $item)
                                <li class="flex items-center gap-2 text-sm text-gray-700">
                                    <x-icon name="Check" class="h-4 w-4 text-green-600" />
                                    <span>{{ $item }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
                        <div class="flex items-center gap-2 mb-4">
                            {{-- Clock icon approximation --}}
                            <div class="h-6 w-6 text-blue-600">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <h3 class="font-bold text-lg">مدة الضمان</h3>
                        </div>
                        <p class="text-gray-500 text-sm mb-4">فترة ضمان تناسب احتياجاتكم</p>
                        <ul class="space-y-3">
                            @foreach(['سنة واحدة أو 20,000 كم', 'سنتان أو 40,000 كم', 'ثلاث سنوات أو 60,000 كم', 'خمس سنوات أو 100,000 كم'] as $item)
                                <li class="flex items-center gap-2 text-sm text-gray-700">
                                    <x-icon name="Check" class="h-4 w-4 text-green-600" />
                                    <span>{{ $item }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                {{-- Terms --}}
                <div class="bg-white rounded-lg shadow-sm p-8 mb-8 border border-gray-100">
                    <div class="flex items-center gap-2 mb-6 border-b pb-4">
                        {{-- File Text icon approximation --}}
                        <div class="h-6 w-6 text-blue-600">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                            </svg>
                        </div>
                        <h2 class="text-2xl font-bold">شروط الضمان</h2>
                    </div>
                    
                    <div class="prose max-w-none text-gray-700">
                        <h3 class="text-lg font-semibold mb-4">التغطية تشمل:</h3>
                        <ul class="list-disc list-inside space-y-2 mb-6">
                            <li>جميع الأعطال الميكانيكية والكهربائية</li>
                            <li>قطع الغيار الأصلية واليدوية</li>
                            <li>أجور العمالة المعتمدة</li>
                            <li>خدمة الطريق على الطريق 24/7</li>
                            <li>سيارة بديلة خلال فترة الصيانة</li>
                        </ul>

                        <h3 class="text-lg font-semibold mb-4">الاستثناءات:</h3>
                        <ul class="list-disc list-inside space-y-2">
                            <li>التآكل والاستهلاك الطبيعي</li>
                            <li>الأضرار الناتجة عن الحوادث</li>
                            <li>الإهمال في الصيانة الدورية</li>
                            <li>الاستخدام غير السليم للسيارة</li>
                            <li>التعديلات غير المعتمدة</li>
                        </ul>
                    </div>
                </div>

                {{-- CTA --}}
                <div class="bg-blue-50 rounded-2xl p-8 text-center border border-blue-100">
                    <h3 class="text-xl font-bold text-blue-900 mb-4">للاستفسار عن الضمان</h3>
                    <p class="text-blue-700 mb-6">
                        تواصل معنا للحصول على تفاصيل كاملة عن برامج الضمان المتاحة
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="tel:+201555767729" class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold shadow-sm hover:shadow-md">
                            اتصل بنا
                        </a>
                        <a href="{{ route('contact') }}" class="bg-white border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors font-semibold">
                            نموذج التواصل
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-public-layout>
