@props(['service'])

@php
    $imageUrl = $service->hero_image_path ? asset('storage/' . $service->hero_image_path) : null;
    $features = collect(app()->getLocale() === 'ar' ? $service->features_ar : ($service->features_en ?? $service->features_ar))
        ->map(fn ($feature) => is_array($feature) ? ($feature['feature'] ?? reset($feature)) : $feature)
        ->filter()
        ->take(3);
@endphp

<a href="{{ route('services.show', $service->slug) }}"
   class="zl-public-card block group overflow-hidden transition-all hover:-translate-y-1 hover:shadow-cardHover">
    <div class="grid min-h-[170px] gap-4 p-4 sm:grid-cols-[128px_1fr]">
        <div class="zl-service-card-media">
            @if($imageUrl)
                <img src="{{ $imageUrl }}" alt="{{ $service->name }}" class="h-full w-full object-cover">
            @else
                <span class="zl-pixel-icon !h-14 !w-14">
                    <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                </span>
            @endif
        </div>
        <div class="min-w-0">
            <h3 class="font-bold text-navy-900 mb-1.5 group-hover:text-brand-700 transition-colors">{{ $service->name }}</h3>
            <p class="text-sm text-navy-500 line-clamp-2">{{ $service->short_description }}</p>
            @if($features->isNotEmpty())
                <ul class="mt-3 grid gap-1.5 text-xs text-navy-600">
                    @foreach($features as $feature)
                        <li class="flex items-center gap-1.5">
                            <span class="h-1.5 w-1.5 rounded-full bg-brand-500"></span>
                            <span>{{ $feature }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
            <span class="inline-flex items-center text-sm text-brand-700 font-semibold mt-3 group-hover:gap-2 gap-1 transition-all">
                التفاصيل
                <svg class="w-4 h-4 rtl-flip" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </span>
        </div>
    </div>
</a>