Pricing Cards

<div class="w-full max-w-6xl mx-auto space-y-10">
    <div class="text-center space-y-4">
        <h2 class="scroll-m-20 text-3xl sm:text-4xl font-semibold tracking-tight">
            Simple, transparent pricing
        </h2>
        <BbTypographyLead class="mx-auto max-w-2xl text-muted-foreground">
            Choose the plan that fits your needs. No hidden fees, no surprises. Cancel anytime.
        </BbTypographyLead>
    </div>

    <BbRadioGroup @bind-Value="selectedPlan" class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @* Free Plan *@
        <label class="cursor-pointer">
            <BbRadioGroupItem Value="free" class="sr-only peer" />
            <BbCard class="flex flex-col h-full transition-colors peer-data-[state=checked]:border-primary peer-data-[state=checked]:ring-1 peer-data-[state=checked]:ring-primary">
                <BbCardHeader>
                    <BbCardTitle>Free</BbCardTitle>
                    <div class="mt-2">
                        <span class="text-4xl font-bold">$0</span>
                        <span class="text-muted-foreground">/mo</span>
                    </div>
                    <BbCardDescription>Perfect for getting started</BbCardDescription>
                </BbCardHeader>
                <BbCardContent class="flex-1">
                    <ul class="space-y-3">
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>1 project</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>5GB storage</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>Community support</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>Basic analytics</span>
                        </li>
                    </ul>
                </BbCardContent>
                <BbCardFooter>
                    <BbButton Variant="ButtonVariant.Outline" class="w-full">Get Started</BbButton>
                </BbCardFooter>
            </BbCard>
        </label>

        @* Pro Plan *@
        <label class="cursor-pointer">
            <BbRadioGroupItem Value="pro" class="sr-only peer" />
            <BbCard class="flex flex-col h-full transition-colors peer-data-[state=checked]:border-primary peer-data-[state=checked]:ring-1 peer-data-[state=checked]:ring-primary">
                <BbCardHeader>
                    <div class="flex items-center justify-between">
                        <BbCardTitle>Pro</BbCardTitle>
                        <BbBadge>Most Popular</BbBadge>
                    </div>
                    <div class="mt-2">
                        <span class="text-4xl font-bold">$29</span>
                        <span class="text-muted-foreground">/mo</span>
                    </div>
                    <BbCardDescription>For growing teams and businesses</BbCardDescription>
                </BbCardHeader>
                <BbCardContent class="flex-1">
                    <ul class="space-y-3">
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>Unlimited projects</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>50GB storage</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>Priority support</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>Advanced analytics</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>Custom domains</span>
                        </li>
                    </ul>
                </BbCardContent>
                <BbCardFooter>
                    <BbButton class="w-full">Get Started</BbButton>
                </BbCardFooter>
            </BbCard>
        </label>

        @* Enterprise Plan *@
        <label class="cursor-pointer">
            <BbRadioGroupItem Value="enterprise" class="sr-only peer" />
            <BbCard class="flex flex-col h-full transition-colors peer-data-[state=checked]:border-primary peer-data-[state=checked]:ring-1 peer-data-[state=checked]:ring-primary">
                <BbCardHeader>
                    <BbCardTitle>Enterprise</BbCardTitle>
                    <div class="mt-2">
                        <span class="text-4xl font-bold">$99</span>
                        <span class="text-muted-foreground">/mo</span>
                    </div>
                    <BbCardDescription>For large-scale organizations</BbCardDescription>
                </BbCardHeader>
                <BbCardContent class="flex-1">
                    <ul class="space-y-3">
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>Everything in Pro</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>Unlimited storage</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>24/7 phone support</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>SSO &amp; SAML</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <!-- check icon SVG -->
                            <span>Dedicated manager</span>
                        </li>
                    </ul>
                </BbCardContent>
                <BbCardFooter>
                    <BbButton Variant="ButtonVariant.Outline" class="w-full">Contact Sales</BbButton>
                </BbCardFooter>
            </BbCard>
        </label>
    </BbRadioGroup>
</div>

@code {
    private string selectedPlan = "pro";
}