<x-app-layout :title="$title">
    <x-settings.page :title="$title" :description="$description">
        <div class="mb-4 flex flex-wrap items-center gap-2 text-sm">
            <a href="{{ route('care.settings') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
            <span class="text-slate-300">/</span>
            <span class="font-medium text-slate-900">{{ $title }}</span>
        </div>

        <x-settings.card title="Upgrade your plan">
            <p class="text-sm text-slate-600">
                GHS {{ number_format($proPriceMinor / 100, 0) }} / branch / month for Pro —
                multi-branch locations, laboratory, pharmacy, encounter billing, and in-app service queues.
            </p>
            <div class="mt-4 flex flex-wrap items-center gap-3">
                <a href="{{ route('care.pro.index') }}" class="btn-primary">View plans</a>
                <a href="{{ route('care.wallet') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Top up</a>
            </div>
        </x-settings.card>
    </x-settings.page>
</x-app-layout>
