@props(['service'])

@php
    $imageUrl = $service->hero_image_path ? asset('storage/' . $service->hero_image_path) : null;
@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-[150px] grid-cols-[112px_1fr] gap-4 p-4">
        <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>
            <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>