{{-- Expects: $plan --}}
<div class="zylo-panel relative flex flex-col p-6
            {{ $plan->is_featured ? 'border-electric-500/50 shadow-glow' : '' }}">

    @if ($plan->is_featured)
        <span class="absolute -top-3 left-6 rounded-full border border-electric-400
                     bg-electric-500 px-3 py-0.5 text-xs font-medium text-white">
            Most popular
        </span>
    @endif

    <h3 class="font-display text-lg font-semibold text-silver-100">{{ $plan->name }}</h3>

    @if ($plan->tagline)
        <p class="mt-1 text-sm text-silver-400">{{ $plan->tagline }}</p>
    @endif

    <div class="mt-5 flex items-baseline gap-1.5">
        <span class="font-display text-4xl font-bold text-silver-100">
            {{ format_money($plan->price_cents, $plan->currency) }}
        </span>
        <span class="text-sm text-silver-500">{{ $plan->billing_interval->suffix() }}</span>
    </div>

    @if ($plan->trial_days > 0)
        <p class="mt-2 text-xs text-cyan-300">{{ $plan->trial_days }}-day free trial</p>
    @endif

    <ul class="mt-6 flex-1 space-y-3 text-sm">
        @php
            // Device limit, data allowance and location scope are derived from
            // the plan's own columns rather than duplicated into the features
            // JSON, so they cannot disagree with what is actually enforced.
            $derived = [
                $plan->device_limit === 1
                    ? '1 device'
                    : $plan->device_limit.' devices',
                $plan->isUnmetered()
                    ? 'Unmetered data'
                    : format_bytes($plan->data_limit_bytes).' per month',
                $plan->has_all_locations
                    ? 'All server locations'
                    : 'Selected server locations',
            ];

            if ($plan->speed_limit_mbps) {
                $derived[] = 'Up to '.$plan->speed_limit_mbps.' Mbps';
            }

            if ($plan->priority_routing) {
                $derived[] = 'Priority routing';
            }
        @endphp

        @foreach (array_merge($derived, $plan->features ?? []) as $feature)
            <li class="flex items-start gap-2.5">
                <svg class="mt-0.5 h-4 w-4 shrink-0 text-electric-400" viewBox="0 0 24 24"
                     fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                     stroke-linejoin="round" aria-hidden="true">
                    <path d="m5 13 4 4L19 7"/>
                </svg>
                <span class="text-silver-300">{{ $feature }}</span>
            </li>
        @endforeach
    </ul>

    <x-ui.button
        class="mt-7 w-full"
        :variant="$plan->is_featured ? 'primary' : 'secondary'"
        :href="route('register')">
        Get started
    </x-ui.button>
</div>