@php
    use App\Services\PlanMapper;

    $idPrefix = $idPrefix ?? 'dashv2';
    $planName = $planName ?? '';
    $planExpired = $planExpired ?? true;
    $isMonthly = $isMonthly ?? true;
    $monthsFree = pricing()->monthsFree('Reply');

    $cardClass = 'relative flex w-full flex-col rounded-2xl border-[1.5px] border-line bg-white p-[22px] shadow-[0_1px_2px_rgba(11,21,38,.04)]';
    $featuredClass = 'relative order-first flex w-full flex-col rounded-2xl border-[1.5px] border-brand-blue bg-white p-[22px] shadow-[0_8px_28px_rgba(36,86,230,.14)] sm:order-none';
    $selectClass = 'w-full cursor-pointer rounded-[10px] border-[1.5px] border-line bg-white px-3 py-2.5 text-[13px] font-semibold text-ink';
    $savingClass = 'mt-2 hidden text-[11.5px] font-semibold text-brand-green-deep';

    $ctaArgs = fn (string $card, string $period) => [
        'card' => $card,
        'period' => $period,
        'idPrefix' => $idPrefix,
        'planName' => $planName,
        'planExpired' => $planExpired,
        'isMonthly' => $isMonthly,
    ];

    $activeBadge = '<span class="ml-2 rounded-full bg-brand-green px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-[0.04em] text-white">Active</span>';

    $checkGreen = 'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-brand-green-tint';
    $checkBlue = 'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-brand-blue-tint';
    $featLi = 'flex items-start gap-2.5 text-[12.5px] leading-snug text-ink-2';

    $replyMonthlyTotal = (int) pricing()->amount('Reply', 'monthly') * 12;
    $inviteMonthlyTotal = (int) pricing()->amount('InviteReply', 'monthly') * 12;
@endphp

{{-- Billing toggle --}}
<div class="mb-5 mt-1 mx-auto flex w-max items-center gap-1 rounded-full border border-line bg-white p-1">
    <button
        type="button"
        id="{{ $idPrefix }}-monthlyToggle"
        class="rounded-full bg-brand-blue px-[18px] py-2 text-[12.5px] font-bold text-white shadow-[0_3px_10px_rgba(36,86,230,.3)] transition"
    >
        Monthly
    </button>
    <button
        type="button"
        id="{{ $idPrefix }}-yearlyToggle"
        class="rounded-full px-[18px] py-2 text-[12.5px] font-bold text-muted transition"
    >
        Yearly
        <span class="ml-1 rounded-full bg-brand-green-tint px-2 py-0.5 text-[11px] font-bold text-brand-green-deep">{{ $monthsFree }} months free</span>
    </button>
</div>

{{-- ===================== Monthly ===================== --}}
<div id="{{ $idPrefix }}-monthlyPricing">
    <div class="grid grid-cols-1 gap-3.5 sm:grid-cols-2">

        {{-- Reply --}}
        <div class="{{ $cardClass }}">
            <div class="mb-2 font-sora text-[15px] font-bold text-ink">
                Reply
                @if (PlanMapper::isPlan($planName, ['Pro Monthly', 'Pro Yearly', 'Reply', 'Pro Trial', 'Reply Trial']) && !$planExpired){!! $activeBadge !!}@endif
            </div>
            <div class="mb-1 flex items-baseline gap-1.5">
                <span class="font-sora text-lg font-bold text-muted">$</span>
                <span class="font-sora text-[40px] font-extrabold leading-none tracking-[-0.03em] text-ink">{{ (int) pricing()->amount('Reply', 'monthly') }}</span>
                <span class="text-[12.5px] text-muted">/month</span>
            </div>
            <div class="mb-4 min-h-4 text-[11.5px] text-faint">No contract · cancel anytime</div>
            <ul class="mb-[18px] flex flex-1 flex-col gap-2.5">
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Everything in Free, plus</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span><b class="font-bold">500 AI replies</b>&nbsp;a month</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Auto-reply to every new review</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Your signature on every reply</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Add team members</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Multi-branch from $23.90/branch</li>
            </ul>
            <div class="mt-auto">
                <label for="{{ $idPrefix }}-quantitySelectPro" class="mb-1.5 block text-[10.5px] font-bold uppercase tracking-[0.07em] text-faint">Businesses</label>
                <select id="{{ $idPrefix }}-quantitySelectPro" name="voice" class="{{ $selectClass }}">
                    @for ($i = 1; $i <= 9; $i++)
                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'business' : 'businesses' }}</option>
                    @endfor
                </select>
                <div id="{{ $idPrefix }}-reply-saving-monthly" class="{{ $savingClass }}"></div>
                @include('dashboard.v2.pricing-plans-cta', $ctaArgs('reply', 'monthly'))
                <div class="mt-2.5 text-center text-[11px] text-faint">Replies only — invites stay on the free plan</div>
            </div>
        </div>

        {{-- Invite + Reply (featured) --}}
        <div class="{{ $featuredClass }}">
            <div class="absolute -top-[11px] left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-gradient-to-br from-[#2E64F0] to-brand-blue-deep px-3 py-1 text-[10px] font-bold uppercase tracking-[0.05em] text-white">
                Covers all <span x-text="appointmentsThisMonth">0</span> appointments
            </div>
            <div class="mb-2 font-sora text-[15px] font-bold text-ink">
                Invite + Reply
                @if (PlanMapper::isPlan($planName, ['Multi Pro Monthly', 'Multi Pro Yearly', 'Invite Reply', 'Multi Pro Trial', 'Invite Reply Trial']) && !$planExpired){!! $activeBadge !!}@endif
            </div>
            <div class="mb-1 flex items-baseline gap-1.5">
                <span class="font-sora text-lg font-bold text-muted">$</span>
                <span class="font-sora text-[40px] font-extrabold leading-none tracking-[-0.03em] text-ink">{{ (int) pricing()->amount('InviteReply', 'monthly') }}</span>
                <span class="text-[12.5px] text-muted">/month</span>
            </div>
            <div class="mb-4 min-h-4 text-[11.5px] text-faint">No contract · cancel anytime</div>
            <ul class="mb-[18px] flex flex-1 flex-col gap-2.5">
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Everything in Reply, plus</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span><b class="font-bold">2,500 invites</b>&nbsp;a month</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Auto-invite from your calendar</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Email invites with your logo</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Monthly insight report</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Multi-branch from $34/branch</li>
            </ul>
            <div class="mt-auto">
                <label for="{{ $idPrefix }}-quantitySelectInvite" class="mb-1.5 block text-[10.5px] font-bold uppercase tracking-[0.07em] text-faint">Businesses</label>
                <select id="{{ $idPrefix }}-quantitySelectInvite" name="voice" class="{{ $selectClass }}">
                    @for ($i = 1; $i <= 9; $i++)
                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'business' : 'businesses' }}</option>
                    @endfor
                    <option value="10+">10+ businesses</option>
                </select>
                <div id="{{ $idPrefix }}-invite-saving-monthly" class="{{ $savingClass }}"></div>
                @include('dashboard.v2.pricing-plans-cta', $ctaArgs('invite', 'monthly'))
                <div class="mt-2.5 text-center text-[11px] text-faint">No contract · cancel anytime</div>
            </div>
        </div>
    </div>
</div>

{{-- ===================== Yearly ===================== --}}
<div id="{{ $idPrefix }}-yearlyPricing" class="hidden">
    <div class="grid grid-cols-1 gap-3.5 sm:grid-cols-2">

        {{-- Reply --}}
        <div class="{{ $cardClass }}">
            <div class="mb-2 font-sora text-[15px] font-bold text-ink">
                Reply
                @if (PlanMapper::isPlan($planName, ['Pro Monthly', 'Pro Yearly', 'Reply', 'Pro Trial', 'Reply Trial']) && !$planExpired){!! $activeBadge !!}@endif
            </div>
            <div class="mb-1 flex items-baseline gap-1.5">
                <span class="font-sora text-lg font-bold text-muted">$</span>
                <span class="font-sora text-[40px] font-extrabold leading-none tracking-[-0.03em] text-ink">{{ (int) pricing()->amount('Reply', 'yearly') }}</span>
                <span class="text-[12.5px] text-muted">/year</span>
            </div>
            <div class="mb-4 min-h-4 text-[11.5px] text-faint">{{ $monthsFree }} months free — vs ${{ $replyMonthlyTotal }} monthly</div>
            <ul class="mb-[18px] flex flex-1 flex-col gap-2.5">
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Everything in Free, plus</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span><b class="font-bold">500 AI replies</b>&nbsp;a month</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Auto-reply to every new review</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Your signature on every reply</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Add team members</li>
                <li class="{{ $featLi }}"><span class="{{ $checkGreen }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#0B7A55" stroke-width="1.8" stroke-linecap="round"/></svg></span>Multi-branch from $239/branch a year</li>
            </ul>
            <div class="mt-auto">
                <label for="{{ $idPrefix }}-quantitySelectProYearly" class="mb-1.5 block text-[10.5px] font-bold uppercase tracking-[0.07em] text-faint">Businesses</label>
                <select id="{{ $idPrefix }}-quantitySelectProYearly" name="voice" class="{{ $selectClass }}">
                    @for ($i = 1; $i <= 9; $i++)
                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'business' : 'businesses' }}</option>
                    @endfor
                </select>
                <div id="{{ $idPrefix }}-reply-saving-yearly" class="{{ $savingClass }}"></div>
                @include('dashboard.v2.pricing-plans-cta', $ctaArgs('reply', 'yearly'))
                <div class="mt-2.5 text-center text-[11px] text-faint">Replies only — invites stay on the free plan</div>
            </div>
        </div>

        {{-- Invite + Reply (featured) --}}
        <div class="{{ $featuredClass }}">
            <div class="absolute -top-[11px] left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-gradient-to-br from-[#2E64F0] to-brand-blue-deep px-3 py-1 text-[10px] font-bold uppercase tracking-[0.05em] text-white">
                Covers all <span x-text="appointmentsThisMonth">0</span> appointments
            </div>
            <div class="mb-2 font-sora text-[15px] font-bold text-ink">
                Invite + Reply
                @if (PlanMapper::isPlan($planName, ['Multi Pro Monthly', 'Multi Pro Yearly', 'Invite Reply', 'Multi Pro Trial', 'Invite Reply Trial']) && !$planExpired){!! $activeBadge !!}@endif
            </div>
            <div class="mb-1 flex items-baseline gap-1.5">
                <span class="font-sora text-lg font-bold text-muted">$</span>
                <span class="font-sora text-[40px] font-extrabold leading-none tracking-[-0.03em] text-ink">790</span>
                <span class="text-[12.5px] text-muted">/year</span>
            </div>
            <div class="mb-4 min-h-4 text-[11.5px] text-faint">2 months free — vs ${{ $inviteMonthlyTotal }} monthly</div>
            <ul class="mb-[18px] flex flex-1 flex-col gap-2.5">
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Everything in Reply, plus</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span><b class="font-bold">2,500 invites</b>&nbsp;a month</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Auto-invite from your calendar</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Email invites with your logo</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Monthly insight report</li>
                <li class="{{ $featLi }}"><span class="{{ $checkBlue }}"><svg width="9" height="7" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.8 2.8L9 1.5" stroke="#1B3FAE" stroke-width="1.8" stroke-linecap="round"/></svg></span>Additional branches $590/year each</li>
            </ul>
            <div class="mt-auto">
                <label for="{{ $idPrefix }}-quantitySelectInviteYearly" class="mb-1.5 block text-[10.5px] font-bold uppercase tracking-[0.07em] text-faint">Businesses</label>
                <select id="{{ $idPrefix }}-quantitySelectInviteYearly" name="voice" class="{{ $selectClass }}">
                    @for ($i = 1; $i <= 9; $i++)
                        <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'business' : 'businesses' }}</option>
                    @endfor
                    <option value="10+">10+ businesses</option>
                </select>
                <div id="{{ $idPrefix }}-invite-saving-yearly" class="{{ $savingClass }}"></div>
                @include('dashboard.v2.pricing-plans-cta', $ctaArgs('invite', 'yearly'))
                <div class="mt-2.5 text-center text-[11px] text-faint">No contract · cancel anytime</div>
            </div>
        </div>
    </div>
</div>

<div class="mt-[18px] text-center text-xs text-faint">
    <button type="button" @click="openModal('managePlan')" class="font-semibold text-brand-blue hover:underline">Manage plan →</button>
    &nbsp;·&nbsp; Extra businesses $34/mo each — $24.90 from your 10th
</div>