{{-- $service, $vip = bool --}}
@php $vip = $vip ?? false; @endphp
<div x-data="{ open: false }"
     class="group relative rounded-2xl p-5 sm:p-6 transition hover:-translate-y-0.5
            {{ $vip ? 'bg-gradient-to-br from-[#1a1206] via-[#111827] to-[#0a0f1e] border border-teal-500/30 shadow-card hover:shadow-teal-glow' : 'bg-[#111827] border border-white/5 shadow-card hover:border-white/10' }}">
    @if($vip)
        <div class="absolute -top-2 {{ app()->getLocale() === 'ar' ? '-left-2' : '-right-2' }} px-2 py-0.5 rounded-md bg-gradient-to-br from-teal-400 to-teal-600 text-[10px] font-extrabold text-[#0a0f1e] shadow-lg flex items-center gap-1">
            👑 VIP
        </div>
    @endif

    <div class="flex items-start gap-3">
        <div class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-2xl
                    {{ $vip ? 'bg-teal-500/15 ring-1 ring-teal-500/40' : 'bg-white/5 ring-1 ring-white/10' }}">
            <span aria-hidden="true">{{ $service->icon ?: '🤖' }}</span>
        </div>
        <div class="flex-1 min-w-0">
            <h3 class="font-bold text-white text-base sm:text-lg leading-snug">{{ $service->getName() }}</h3>
            @if($service->getDescription())
                <p class="mt-1 text-sm text-gray-400 leading-relaxed">{{ $service->getDescription() }}</p>
            @endif
        </div>
    </div>

    @if(count($service->getFeatures()))
        <div class="mt-4 space-y-1.5">
            @foreach($service->getFeatures() as $feat)
                <div class="flex items-start gap-2 text-sm text-gray-200">
                    <svg class="shrink-0 w-4 h-4 mt-0.5 text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z"/></svg>
                    <span>{{ $feat }}</span>
                </div>
            @endforeach
        </div>
    @endif

    @if($service->getHowToGet())
        <div class="mt-4 rounded-xl border border-white/5 bg-black/20">
            <button @click="open = !open" type="button" class="w-full flex items-center justify-between px-3.5 py-2.5 text-sm font-semibold text-gray-200 hover:text-white">
                <span class="flex items-center gap-2">
                    <span class="w-1.5 h-1.5 rounded-full bg-teal-400"></span>
                    {{ __('messages.how_to_get') }}
                </span>
                <svg class="w-4 h-4 transition-transform" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </button>
            <div x-show="open" x-collapse x-cloak>
                <div class="px-3.5 pb-3.5 text-sm text-gray-300 whitespace-pre-line border-t border-white/5 pt-3">
                    {{ $service->getHowToGet() }}
                </div>
            </div>
        </div>
    @endif

    @if($service->tutorial_link)
        <a href="{{ $service->tutorial_link }}" target="_blank" rel="noopener"
           class="mt-4 w-full inline-flex items-center justify-center gap-2 rounded-xl py-2.5 text-sm font-bold transition btn-teal shadow-lg shadow-teal-500/20 hover:brightness-110">
            <svg class="w-4 h-4 flip-rtl" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            {{ __('messages.watch_tutorial') }}
        </a>
    @endif
</div>