@php
    $iconSvg = function (string $name, string $class = 'h-5 w-5') {
        $paths = [
            'server' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16M7 7h.01M7 12h.01M7 17h.01"/>',
            'design' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 9l-6 6m0 0H5v-4l6-6c2-2 5-2 7-2 0 2 0 5-2 7l-6 6z"/>',
            'shield' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l7 4v5c0 5-3.5 8-7 9-3.5-1-7-4-7-9V7l7-4z"/>',
            'ai' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v3M12 18v3M3 12h3M18 12h3M7 7l2 2M15 15l2 2M17 7l-2 2M9 15l-2 2"/><circle cx="12" cy="12" r="4" stroke-width="2"/>',
        ];

        return '<svg class="' . $class . '" fill="none" viewBox="0 0 24 24" stroke="currentColor">' . ($paths[$name] ?? $paths['server']) . '</svg>';
    };

    $categoryIcon = function ($cat) {
        $key = strtolower($cat->slug . ' ' . $cat->name_en . ' ' . $cat->name_ar);

        return str_contains($key, 'design') || str_contains($key, 'تصميم') ? 'design'
            : (str_contains($key, 'maintenance') || str_contains($key, 'security') || str_contains($key, 'صيانة') ? 'shield'
            : (str_contains($key, 'ai') || str_contains($key, 'ذكاء') ? 'ai' : 'server'));
    };
    $user = auth()->user();
    $isStaff = $user && method_exists($user, 'isStaff') && $user->isStaff();
    $startHref = ! $user ? route('register') : ($isStaff ? url('/admin') : route('customer.orders.create'));
    $startLabel = ! $user ? 'إنشاء حساب والبدء' : ($isStaff ? 'لوحة التحكم' : 'طلب خدمة جديد');
@endphp

<x-layouts.app :title="$pageTitle ?? 'خدماتنا'">
    <section class="zl-page-hero">
        <div class="zl-page-hero-grid">
            <div>
                <span class="zl-page-kicker">{{ $pageTitle ?? 'خدماتنا' }}</span>
                <h1 class="zl-page-title">استضافة، تصميم، وصيانة في منظومة واحدة واضحة</h1>
                <p class="zl-page-description">{{ $pageDescription ?? 'اختر الخدمة المناسبة لموقعك أو مشروعك، من البنية التحتية والاستضافة حتى التصميم والتطوير والدعم المستمر.' }}</p>
                <div class="mt-7 flex flex-wrap gap-3">
                    <a href="{{ $startHref }}" class="btn btn-primary">{{ $startLabel }}</a>
                    <a href="{{ route('quote.show') }}" class="btn btn-gold">عرض سعر مخصص</a>
                    <a href="{{ route('design.index') }}" class="btn btn-secondary">خدمات التصميم</a>
                </div>
                <div class="zl-hero-proof">
                    <div class="zl-hero-proof-item">طلب واضح بدون دفع إلكتروني إجباري</div>
                    <div class="zl-hero-proof-item">صور ومحتوى الخدمات من لوحة الإدارة</div>
                    <div class="zl-hero-proof-item">حلول مناسبة للمواقع والمتاجر</div>
                </div>
            </div>

            <div class="zl-visual-panel">
                <div class="grid gap-4">
                    @foreach(['استضافة مستقرة', 'تصميم واجهات', 'صيانة وحماية', 'حلول ذكية'] as $item)
                        <div class="flex items-center gap-3 rounded-2xl border border-[#e8edf2] bg-white p-4 shadow-soft">
                            <span class="zl-pixel-icon">{!! $iconSvg($loop->index === 0 ? 'server' : ($loop->index === 1 ? 'design' : ($loop->index === 2 ? 'shield' : 'ai'))) !!}</span>
                            <span class="font-black text-navy-900">{{ $item }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="zl-public-section">
        @if($categories->isEmpty())
            <x-empty-state title="جاري إعداد كتالوج الخدمات"
                           description="نضيف الآن قائمة الخدمات الكاملة. تواصل معنا للاطلاع على الخدمات المتاحة حاليًا."
                           actionLabel="تواصل معنا" :actionUrl="route('contact')" />
        @endif

        <div class="grid gap-8">
        @foreach($categories as $cat)
            <section id="{{ str_contains($cat->name, 'تصميم') || str_contains($cat->name, 'Design') || str_contains($cat->slug, 'design') ? 'design' : 'cat-' . $cat->slug }}" class="mb-12 scroll-mt-24">
                <div class="zl-service-band">
                    <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                        <div class="max-w-3xl">
                            <span class="zl-page-kicker">
                                <span class="zl-pixel-icon !h-7 !w-7">{!! $iconSvg($categoryIcon($cat), 'h-4 w-4') !!}</span>
                                ZLHOST
                            </span>
                            <h2 class="mt-4 text-2xl md:text-3xl font-black text-navy-900">{{ $cat->name }}</h2>
                            @if($cat->summary)
                                <p class="text-navy-600 mt-3 leading-8">{{ $cat->summary }}</p>
                            @endif
                        </div>
                        <a href="{{ $startHref }}" class="btn btn-secondary btn-sm">ابدأ الطلب</a>
                    </div>

                    @if($cat->services->isNotEmpty())
                        <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-5">
                            @foreach($cat->services as $svc)
                                <x-service-card :service="$svc" />
                            @endforeach
                        </div>
                    @else
                        <div class="empty-state">
                            <p class="text-navy-500">لا توجد خدمات معلنة في هذه الفئة حالياً.</p>
                        </div>
                    @endif
                </div>
            </section>
        @endforeach
        </div>
    </section>

    <x-cta-section />
</x-layouts.app>