@props([
    'name',
    'price',
    'buttonText',
    'perks' => [],
    'featured' => false,
    'dark' => false,
])

@php
    $cardClass = match(true) {
        $dark     => 'bg-primary border border-primary text-white',
        $featured => 'bg-white border-2 border-primary',
        default   => 'bg-white border border-zinc-300',
    };

    $buttonClass = $dark
        ? 'bg-white text-primary hover:bg-zinc-100'
        : 'bg-primary text-white hover:bg-primary-dark';
@endphp

<div {{ $attributes->merge(['class' => "p-8 rounded-3xl flex flex-col relative $cardClass"]) }}>

    @if ($featured)
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest whitespace-nowrap">
            Most Popular
        </div>
    @endif

    <div class="flex items-baseline justify-between mb-6">
        <h4 class="text-xl font-bold">{{ $name }}</h4>
        <div class="flex items-baseline gap-1">
            <span @class(['text-3xl font-black', 'text-primary' => $featured])>{{ $price }}</span>
            <span @class(['text-sm', 'text-zinc-500' => !$dark, 'text-zinc-400' => $dark])>/mo</span>
        </div>
    </div>

    <ul class="space-y-2 mb-6 flex-1">
        @foreach ($perks as $perk)
            <li @class(['text-sm flex gap-2 items-center', 'text-zinc-500' => !$perk['included'] && !$dark])>
                @if ($perk['included'])
                    <iconify-icon icon="lucide:check" class="text-primary shrink-0"></iconify-icon>
                @else
                    <iconify-icon icon="lucide:x" class="text-zinc-300 shrink-0"></iconify-icon>
                @endif
                {{ $perk['text'] }}
            </li>
        @endforeach
    </ul>

    <a href="{{ route('register') }}" class="w-full py-2.5 px-6 {{ $buttonClass }} rounded-full text-sm text-center font-bold shadow-lg transition-all hover:scale-105 active:scale-95">
        {{ $buttonText }}
    </a>

</div>