Price Card code

@props([
    'plan',
    'price',
    'period' => '/mo',
    'description' => null,
    'features' => [],
    'featured' => false,
    'badge' => 'Most popular',
    'cta' => 'Get started',
    'href' => '#',
])

@php
    /*
    | Pricing plan card. Pass `features` as a flat array of strings, or use the
    | slot for custom content. Set `featured` to emphasize the recommended plan.
    |
    | Usage:
    |   <x-ui.price-card plan="Pro" price="$29" :features="['Unlimited projects', 'Priority support']" featured />
    */
    $wrap = $featured
        ? 'relative border-2 border-brand-500 bg-brand-50 shadow-xl shadow-brand-500/10 scale-[1.02] dark:bg-brand-950/40'
        : 'border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900';

    $planColor = 'text-gray-900 dark:text-white';
    $priceColor = 'text-gray-900 dark:text-white';
    $periodColor = 'text-gray-500 dark:text-gray-400';
    $descColor = 'text-gray-600 dark:text-gray-400';
    $featColor = 'text-gray-600 dark:text-gray-300';
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col rounded-2xl p-8 '.$wrap]) }}>
    @if ($featured)
        <span class="absolute -top-3 left-1/2 -translate-x-1/2">
            <x-ui.badge variant="brand" class="bg-brand-500 text-white dark:bg-brand-500 dark:text-white shadow">{{ $badge }}</x-ui.badge>
        </span>
    @endif

    <h3 class="text-lg font-semibold {{ $planColor }}">{{ $plan }}</h3>

    @if ($description)
        <p class="mt-1 text-sm {{ $descColor }}">{{ $description }}</p>
    @endif

    <div class="mt-5 flex items-baseline gap-1">
        <span class="text-4xl font-semibold tracking-tight {{ $priceColor }}">{{ $price }}</span>
        <span class="text-sm {{ $periodColor }}">{{ $period }}</span>
    </div>

    <div class="mt-6">
        <x-ui.button :href="$href" :variant="$featured ? 'primary' : 'outline'" block>{{ $cta }}</x-ui.button>
    </div>

    @if (count($features))
        <ul class="mt-8 space-y-3.5 text-sm">
            @foreach ($features as $feature)
                <li class="flex items-start gap-3 {{ $featColor }}">
                    <x-ui.icon name="check-circle" weight="fill" size="lg" class="shrink-0 text-brand-500" />
                    <span>{{ $feature }}</span>
                </li>
            @endforeach
        </ul>
    @endif

    {{ $slot }}
</div>