@props(['service', 'linked' => true])

@php $Tag = $linked ? 'a' : 'div'; @endphp

<{{ $Tag }} @if($linked) href="{{ route('sitebuilder.services.show', $service->slug) }}" @endif
    class="group block rounded-2xl border border-ink-900/5 bg-white p-7 shadow-sm transition hover:-translate-y-1 hover:shadow-xl">
    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-600 group-hover:bg-brand-600 group-hover:text-white transition">
        <x-sitebuilder.app-icon :name="$service->icon" class="h-6 w-6" />
    </div>
    <h3 class="mt-5 font-display text-xl font-semibold text-ink-900">{{ $service->title }}</h3>
    <p class="mt-2 text-sm leading-relaxed text-ink-800/65">{{ $service->short_description }}</p>
    <div class="mt-6 flex items-center justify-between border-t border-ink-900/5 pt-4 text-sm">
        <span class="text-ink-800/50">{{ $service->duration_minutes }} dk</span>
        <span class="font-display text-lg font-semibold text-brand-700">{{ number_format($service->price, 0, ',', '.') }} ₺</span>
    </div>
    @if($service->is_ai_available)
        <span class="mt-4 inline-flex items-center gap-1.5 rounded-full bg-gold-500/10 px-3 py-1 text-[11px] font-semibold text-gold-600">
            <x-sitebuilder.app-icon name="wand" class="h-3.5 w-3.5" /> Astro Bilge ile de sunulur
        </span>
    @endif
</{{ $Tag }}>