@php
    $features = app()->getLocale() === 'ar' ? ($service->features_ar ?? []) : ($service->features_en ?? $service->features_ar ?? []);
    $process = $service->process_steps ?? [];
@endphp

<x-layouts.app :title="$service->name" :description="$service->short_description">
    {{-- HERO --}}
    <section class="zl-public-hero">
        <div class="zl-pixel-shell relative z-10 grid lg:grid-cols-2 gap-10 items-center">
            <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-public-title text-start">{{ $service->name }}</h1>
                <p class="mt-4 text-navy-600 text-lg leading-relaxed">{{ $service->tagline }}</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="{{ route('quote.show', ['service' => $service->slug]) }}" class="btn btn-gold btn-lg">اطلب عرض سعر</a>
                    <a href="{{ route('contact') }}" class="btn btn-secondary btn-lg">تواصل</a>
                </div>
            </div>

            <div>
                <div class="zl-public-card p-6 md:p-8">
                    <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['label'] ?? '') : $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 max-w-5xl">
            <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-public-card p-6">
                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-brand-600 text-white font-bold mb-3">{{ $i + 1 }}</span>
                        <h3 class="font-bold text-navy-900">{{ is_array($step) ? ($step['title'] ?? '') : $step }}</h3>
                        @if(is_array($step) && !empty($step['description']))
                            <p class="text-sm text-navy-500 mt-2">{{ $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>