@php
    $features = app()->getLocale() === 'ar' ? ($service->features_ar ?? []) : ($service->features_en ?? $service->features_ar ?? []);
    $process = $service->process_steps ?? [];
    $imageUrl = $service->hero_image_path ? asset('storage/' . $service->hero_image_path) : null;
    $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="$service->name" :description="$service->short_description">
    <section class="zl-page-hero">
        <div class="zl-page-hero-grid">
            <div>
                <a href="{{ route('services.index') }}#cat-{{ $service->category?->slug }}" class="text-brand-700 text-sm font-bold hover:text-brand-800">
                    ← {{ $service->category?->name ?? 'خدماتنا' }}
                </a>
                <h1 class="zl-page-title">{{ $service->name }}</h1>
                <p class="zl-page-description">{{ $service->tagline ?: $service->short_description }}</p>

                <div class="mt-7 flex flex-wrap gap-3">
                    @if($service->activePlans->isNotEmpty())
                        <a href="#plans" class="btn btn-primary btn-lg">شاهد الباقات</a>
                    @endif
                    <a href="{{ $startHref }}" class="btn btn-gold btn-lg">{{ $startLabel }}</a>
                    <a href="{{ route('quote.show', ['service' => $service->id]) }}" class="btn btn-secondary btn-lg">عرض سعر مخصص</a>
                    <a href="{{ route('contact') }}" class="btn btn-secondary btn-lg">تواصل مباشر</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">
                @if($imageUrl)
                    <img src="{{ $imageUrl }}" alt="{{ $service->name }}" class="h-72 w-full rounded-3xl object-cover">
                @else
                    <div class="zl-visual-screen">
                        <div class="h-5 w-2/3 rounded-full bg-white/80"></div>
                        <div class="mt-5 grid gap-3">
                            <div class="h-4 rounded-full bg-white/30"></div>
                            <div class="h-4 w-5/6 rounded-full bg-white/30"></div>
                            <div class="h-32 rounded-2xl bg-white/15"></div>
                        </div>
                    </div>
                @endif
                <div class="mt-5 rounded-3xl bg-white p-5 shadow-soft">
                    <h3 class="font-bold text-navy-900 mb-4">ماذا يميّز هذه الخدمة؟</h3>
                    <ul class="space-y-3 text-sm">
                        @forelse($features as $feature)
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 text-brand-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-width="2.4" d="M5 13l4 4L19 7"/></svg>
                                <span class="text-navy-700">{{ is_array($feature) ? ($feature['feature'] ?? $feature['label'] ?? reset($feature)) : $feature }}</span>
                            </li>
                        @empty
                            <li class="text-navy-500">سنتواصل معك بمزايا مخصصة لاحتياجك.</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- DESCRIPTION --}}
    @if($service->description)
        <section class="zl-public-section">
            <div class="zl-public-card p-6 md:p-8">
                <h2 class="text-2xl font-extrabold text-navy-900 mb-4">عن الخدمة</h2>
                <div class="prose prose-zinc max-w-none text-navy-700 leading-loose">
                    {!! nl2br(e($service->description)) !!}
                </div>
            </div>
        </section>
    @endif

    {{-- PROCESS --}}
    @if(!empty($process))
        <section class="zl-public-section">
            <x-section-title eyebrow="آلية العمل" title="كيف ننفّذ خدمتك" />
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                @foreach($process as $i => $step)
                    <div class="zl-process-step">
                        <span class="zl-process-number">{{ $i + 1 }}</span>
                        <h3 class="font-bold text-navy-900">{{ is_array($step) ? ($step['title_ar'] ?? $step['title'] ?? '') : $step }}</h3>
                        @if(is_array($step) && (!empty($step['description_ar']) || !empty($step['description'])))
                            <p class="text-sm text-navy-500 mt-2">{{ $step['description_ar'] ?? $step['description'] }}</p>
                        @endif
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    {{-- PLANS --}}
    @if($service->activePlans->isNotEmpty())
        <section id="plans" class="bg-white/60 py-12 md:py-16 border-y border-[#e8edf2] scroll-mt-24">
            <div class="zl-pixel-shell">
                <x-section-title eyebrow="الباقات" title="اختر الباقة المناسبة"
                                 description="جميع الباقات تشمل الدعم الفني وضمان الجودة." />
                <div class="grid md:grid-cols-2 lg:grid-cols-{{ min(4, $service->activePlans->count()) }} gap-5">
                    @foreach($service->activePlans as $plan)
                        <x-pricing-card :plan="$plan" :service="$service" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- FAQ --}}
    @if($service->relatedFaqs->isNotEmpty())
        <section class="zl-public-section max-w-5xl">
            <x-section-title eyebrow="أسئلة شائعة" title="إجابات سريعة عن هذه الخدمة" />
            <div class="space-y-3">
                @foreach($service->relatedFaqs as $faq)
                    <div class="zl-public-card overflow-hidden" x-data="{ show: false }">
                        <button type="button" @click="show = !show" class="w-full flex items-center justify-between gap-4 px-5 py-4 text-right">
                            <span class="font-semibold text-navy-900">{{ $faq->question }}</span>
                            <svg class="w-5 h-5 text-brand-600 transition-transform" :class="show && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-width="2" d="M6 9l6 6 6-6"/></svg>
                        </button>
                        <div x-show="show" x-cloak x-collapse class="px-5 pb-5 text-navy-700 leading-loose text-sm border-t border-border/50 pt-4">{{ $faq->answer }}</div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    {{-- TESTIMONIALS --}}
    @if($service->testimonials->isNotEmpty())
        <section class="zl-public-section">
            <x-section-title eyebrow="آراء عملائنا" title="قصص نجاح حقيقية" />
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
                @foreach($service->testimonials as $t)
                    <x-testimonial-card :testimonial="$t" />
                @endforeach
            </div>
        </section>
    @endif

    {{-- RELATED --}}
    @if($relatedServices->isNotEmpty())
        <section class="zl-public-section">
            <h2 class="text-xl font-extrabold text-navy-900 mb-5">خدمات أخرى قد تهمك</h2>
            <div class="grid md:grid-cols-3 gap-4">
                @foreach($relatedServices as $svc)
                    <x-service-card :service="$svc" />
                @endforeach
            </div>
        </section>
    @endif

    <x-cta-section :title="'هل أنت جاهز لطلب ' . $service->name . '؟'" />
</x-layouts.app>