@props([
    'icon' => null,
    'iconImageUrl' => null,   
    'title' => 'عنوان الخدمة',
    'description' => 'وصف مختصر',
    'link' => '#',
])

<div {{ $attributes->merge(['class' => 'group relative bg-dark/80 backdrop-blur-md border border-gray-light/20 rounded-2xl p-8 transition-all duration-300 hover:-translate-y-2 hover:border-primary/40 hover:shadow-glow overflow-hidden']) }}>
    <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    <div class="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-primary to-secondary origin-right scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></div>

    <div class="relative z-10">
        {{-- أيقونة --}}
        <div class="w-14 h-14 rounded-xl bg-primary/15 border border-primary/30 flex items-center justify-center text-3xl mb-6 group-hover:bg-primary/30 group-hover:scale-110 transition-all duration-300">
            @if($iconImageUrl)
                <img src="{{ $iconImageUrl }}" alt="icon" class="w-8 h-8 object-contain">
            @elseif($icon)
                {{ $icon }}
            @else
                <span class="text-primary">⚙️</span>
            @endif
        </div>
        <h3 class="text-xl font-bold text-white mb-3">{{ $title }}</h3>
        <p class="text-gray-light text-sm leading-relaxed mb-6">{{ $description }}</p>
        <a href="{{ $link }}" class="inline-flex items-center gap-1.5 text-primary text-sm font-semibold hover:gap-2.5 transition-all duration-200">
            اعرف أكثر
            <span class="text-lg">←</span>
        </a>
    </div>
</div>