@php
    $heroStats = $stats ?? [];
    $serviceGroups = $featuredCategories->take(4);
    $plans = collect($hostingPlans ?? [])->take(4);
@endphp

<x-layouts.app title="ZLHOST | استضافة بلا حدود — استضافة، تصميم، صيانة، ذكاء اصطناعي">
    <div class="zl-home">
        {{-- Hero: light, compact, hosting-focused like the reference --}}
        <section class="zl-hero">
            <div class="container-wide relative py-10 md:py-14">
                <div class="grid lg:grid-cols-[1.02fr_.98fr] items-center gap-8">
                    <div class="order-2 lg:order-1">
                        <div class="zl-hero-visual">
                            <div class="absolute -top-4 end-8 h-24 w-24 rounded-full bg-brand-100 blur-2xl"></div>
                            <div class="relative flex items-end justify-center gap-4">
                                <div class="zl-server-tower">
                                    @for($i = 0; $i < 6; $i++)
                                        <div class="zl-server-slot">
                                            <span class="h-2 w-2 rounded-full bg-brand-400"></span>
                                            <span class="h-1.5 w-14 rounded-full bg-navy-600"></span>
                                        </div>
                                    @endfor
                                </div>

                                <div class="zl-device-card w-64 md:w-80 -me-8 md:-me-14">
                                    <div class="flex items-center justify-between border-b border-border pb-3">
                                        <div>
                                            <p class="text-sm font-extrabold text-navy-900">مركز استضافة ZLHOST</p>
                                            <p class="text-xs text-navy-500">لوحة مراقبة مبسطة</p>
                                        </div>
                                        <span class="badge badge-success">99.9%</span>
                                    </div>
                                    <div class="mt-4 grid grid-cols-2 gap-3">
                                        <div class="rounded-2xl bg-brand-50 p-3">
                                            <p class="text-xs text-navy-500">جاهزية الموقع</p>
                                            <p class="text-2xl font-extrabold text-brand-700">99.9%</p>
                                        </div>
                                        <div class="rounded-2xl bg-gold-50 p-3">
                                            <p class="text-xs text-navy-500">سرعة الاستجابة</p>
                                            <p class="text-2xl font-extrabold text-gold-700">0.8s</p>
                                        </div>
                                        <div class="col-span-2 rounded-2xl bg-navy-50 p-3">
                                            <div class="mb-2 flex items-center justify-between text-xs font-bold text-navy-700">
                                                <span>موارد السيرفر</span>
                                                <span>78%</span>
                                            </div>
                                            <div class="h-2 overflow-hidden rounded-full bg-white">
                                                <div class="h-full w-3/4 rounded-full bg-brand-600"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="absolute top-1 start-10 rounded-2xl bg-brand-700 px-4 py-3 text-white shadow-card">
                                    <svg class="mx-auto h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-width="2" d="M12 16V4m0 0l-4 4m4-4l4 4M4 20h16"/>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-1 lg:order-2 text-center lg:text-start">
                        <span class="badge badge-gold mb-3">استضافة بلا حدود</span>
                        <h1 class="text-3xl md:text-5xl font-extrabold leading-tight text-navy-950 text-balance">
                            حلول رقمية متكاملة<br>
                            <span class="text-brand-700">لأعمالك في السعودية</span>
                        </h1>
                        <p class="mt-4 text-base md:text-lg leading-relaxed text-navy-600 max-w-2xl lg:ms-auto">
                            استضافة سريعة، تصميم مواقع احترافي، ووردبريس مُدار، وحلول ذكاء اصطناعي بدعم عربي 24/7 وتجربة دفع يدوية آمنة عبر التحويل البنكي.
                        </p>
                        <div class="mt-6 flex flex-wrap items-center justify-center lg:justify-start gap-3">
                            <a href="{{ route('quote.show') }}" class="btn btn-primary btn-lg">اطلب عرض سعر</a>
                            <a href="https://wa.me/966500000000" target="_blank" rel="noopener" class="btn btn-whatsapp btn-lg">تواصل الآن</a>
                            <a href="{{ route('services.index') }}" class="btn btn-outline btn-lg">تصفح الخدمات</a>
                        </div>
                        <div class="mt-6 grid grid-cols-2 sm:grid-cols-4 gap-3">
                            @foreach([
                                ['v' => '99.9%', 'l' => 'جاهزية عالية'],
                                ['v' => '24/7', 'l' => 'دعم عربي'],
                                ['v' => '+5000', 'l' => 'عميل مستفيد'],
                                ['v' => 'SSL', 'l' => 'حماية مجانية'],
                            ] as $mini)
                                <div class="rounded-2xl border border-border/80 bg-white/80 px-3 py-3 text-center shadow-soft">
                                    <p class="font-extrabold text-brand-700">{{ $mini['v'] }}</p>
                                    <p class="text-xs font-bold text-navy-500">{{ $mini['l'] }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="container-wide -mt-5 relative z-10">
            <div class="zl-trust-strip grid grid-cols-2 md:grid-cols-5 divide-y md:divide-y-0 md:divide-x md:divide-x-reverse divide-border/70">
                @foreach([
                    ['title'=>'أداء فائق', 'text'=>'uptime 99.9%'],
                    ['title'=>'حماية متقدمة', 'text'=>'SSL + نسخ يومي'],
                    ['title'=>'دعم 24/7', 'text'=>'فريق عربي متخصص'],
                    ['title'=>'+2500', 'text'=>'مشروع رقمي'],
                    ['title'=>'+5000', 'text'=>'عميل مستفيد'],
                ] as $trust)
                    <div class="p-4 text-center">
                        <p class="font-extrabold text-navy-900">{{ $trust['title'] }}</p>
                        <p class="text-xs text-navy-500 mt-1">{{ $trust['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </section>

        @if(!empty($heroStats))
            <section class="container-wide py-9">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    @foreach($heroStats as $s)
                        <div class="zl-stat-card">
                            <p class="text-3xl font-extrabold text-brand-700">{{ $s['value'] }}</p>
                            <p class="text-sm text-navy-500 mt-1">{{ $s['label_ar'] }}</p>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        <section class="container-wide section-tight">
            <div class="section-title">
                <span class="badge badge-success mb-3">خدماتنا المتكاملة</span>
                <h2 class="text-2xl md:text-3xl font-extrabold text-navy-900">كل ما تحتاجه لإطلاق وتشغيل مشروعك</h2>
                <p class="mt-2 text-navy-500">خدمات منظمة بكثافة واضحة: استضافة، تصميم، صيانة ووردبريس، وحلول ذكاء اصطناعي.</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                @forelse($serviceGroups as $cat)
                    <div id="cat-{{ $cat->slug }}" class="zl-service-column">
                        <div class="mb-3 flex items-center justify-between">
                            <h3 class="font-extrabold text-navy-900">{{ $cat->name }}</h3>
                            <span class="service-icon-wrap !h-9 !w-9">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h10"/></svg>
                            </span>
                        </div>
                        <p class="mb-3 text-sm text-navy-500 line-clamp-2">{{ $cat->summary }}</p>
                        <a href="{{ route('services.index') }}#cat-{{ $cat->slug }}" class="zl-service-row">
                            <span class="zl-check-icon"><svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-width="3" d="M5 13l4 4L19 7"/></svg></span>
                            <span>استكشف خدمات {{ $cat->name }}</span>
                        </a>
                    </div>
                @empty
                    <div class="lg:col-span-4">
                        <x-empty-state title="جاري إعداد الخدمات" description="سيتم عرض خدمات ZLHOST قريبًا." />
                    </div>
                @endforelse
            </div>
        </section>

        @if($plans->isNotEmpty())
            <section class="bg-white py-10 md:py-14 border-y border-border/70">
                <div class="container-wide">
                    <div class="section-title">
                        <span class="badge badge-gold mb-3">باقات الاستضافة</span>
                        <h2 class="text-2xl md:text-3xl font-extrabold text-navy-900">باقات عملية تبدأ من مشروعك الحالي وتنمو معه</h2>
                        <p class="mt-2 text-navy-500">اطلب الخدمة، حوّل يدويًا، وارفع الإيصال من لوحة العميل. لا يوجد Checkout أو بوابة دفع.</p>
                    </div>
                    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
                        @foreach($plans as $plan)
                            <x-pricing-card :plan="$plan" />
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        <section class="container-wide section-tight">
            <div class="grid lg:grid-cols-[1fr_1.2fr] gap-5 items-stretch">
                <div class="rounded-3xl bg-gradient-to-br from-brand-900 to-brand-700 text-white p-6 md:p-8 shadow-card">
                    <span class="badge badge-gold mb-3 bg-gold-400 text-navy-950 border-gold-400">WordPress Care</span>
                    <h2 class="text-2xl md:text-3xl font-extrabold text-white">صيانة وإدارة ووردبريس باحترافية</h2>
                    <p class="mt-3 text-brand-50 leading-relaxed">تحديثات، نسخ احتياطية، مراقبة أداء، حماية، وتقارير شهرية تضمن استقرار موقعك.</p>
                    <a href="{{ route('quote.show') }}" class="btn btn-gold mt-5">اطلب الباقة</a>
                </div>
                <div class="grid sm:grid-cols-2 gap-4">
                    @foreach([
                        ['title'=>'برمجة مواقع وتطبيقات', 'text'=>'حلول مخصصة قابلة للتوسع'],
                        ['title'=>'متاجر إلكترونية', 'text'=>'واجهة بيع وتجربة طلب احترافية'],
                        ['title'=>'روبوتات محادثة', 'text'=>'مساعد ذكي لخدمة العملاء'],
                        ['title'=>'حماية واستضافة', 'text'=>'SSL ونسخ ومراقبة مستمرة'],
                    ] as $feature)
                        <div class="service-card">
                            <span class="service-icon-wrap mb-3"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-width="2" d="M5 13l4 4L19 7"/></svg></span>
                            <h3 class="font-extrabold text-navy-900">{{ $feature['title'] }}</h3>
                            <p class="text-sm text-navy-500 mt-1">{{ $feature['text'] }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        @if($testimonials->isNotEmpty())
            <section class="container-wide section-tight">
                <div class="section-title">
                    <span class="badge badge-success mb-3">آراء عملائنا</span>
                    <h2 class="text-2xl md:text-3xl font-extrabold text-navy-900">شركات وأصحاب مشاريع يثقون في ZLHOST</h2>
                </div>
                <div class="grid md:grid-cols-3 gap-5">
                    @foreach($testimonials->take(3) as $testimonial)
                        <x-testimonial-card :testimonial="$testimonial" />
                    @endforeach
                </div>
            </section>
        @endif
    </div>
</x-layouts.app>