@props(['service', 'delay' => '0s'])

<a href="{{ route('services.show', $service['slug']) }}"
   class="card group relative overflow-hidden flex flex-col reveal" style="--d: {{ $delay }}">
    {{-- Photo header --}}
    <div class="media media-zoom aspect-[16/10]">
        @if (!empty($service['image']))
            <img src="{{ asset($service['image']) }}" alt="{{ $service['title'] }}" loading="lazy">
        @endif
        <div class="absolute inset-0 bg-gradient-to-t from-navy-900/55 via-navy-900/10 to-transparent"></div>
        <span class="absolute top-3 left-3 grid place-items-center w-11 h-11 rounded-xl border border-white/25 bg-white/15 backdrop-blur text-white">
            <x-icon :name="$service['icon']" class="w-6 h-6"/>
        </span>
        <span class="absolute top-4 right-4 font-mono text-xs font-semibold text-white/90">{{ $service['number'] }}</span>
    </div>

    <div class="p-6 flex flex-col flex-1">
        <h3 class="text-lg font-semibold text-slate-ink group-hover:text-brand-600 transition">{{ $service['title'] }}</h3>
        <p class="mt-2 text-sm text-slate-500 leading-relaxed flex-1">{{ $service['tagline'] }}</p>
        <span class="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-600">
            Explore
            <x-icon name="arrow" class="w-4 h-4 group-hover:translate-x-1 transition-transform"/>
        </span>
    </div>
</a>