@props(['package'])

<div class="relative rounded-3xl border p-8 {{ $package->is_featured ? 'border-brand-500 bg-ink-950 text-white shadow-glow lg:-translate-y-4' : 'border-ink-900/10 bg-white' }}">
    @if($package->is_featured)
        <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-gold-500 to-gold-600 px-4 py-1 text-[11px] font-semibold text-ink-950">
            En Çok Tercih Edilen
        </span>
    @endif
    <h3 class="font-display text-xl font-semibold {{ $package->is_featured ? 'text-white' : 'text-ink-900' }}">{{ $package->name }}</h3>
    <p class="mt-1 text-sm {{ $package->is_featured ? 'text-white/60' : 'text-ink-800/60' }}">{{ $package->subtitle }}</p>
    <p class="mt-6 font-display text-4xl font-semibold {{ $package->is_featured ? 'text-white' : 'text-ink-900' }}">
        {{ number_format($package->price, 0, ',', '.') }} ₺
    </p>
    <ul class="mt-6 space-y-3">
        @foreach($package->features as $feature)
            <li class="flex items-start gap-3 text-sm {{ $package->is_featured ? 'text-white/75' : 'text-ink-800/70' }}">
                <span class="mt-0.5 flex h-5 w-5 flex-none items-center justify-center rounded-full {{ $package->is_featured ? 'bg-white/10 text-gold-400' : 'bg-brand-50 text-brand-600' }}">
                    <x-sitebuilder.app-icon name="check" class="h-3.5 w-3.5" />
                </span>
                {{ $feature }}
            </li>
        @endforeach
    </ul>
    <a href="{{ route('sitebuilder.randevu') }}" class="mt-8 block rounded-full px-6 py-3 text-center text-sm font-semibold transition {{ $package->is_featured ? 'bg-gradient-to-r from-gold-500 to-gold-600 text-ink-950 hover:opacity-90' : 'bg-brand-50 text-brand-700 hover:bg-brand-100' }}">
        Bu Paketi Seç
    </a>
</div>