@php
    use App\Services\PlanMapper;

    $mode = $mode ?? 'dashboard';
    $idPrefix = $idPrefix ?? 'plan';
    $isDashboard = $mode === 'dashboard';
    $isMarketing = $mode === 'marketing';

    if ($isDashboard) {
        $planName = $planName ?? '';
        $planExpired = $planExpired ?? true;
        $isMonthly = $isMonthly ?? true;
    }
@endphp

            <!-- Pricing Toggle -->
            <div class="flex flex-col items-center mb-10 mt-6">
                <div class="inline-flex items-center bg-gray-100 dark:bg-gray-800 rounded-full p-1 shadow-sm">
                    <button id="{{ $idPrefix }}-monthlyToggle" class="px-8 py-2.5 rounded-full text-sm font-bold transition-all duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
                        Monthly
                    </button>
                    <button id="{{ $idPrefix }}-yearlyToggle" class="px-8 py-2.5 rounded-full text-sm font-bold transition-all duration-200 bg-blue-600 text-white shadow-md">
                        Yearly
                        <span class="ml-2 text-xs text-green-600 dark:text-green-400 font-bold">{{ pricing()->monthsFree('Reply') }} months free</span>
                    </button>
                </div>
            </div>





        <!-- Monthly Pricing -->
        <div id="{{ $idPrefix }}-monthlyPricing" class="pricing-section hidden">
            <div class="container mx-auto max-width-xs px-4 sm:px-6 lg:px-10">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5 justify-items-center">

                <div
                    class="w-full max-w-xs mx-auto md:mx-0 p-6 bg-white border border-gray-200 rounded-2xl shadow-sm dark:bg-gray-800 dark:border-gray-700 flex flex-col">
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Starter
                        @if ($isDashboard)
                        @if ($planName == 'Starter' && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold"></span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight">Free</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400"> </span>
                    </div>

                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">


                            <span
                                class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">&nbsp;</span>
                        </li>
                        <li class="flex space-x-3">

                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">No
                                contract term</span>
                        </li>


                        <li class="flex space-x-3">

                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">25 invites / month</span>
                        </li>
                        <li class="flex space-x-3">

                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">5 replies / month</span>
                        </li>

                        <li class="flex space-x-3">

                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">QR code</span>
                        </li>

                        <li class="flex space-x-3">

                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Full support</span>
                        </li>
                        <li class="flex space-x-3">

                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Auto Language</span>
                        </li>

                    </ul>

                    <div class="mt-auto">
                        <div class="bg-white pt-2 pb-2 rounded-lg w-full">
                            <div class="relative bg-inherit w-full">
                                <input type="text" value="1 account" readonly
                                    class="peer bg-transparent h-10 sm:h-12 w-full rounded-lg text-black ring-0 px-2 sm:px-3 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                                    placeholder="Accounts">
                            </div>
                        </div>

                        @include('partials.pricing-plans-cta', ['card' => 'starter', 'period' => 'monthly', 'mode' => $mode, 'idPrefix' => $idPrefix, 'isMarketing' => $isMarketing, 'isDashboard' => $isDashboard, 'planName' => $isDashboard ? ($planName ?? '') : '', 'planExpired' => $isDashboard ? ($planExpired ?? true) : true, 'isMonthly' => $isDashboard ? ($isMonthly ?? true) : true])
                    </div>

                </div>

                <div
                    class="w-full max-w-xs mx-auto md:mx-0 p-6 bg-white border border-gray-200 rounded-2xl shadow-sm dark:bg-gray-800 dark:border-gray-700 flex flex-col">
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Reply
                        @if ($isDashboard)
                        @if (PlanMapper::isPlan($planName, ['Pro Monthly', 'Pro Yearly', 'Reply', 'Pro Trial', 'Reply Trial']) && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold">$</span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight">{{ (int) pricing()->amount('Reply', 'monthly') }}</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400">/month </span>
                    </div>
                    <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 mt-1 min-h-[1rem]"></div>
                    <div class="text-xs text-gray-400 dark:text-gray-500 mb-2">No contract · cancel anytime</div>

                    <!-- List -->
                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">
                            <span class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">Free Features plus</span>
                        </li>

                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">500 replies / month</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">AI reply signature</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Auto reply</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Add user</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">AI connection support</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Multi-branch from $20/mo</span>
                        </li>
                    </ul>

                    <div class="mt-auto">
                        <div class="bg-white pt-2 pb-2 rounded-lg w-full">
                            <div class="relative bg-inherit w-full">
                                <select id="{{ $idPrefix }}-quantitySelectPro" name="voice"
                                    class="peer bg-transparent h-10 sm:h-12 w-full rounded-lg text-black placeholder-transparent ring-0 px-2 sm:px-3 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                                    placeholder="Voice">
                                    @for ($i = 1; $i <= 9; $i++)
                                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'account' : 'accounts' }}{{ $i === 9 ? ' — or see Agency' : '' }}</option>
                                    @endfor
                                </select>

                                <label for="{{ $idPrefix }}-quantitySelectPro"
                                    class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-black-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-blue-600 peer-focus:text-sm transition-all">Number
                                    of businesses</label>
                            </div>
                        </div>
                        <div id="{{ $idPrefix }}-reply-saving-monthly" class="text-xs font-semibold text-green-700 dark:text-green-400 mt-2 hidden"></div>

                        @include('partials.pricing-plans-cta', ['card' => 'reply', 'period' => 'monthly', 'mode' => $mode, 'idPrefix' => $idPrefix, 'isMarketing' => $isMarketing, 'isDashboard' => $isDashboard, 'planName' => $isDashboard ? ($planName ?? '') : '', 'planExpired' => $isDashboard ? ($planExpired ?? true) : true, 'isMonthly' => $isDashboard ? ($isMonthly ?? true) : true])
                    </div>

                </div>

                <div
                    class="relative w-full max-w-xs mx-auto md:mx-0 p-4 sm:p-6 md:p-8 bg-white border-2 border-blue-600 rounded-xl shadow-2xl dark:bg-gray-800 dark:border-blue-500 flex flex-col transform scale-105 hover:scale-[1.02] transition-all duration-300 z-10">
                    <!-- Popular Badge -->
                    <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 z-20">
                        <span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs sm:text-sm font-bold bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg">
                            ⭐ Most Popular
                        </span>
                    </div>
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Invite + Reply
                        @if ($isDashboard)
                        @if (PlanMapper::isPlan($planName, ['Multi Pro Monthly', 'Multi Pro Yearly', 'Invite Reply', 'Multi Pro Trial', 'Invite Reply Trial']) && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold">$</span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight text-blue-600 dark:text-blue-400">{{ (int) pricing()->amount('InviteReply', 'monthly') }}</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400">/month </span>
                    </div>
                    <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 mt-1 min-h-[1rem]"></div>
                    <div class="text-xs text-gray-400 dark:text-gray-500 mb-2">No contract · cancel anytime</div>

                    <!-- List -->
                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">
                            <span class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">Reply Features plus</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">2,500 invites / month</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Auto calendar invite</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">AI attribute questions</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Email invite</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Insight report</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Multi-branch from $34/mo</span>
                        </li>

                        
                    </ul>

                    <div class="mt-auto">
                        <div class="bg-white pt-2 pb-2 rounded-lg w-full">
                            <div class="relative bg-inherit w-full">
                                <select id="{{ $idPrefix }}-quantitySelectInvite" name="voice"
                                    class="peer bg-transparent h-10 sm:h-12 w-full rounded-lg text-black placeholder-transparent ring-0 px-2 sm:px-3 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                                    placeholder="Voice">
                                    @for ($i = 1; $i <= 9; $i++)
                                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'account' : 'accounts' }}{{ $i === 9 ? ' — or see Agency' : '' }}</option>
                                    @endfor
                                </select>

                                <label for="{{ $idPrefix }}-quantitySelectInvite"
                                    class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-black-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-blue-600 peer-focus:text-sm transition-all">Number
                                    of businesses</label>
                            </div>
                        </div>
                        <div id="{{ $idPrefix }}-invite-saving-monthly" class="text-xs font-semibold text-green-700 dark:text-green-400 mt-2 hidden"></div>

                        @include('partials.pricing-plans-cta', ['card' => 'invite', 'period' => 'monthly', 'mode' => $mode, 'idPrefix' => $idPrefix, 'isMarketing' => $isMarketing, 'isDashboard' => $isDashboard, 'planName' => $isDashboard ? ($planName ?? '') : '', 'planExpired' => $isDashboard ? ($planExpired ?? true) : true, 'isMonthly' => $isDashboard ? ($isMonthly ?? true) : true])
                    </div>

                </div>

                <div
                    class="w-full max-w-xs mx-auto md:mx-0 p-6 bg-white border border-gray-200 rounded-2xl shadow-sm dark:bg-gray-800 dark:border-gray-700 flex flex-col">
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Agency / Reseller
                        @if ($isDashboard)
                        @if (PlanMapper::isPlan($planName, ['Agency / Reseller']) && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold">$</span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight">{{ (int) pricing()->amount('AgencyReseller', 'monthly') }}</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400">/month </span>
                    </div>

                    <!-- List -->
                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">
                            <span class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">Invite + Reply features plus</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">10+ branches</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">API access + documentation</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Your logo + name on emails</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">AI connection support</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Priority support</span>
                        </li>
                    </ul>

                    <div class="mt-auto">
                        <div class="bg-white pt-2 pb-2 rounded-lg w-full">
                            <div class="relative bg-inherit w-full">
                                <select id="{{ $idPrefix }}-quantitySelectAgency" name="voice"
                                    class="peer bg-transparent h-10 sm:h-12 w-full rounded-lg text-black placeholder-transparent ring-0 px-2 sm:px-3 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                                    placeholder="Voice">
                                    <option value="1">10 Accounts</option>
                                    <option value="2">20 Accounts</option>
                                    <option value="5">50 Accounts</option>
                                    <option value="10">100 Accounts</option>
                                </select>

                                <label for="{{ $idPrefix }}-quantitySelectAgency"
                                    class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-black-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-blue-600 peer-focus:text-sm transition-all">Number
                                    of businesses</label>
                            </div>
                        </div>

                        @include('partials.pricing-plans-cta', ['card' => 'agency', 'period' => 'monthly', 'mode' => $mode, 'idPrefix' => $idPrefix, 'isMarketing' => $isMarketing, 'isDashboard' => $isDashboard, 'planName' => $isDashboard ? ($planName ?? '') : '', 'planExpired' => $isDashboard ? ($planExpired ?? true) : true, 'isMonthly' => $isDashboard ? ($isMonthly ?? true) : true])
                    </div>
                </div>

                </div>

                @if(false)
                <div
                    class="w-full max-w-xs mx-auto md:mx-0 p-4 sm:p-6 md:p-8 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 flex flex-col">
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Top 3 Maps
                        @if ($isDashboard)
                        @if (PlanMapper::isPlan($planName, ['Top 3 Maps', 'Top 3', 'Top 3 Trial']) && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold">$</span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight">99.90</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400">/month </span>
                    </div>

                    <!-- List -->
                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">
                            <span class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">Invite + Reply features plus</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Guaranteed Top 3 maps (12 keywords)</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Guaranteed AI overview (12 questions)</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Monthly report</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Exclusive each location</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Add accounts ($79.90)</span>
                        </li>
                        
                    </ul>

                    <div class="mt-auto">
                        <p class="mb-3 text-sm text-gray-500 dark:text-gray-400">Hosted Stripe checkout for the Top 3 monthly plan.</p>
                        @if (!PlanMapper::isPlan($planName, ['Top 3 Maps', 'Top 3', 'Top 3 Trial']) && !$planExpired)
                            <a id="top3Btn" href="https://buy.stripe.com/3cI4gzbWF103aRngcI6g81u" target="_blank" rel="noopener noreferrer"
                                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full">Start 7-day Free Trial</a>
                        @else
                            <a href="#"
                                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full cursor-not-allowed"
                                disabled>Active</a>
                        @endif
                    </div>


                </div>
                @endif

            </div>
        </div>

        <!-- Yearly Pricing -->
        <div id="{{ $idPrefix }}-yearlyPricing" class="pricing-section">
            <div class="container mx-auto max-width-xs px-4 sm:px-6 lg:px-10">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5 justify-items-center">

                <div
                    class="w-full max-w-xs mx-auto md:mx-0 p-6 bg-white border border-gray-200 rounded-2xl shadow-sm dark:bg-gray-800 dark:border-gray-700 flex flex-col">
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Starter
                        @if ($isDashboard)
                        @if (PlanMapper::isStarterPlan($planName) && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold"></span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight">Free</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400"> </span>
                    </div>

                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">
                            <span
                                class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">&nbsp;</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">No
                                contract term</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">25 invites / month</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">5 replies / month</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">QR code</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Full support</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Auto Language</span>
                        </li>
                    </ul>

                    <div class="mt-auto">
                        <div class="bg-white pt-2 pb-2 rounded-lg w-full">
                            <div class="relative bg-inherit w-full">
                                <input type="text" value="1 account" readonly
                                    class="peer bg-transparent h-10 sm:h-12 w-full rounded-lg text-black ring-0 px-2 sm:px-3 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                                    placeholder="Accounts">
                            </div>
                        </div>

                        @include('partials.pricing-plans-cta', ['card' => 'starter', 'period' => 'yearly', 'mode' => $mode, 'idPrefix' => $idPrefix, 'isMarketing' => $isMarketing, 'isDashboard' => $isDashboard, 'planName' => $isDashboard ? ($planName ?? '') : '', 'planExpired' => $isDashboard ? ($planExpired ?? true) : true, 'isMonthly' => $isDashboard ? ($isMonthly ?? true) : true])
                    </div>
                </div>

                <div
                    class="w-full max-w-xs mx-auto md:mx-0 p-6 bg-white border border-gray-200 rounded-2xl shadow-sm dark:bg-gray-800 dark:border-gray-700 flex flex-col">
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Reply
                        @if ($isDashboard)
                        @if (PlanMapper::isPlan($planName, ['Pro Monthly', 'Pro Yearly', 'Reply', 'Pro Trial', 'Reply Trial']) && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold">$</span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight">{{ (int) pricing()->amount('Reply', 'yearly') }}</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400">/year </span>
                    </div>
                    @php $replyYearly = pricing()->formatYearlyWithEquivalent('Reply'); @endphp
                    <div class="text-xs font-semibold text-green-700 dark:text-green-400 mt-1">{{ $replyYearly['equivalent'] }}</div>
                    <div class="text-xs text-gray-400 dark:text-gray-500 mb-2">{{ $replyYearly['footnote'] }}</div>

                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">
                            <span class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">Free Features plus</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">500 replies / month</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">AI reply signature</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Auto reply</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Add user</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Add accounts ($139)</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">AI connection support</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Multi-branch from $139/mo</span>
                        </li>
                    </ul>

                    <div class="mt-auto">
                        <div class="bg-white pt-2 pb-2 rounded-lg w-full">
                            <div class="relative bg-inherit w-full">
                                <select id="{{ $idPrefix }}-quantitySelectProYearly" name="voice"
                                    class="peer bg-transparent h-10 sm:h-12 w-full rounded-lg text-black placeholder-transparent ring-0 px-2 sm:px-3 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                                    placeholder="Voice">
                                    @for ($i = 1; $i <= 9; $i++)
                                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'account' : 'accounts' }}{{ $i === 9 ? ' — or see Agency' : '' }}</option>
                                    @endfor
                                </select>

                                <label for="{{ $idPrefix }}-quantitySelectProYearly"
                                    class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-black-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-blue-600 peer-focus:text-sm transition-all">Number
                                    of businesses</label>
                            </div>
                        </div>
                        <div id="{{ $idPrefix }}-reply-saving-yearly" class="text-xs font-semibold text-green-700 dark:text-green-400 mt-2 hidden"></div>

                        @include('partials.pricing-plans-cta', ['card' => 'reply', 'period' => 'yearly', 'mode' => $mode, 'idPrefix' => $idPrefix, 'isMarketing' => $isMarketing, 'isDashboard' => $isDashboard, 'planName' => $isDashboard ? ($planName ?? '') : '', 'planExpired' => $isDashboard ? ($planExpired ?? true) : true, 'isMonthly' => $isDashboard ? ($isMonthly ?? true) : true])
                    </div>
                </div>

                <div
                    class="relative w-full max-w-xs mx-auto md:mx-0 p-4 sm:p-6 md:p-8 bg-white border-2 border-blue-600 rounded-xl shadow-2xl dark:bg-gray-800 dark:border-blue-500 flex flex-col transform scale-105 hover:scale-[1.02] transition-all duration-300 z-10">
                    <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 z-20">
                        <span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs sm:text-sm font-bold bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg">
                            ⭐ Most Popular
                        </span>
                    </div>
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Invite + Reply
                        @if ($isDashboard)
                        @if (PlanMapper::isPlan($planName, ['Multi Pro Monthly', 'Multi Pro Yearly', 'Invite Reply', 'Multi Pro Trial', 'Invite Reply Trial']) && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold">$</span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight text-blue-600 dark:text-blue-400">{{ (int) pricing()->amount('InviteReply', 'yearly') }}</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400">/year </span>
                    </div>
                    @php $inviteYearly = pricing()->formatYearlyWithEquivalent('InviteReply'); @endphp
                    <div class="text-xs font-semibold text-green-700 dark:text-green-400 mt-1">{{ $inviteYearly['equivalent'] }}</div>
                    <div class="text-xs text-gray-400 dark:text-gray-500 mb-2">{{ $inviteYearly['footnote'] }}</div>

                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">
                            <span class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">Reply Features plus</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">2,500 invites / month</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Auto calendar invite</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">AI attribute questions</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Email invite</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Insight report</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Multi-branch from $239/mo</span>
                        </li>
                    </ul>

                    <div class="mt-auto">
                        <div class="bg-white pt-2 pb-2 rounded-lg w-full">
                            <div class="relative bg-inherit w-full">
                                <select id="{{ $idPrefix }}-quantitySelectInviteYearly" name="voice"
                                    class="peer bg-transparent h-10 sm:h-12 w-full rounded-lg text-black placeholder-transparent ring-0 px-2 sm:px-3 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                                    placeholder="Voice">
                                    @for ($i = 1; $i <= 9; $i++)
                                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'account' : 'accounts' }}{{ $i === 9 ? ' — or see Agency' : '' }}</option>
                                    @endfor
                                </select>

                                <label for="{{ $idPrefix }}-quantitySelectInviteYearly"
                                    class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-black-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-blue-600 peer-focus:text-sm transition-all">Number
                                    of businesses</label>
                            </div>
                        </div>
                        <div id="{{ $idPrefix }}-invite-saving-yearly" class="text-xs font-semibold text-green-700 dark:text-green-400 mt-2 hidden"></div>

                        @include('partials.pricing-plans-cta', ['card' => 'invite', 'period' => 'yearly', 'mode' => $mode, 'idPrefix' => $idPrefix, 'isMarketing' => $isMarketing, 'isDashboard' => $isDashboard, 'planName' => $isDashboard ? ($planName ?? '') : '', 'planExpired' => $isDashboard ? ($planExpired ?? true) : true, 'isMonthly' => $isDashboard ? ($isMonthly ?? true) : true])
                    </div>
                </div>

                <div
                    class="w-full max-w-xs mx-auto md:mx-0 p-4 sm:p-6 md:p-8 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 flex flex-col">
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Agency / Reseller
                        @if ($isDashboard)
                        @if (PlanMapper::isPlan($planName, ['Agency / Reseller']) && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold">$</span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight">{{ (int) pricing()->amount('AgencyReseller', 'yearly') }}</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400">/year </span>
                    </div>
                    @php $agencyYearly = pricing()->formatYearlyWithEquivalent('AgencyReseller'); @endphp
                    <div class="text-xs font-semibold text-green-700 dark:text-green-400 mt-1">{{ $agencyYearly['equivalent'] }}</div>
                    <div class="text-xs text-gray-400 dark:text-gray-500 mb-2">{{ $agencyYearly['footnote'] }}</div>

                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">
                            <span class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">Invite reply Features plus</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">10+ branches</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">API access + documentation</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Your logo + name on emails</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">AI connection support</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1  1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Priority support</span>
                        </li>
                    </ul>

                    <div class="mt-auto">
                        <div class="bg-white pt-2 pb-2 rounded-lg w-full">
                            <div class="relative bg-inherit w-full">
                                <select id="{{ $idPrefix }}-quantitySelectAgencyYearly" name="voice"
                                    class="peer bg-transparent h-10 sm:h-12 w-full rounded-lg text-black placeholder-transparent ring-0 px-2 sm:px-3 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600 text-sm sm:text-base"
                                    placeholder="Voice">
                                    <option value="1">10 Accounts</option>
                                    <option value="2">20 Accounts</option>
                                    <option value="5">50 Accounts</option>
                                    <option value="10">100 Accounts</option>
                                </select>

                                <label for="{{ $idPrefix }}-quantitySelectAgencyYearly"
                                    class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-black-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-blue-600 peer-focus:text-sm transition-all">Number
                                    of businesses</label>
                            </div>
                        </div>

                        @include('partials.pricing-plans-cta', ['card' => 'agency', 'period' => 'yearly', 'mode' => $mode, 'idPrefix' => $idPrefix, 'isMarketing' => $isMarketing, 'isDashboard' => $isDashboard, 'planName' => $isDashboard ? ($planName ?? '') : '', 'planExpired' => $isDashboard ? ($planExpired ?? true) : true, 'isMonthly' => $isDashboard ? ($isMonthly ?? true) : true])
                    </div>
                </div>

                </div>
                @if(false)
                <div
                    class="w-full max-w-xs mx-auto md:mx-0 p-4 sm:p-6 md:p-8 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 flex flex-col">
                    <h5 class="mb-4 text-lg sm:text-xl font-medium text-gray-500 dark:text-gray-400">Top 3 Maps
                        @if ($isDashboard)
                        @if (PlanMapper::isPlan($planName, ['Top 3 Maps', 'Top 3', 'Top 3 Trial']) && !$planExpired)
                                                    <span
                                                        class="bg-green-500 text-white text-xs font-semibold mr-2 px-3 py-1 rounded-full dark:bg-green-600">Active</span>
                                                @endif
                        @endif
                    </h5>
                    <div class="flex items-baseline text-gray-900 dark:text-white">
                        <span class="text-2xl sm:text-3xl font-semibold">$</span>
                        <span class="text-4xl sm:text-5xl font-extrabold tracking-tight">999</span>
                        <span class="ml-1 text-lg sm:text-xl font-normal text-gray-500 dark:text-gray-400">/year </span>
                    </div>

                    <ul role="list" class="space-y-3 sm:space-y-5 my-5 sm:my-7">
                        <li class="flex space-x-3">
                            <span class="text-sm sm:text-base font-semibold leading-tight text-gray-500 dark:text-gray-400">Invite reply Features plus</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Guaranteed Top 3 maps (12 keywords)</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Guaranteed AI overview (12 questions)</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Monthly report</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Exclusive each location</span>
                        </li>
                        <li class="flex space-x-3">
                            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <title>Check icon</title>
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm sm:text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Add accounts (Contact us)</span>
                        </li>
                    </ul>

                    <div class="mt-auto">
                        <p class="mb-3 text-sm text-gray-500 dark:text-gray-400">Hosted Stripe checkout for the Top 3 yearly plan.</p>
                        @if (!PlanMapper::isPlan($planName, ['Top 3 Maps', 'Top 3', 'Top 3 Trial']) && !$planExpired)
                            <a id="top3BtnYearly" href="https://buy.stripe.com/00g0284LE8IDeu45kX" target="_blank" rel="noopener noreferrer"
                                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full">Start 7-day Free Trial</a>
                        @else
                            <a href="#"
                                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full cursor-not-allowed"
                                disabled>Active</a>
                        @endif
                    </div>
                </div>
                @endif

            </div>
        </div>