@props(['plan', 'service' => null])

@php
    $service = $service ?? $plan->service;
    $features = app()->getLocale() === 'ar' ? ($plan->features_ar ?? []) : ($plan->features_en ?? $plan->features_ar ?? []);
    $isPopular = $plan->is_popular ?? false;
    $strike = $plan->price_strikethrough && $plan->price_strikethrough > $plan->price;
@endphp

<div class="card card-hover card-padded relative {{ $isPopular ? 'ring-2 ring-brand-500/60 shadow-cardHover' : '' }}">
    @if($isPopular)
        <span class="absolute -top-3 inline-flex items-center gap-1 px-3 py-1 bg-gold-400 text-navy-900 text-xs font-bold rounded-full shadow-soft start-1/2 -translate-x-1/2">
            ⭐ الأكثر طلباً
        </span>
    @endif

    @if($plan->badge_label_ar)
        <span class="badge badge-info mb-2">{{ app()->getLocale() === 'ar' ? $plan->badge_label_ar : ($plan->badge_label_en ?? $plan->badge_label_ar) }}</span>
    @endif

    <h3 class="text-xl font-extrabold text-navy-900">{{ $plan->name }}</h3>
    @if($plan->summary_ar)
        <p class="text-sm text-navy-500 mt-1.5 line-clamp-2">
            {{ app()->getLocale() === 'ar' ? $plan->summary_ar : ($plan->summary_en ?? $plan->summary_ar) }}
        </p>
    @endif

    <div class="mt-5 flex items-baseline gap-2">
        @if($strike)
            <span class="text-sm text-navy-400 line-through">{{ number_format((float) $plan->price_strikethrough, 0) }}</span>
        @endif
        <span class="text-4xl font-extrabold text-brand-700">{{ number_format((float) $plan->price, 0) }}</span>
        <span class="text-sm font-semibold text-navy-500">{{ $plan->currency ?? 'SAR' }}</span>
    </div>
    <p class="text-xs text-navy-500 mt-1">{{ $plan->billingCycleLabelAr() }}</p>

    <ul class="mt-5 space-y-2.5 text-sm">
        @foreach($features as $feature)
            <li class="flex items-start gap-2">
                <svg class="w-5 h-5 text-brand-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M5 13l4 4L19 7"/>
                </svg>
                <span class="text-navy-700">{{ is_array($feature) ? ($feature['label'] ?? '') : $feature }}</span>
            </li>
        @endforeach
    </ul>

    <div class="mt-6 grid grid-cols-1 gap-2">
        @auth
            <a href="{{ route('customer.orders.create', ['plan' => $plan->id, 'service' => $service?->id]) }}"
               class="btn {{ $isPopular ? 'btn-primary' : 'btn-outline' }}">
                اطلب الآن
            </a>
        @else
            <a href="{{ route('register') }}?plan={{ $plan->id }}"
               class="btn {{ $isPopular ? 'btn-primary' : 'btn-outline' }}">
                اطلب الآن
            </a>
        @endauth
        <a href="{{ route('quote.show', ['plan' => $plan->id]) }}" class="btn btn-ghost btn-sm">اطلب عرض سعر مخصص</a>
    </div>
</div>