@php
    use App\Enums\SubscriptionPlan;

    // Name, certificate limit, price, and whether OCR is included all come
    // straight from SubscriptionPlan so this page can never drift from what
    // billing actually enforces — only the hand-written marketing copy below
    // (description/priceNote/cta/extra features) needs maintaining by hand.
    $copy = [
        SubscriptionPlan::Free->value => [
            'description' => __('Voor wie Certified wil proberen of maar een handvol certificaten beheert.'),
            'priceNote' => __('Voor altijd gratis, geen creditcard nodig'),
            'featured' => false,
            'cta' => __('Start gratis'),
            'features' => [
                __('Slimme e-mailreminders'),
                __('Veilig delen via signed URL'),
            ],
        ],
        SubscriptionPlan::Starter->value => [
            'description' => __("Voor wie meer dan een handvol eigen certificaten en diploma's bijhoudt."),
            'priceNote' => __('Eén vast bedrag, jaarlijks gefactureerd'),
            'featured' => true,
            'cta' => __('Start met :plan', ['plan' => SubscriptionPlan::Starter->label()]),
            'features' => [
                __('Slimme e-mailreminders'),
                __('Veilig delen via signed URL'),
                __('AES-256 versleutelde ZIP-export'),
            ],
        ],
        SubscriptionPlan::Unlimited->value => [
            'description' => __("Voor wie al zijn diploma's, VOG's en certificaten voorgoed op één plek wil bewaken."),
            'priceNote' => __('Eén vast bedrag, jaarlijks gefactureerd'),
            'featured' => false,
            'cta' => __('Start met :plan', ['plan' => SubscriptionPlan::Unlimited->label()]),
            'features' => [
                __('Slimme e-mailreminders'),
                __('Veilig delen via signed URL'),
                __('AES-256 versleutelde ZIP-export'),
                __('Prioriteit support'),
            ],
        ],
    ];
@endphp

<div>
    <div class="grid gap-8 lg:grid-cols-3 lg:gap-6">
        @foreach (SubscriptionPlan::cases() as $plan)
            @php
                $tier = $copy[$plan->value];
                $limit = $plan->certificateLimit();
                $euros = $plan->priceInclVatCents() / 100;
                $price = rtrim(rtrim(number_format($euros, 2, ',', '.'), '0'), ',');
                $exclVatEuros = $plan->priceInCents() / 100;
            @endphp
            <div @class([
                'relative flex flex-col rounded-3xl p-8 transition-all duration-300',
                'border-2 border-emerald-500 bg-white shadow-2xl shadow-emerald-500/15 lg:-my-4 lg:py-12 dark:bg-slate-900' => $tier['featured'],
                'border border-slate-200 bg-white shadow-sm hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-900/5 dark:border-slate-800 dark:bg-slate-900 dark:hover:shadow-black/30' => ! $tier['featured'],
            ])>
                @if ($tier['featured'])
                    <span class="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 px-4 py-1 text-xs font-bold tracking-wide text-white uppercase shadow-lg shadow-emerald-500/30">
                        {{ __('Meest gekozen') }}
                    </span>
                @endif

                <h3 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $plan->label() }}</h3>
                <p class="mt-2 min-h-12 text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $tier['description'] }}</p>

                <div class="mt-6 flex items-baseline gap-1.5">
                    <span class="text-4xl font-bold tracking-tight text-slate-900 dark:text-white">&euro;{{ $price }}</span>
                    <span class="text-sm font-medium text-slate-500 dark:text-slate-400">/ {{ __('jaar') }}</span>
                </div>
                @if ($plan->isPaid())
                    <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">
                        &euro;{{ number_format($exclVatEuros, 2, ',', '.') }} {{ __('excl. btw') }}
                    </p>
                @endif
                <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">{{ $tier['priceNote'] }}</p>

                <ul class="mt-8 flex-1 space-y-3.5 text-sm">
                    <li class="flex items-start gap-3">
                        <svg class="mt-0.5 size-4.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                        </svg>
                        <span class="text-slate-600 dark:text-slate-300">
                            {{ $limit === null ? __('Onbeperkt certificaten') : __('Maximaal :count certificaten', ['count' => $limit]) }}
                        </span>
                    </li>
                    @if ($plan->includesOcr())
                        <li class="flex items-start gap-3">
                            <svg class="mt-0.5 size-4.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <span class="text-slate-600 dark:text-slate-300">{{ __('Automatische OCR-scan') }}</span>
                        </li>
                    @endif
                    @foreach ($tier['features'] as $feature)
                        <li class="flex items-start gap-3">
                            <svg class="mt-0.5 size-4.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <span class="text-slate-600 dark:text-slate-300">{{ $feature }}</span>
                        </li>
                    @endforeach
                </ul>

                <a
                    href="{{ auth()->check() ? route('billing.edit') : route('register') }}"
                    @class([
                        'mt-10 block rounded-xl px-4 py-3 text-center text-sm font-semibold transition-all duration-200',
                        'bg-emerald-600 text-white shadow-lg shadow-emerald-600/25 hover:-translate-y-px hover:bg-emerald-500 hover:shadow-xl hover:shadow-emerald-500/30 active:translate-y-0' => $tier['featured'],
                        'border border-slate-300 text-slate-700 hover:border-emerald-500 hover:text-emerald-700 dark:border-slate-700 dark:text-slate-200 dark:hover:border-emerald-500 dark:hover:text-emerald-400' => ! $tier['featured'],
                    ])
                >{{ $tier['cta'] }}</a>
            </div>
        @endforeach
    </div>

    <p class="mt-10 text-center text-sm text-slate-500 dark:text-slate-400">
        {{ __('Alle prijzen zijn per jaar en inclusief 21% btw. Start gratis — upgraden kan altijd, opzeggen ook.') }}
    </p>
</div>