{{-- Connections modal --}}
<div
    x-show="modal === 'conn'"
    x-transition.opacity
    @click="closeRemoveMenu()"
    class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-[rgba(11,21,38,.5)] px-4 py-10 backdrop-blur-[3px]"
    style="display:none"
    @click.self="closeModal()"
>
    <div class="w-full max-w-[520px] overflow-hidden rounded-[18px] bg-white shadow-[0_30px_80px_rgba(11,21,38,.4)]" @click.stop>
        <div class="flex items-start justify-between border-b border-line-soft px-[22px] py-[18px]">
            <div>
                <div class="font-sora text-[17px] font-extrabold tracking-[-0.01em]">Connections &amp; team</div>
                <div class="mt-0.5 text-xs text-muted">
                    Calendars below are assigned to <b class="font-semibold text-ink-2" x-text="selectedBusinessName">{{ $selectedBusiness['name'] ?? 'Your business' }}</b>
                </div>
            </div>
            <button type="button" @click="closeModal()" class="flex h-[30px] w-[30px] items-center justify-center rounded-[9px] bg-line-soft text-xs text-muted hover:bg-line" aria-label="Close">✕</button>
        </div>
        <div class="p-[22px]">
            @if($hasCalendarConnection)
                <div class="mb-4 flex items-start gap-2.5 rounded-xl border border-brand-green-line bg-brand-green-tint px-[15px] py-[13px] text-[13px] font-semibold leading-relaxed text-brand-green-deep">
                    <span>✓</span>
                    <span>
                        @if($hasGoogleCalendar && $hasCalendly)
                            Google Calendar and Calendly connected — appointments and customer emails found.
                        @elseif($hasCalendly)
                            Calendly connected — appointments and customer emails found.
                        @else
                            Google Calendar connected — appointments and customer emails found.
                        @endif
                    </span>
                </div>
            @endif

            <div x-show="loadingConnectionMappings" class="mb-3 text-center text-xs text-muted">Loading connections…</div>

            {{-- Google Calendar --}}
            <div
                class="relative mb-3 rounded-[14px] border border-line"
                :class="removeMenuOpen === 'google' ? 'z-40' : ''"
            >
                <div class="relative flex items-center gap-3 px-4 py-3.5">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-[11px] border border-line-soft bg-[#FAFBFD]">
                        <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.06H2.18A10.97 10.97 0 001 12c0 1.77.42 3.45 1.18 4.94l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/></svg>
                    </div>
                    <div class="min-w-0 flex-1">
                        <div class="text-[14.5px] font-bold">Google Calendar</div>
                        <template x-if="hasBusinessScopedGoogle && googleMapping">
                            <div class="mt-0.5 truncate text-xs text-faint">
                                <span x-text="googleMapping.account_email"></span>
                                · used by <span x-text="googleMapping.businesses_using_account"></span>
                                <span x-text="googleMapping.businesses_using_account === 1 ? ' business' : ' businesses'"></span>
                            </div>
                        </template>
                        <div x-show="!hasBusinessScopedGoogle" class="mt-0.5 text-xs text-faint">Connect to sync appointments</div>
                    </div>
                    @if($hasBusinessScopedGoogle ?? false)
                        <div class="relative shrink-0" @click.stop>
                            <button
                                type="button"
                                @click="openRemoveMenu('google')"
                                :disabled="disconnectingCalendar"
                                class="rounded-full border border-line bg-white px-[15px] py-2 text-[12.5px] font-bold text-ink-2 hover:bg-[#FAFBFD] disabled:opacity-50"
                            >Remove ▾</button>
                            <div
                                x-show="removeMenuOpen === 'google'"
                                x-transition
                                class="absolute right-0 top-[calc(100%+6px)] z-30 w-[270px] overflow-hidden rounded-xl border border-line bg-white shadow-[0_14px_40px_rgba(11,21,38,.18)]"
                                style="display:none"
                            >
                                <button type="button" @click="closeRemoveMenu(); refreshCalendar()" class="block w-full cursor-pointer border-0 bg-white px-3.5 py-[11px] text-left hover:bg-brand-blue-tint">
                                    <b class="block text-[13px] font-bold text-ink">Resync calendar</b>
                                    <span class="mt-0.5 block text-[11.5px] leading-[1.4] text-muted">Pull latest appointments for this business</span>
                                </button>
                                <button type="button" @click="removeFromBusiness('google')" class="block w-full cursor-pointer border-0 bg-white px-3.5 py-[11px] text-left hover:bg-brand-blue-tint">
                                    <b class="block text-[13px] font-bold text-ink">Remove from this business</b>
                                    <span class="mt-0.5 block text-[11.5px] leading-[1.4] text-muted">Clears the calendars below — other locations keep syncing</span>
                                </button>
                                <button type="button" @click="disconnectAccount('google')" class="block w-full cursor-pointer border-0 bg-white px-3.5 py-[11px] text-left hover:bg-[#FDF1F1]">
                                    <b class="block text-[13px] font-bold text-brand-danger">Disconnect account</b>
                                    <span class="mt-0.5 block text-[11.5px] leading-[1.4] text-muted">
                                        Stops syncing for <span x-text="googleMapping?.businesses_using_account || 1"></span> business(es)
                                    </span>
                                </button>
                            </div>
                        </div>
                    @else
                        <a href="{{ $googleCalendarConnectUrl ?? route('integration.authenticate', ['app' => 'google-calendar', 'return_to' => 'dashboard']) }}"
                           @if($isGuest ?? false) @click.prevent="connectGoogleCalendar()" @endif
                           class="shrink-0 rounded-full bg-brand-blue px-[15px] py-2 text-[12.5px] font-bold text-white">Connect</a>
                    @endif
                </div>

                <template x-if="hasBusinessScopedGoogle && googleMapping && (googleMapping.calendars || []).length">
                    <div>
                        <div class="flex items-center gap-2 border-t border-line-soft bg-[#FAFBFD] px-4 py-[11px] text-[12.5px] text-muted">
                            <span class="h-[7px] w-[7px] shrink-0 rounded-full bg-brand-green"></span>
                            <span>
                                <b class="font-semibold text-ink-2" x-text="(googleMapping.selected_calendar_ids || []).length"></b>
                                of <b class="font-semibold text-ink-2" x-text="(googleMapping.calendars || []).length"></b>
                                calendars assigned to this business
                            </span>
                            <button type="button" @click="toggleGooglePicker()" class="ml-auto text-[12.5px] font-bold text-brand-blue" x-text="googlePickerOpen ? 'Close' : 'Edit'"></button>
                        </div>
                        <div x-show="googlePickerOpen" x-collapse class="border-t border-line-soft bg-[#FAFBFD] px-4 pb-3.5 pt-1">
                            <div class="py-2 text-[10.5px] font-bold uppercase tracking-[0.07em] text-faint">Calendars found on this account</div>
                            <template x-for="cal in (googleMapping?.calendars || [])" :key="cal.id">
                                <label
                                    class="flex cursor-pointer items-center gap-2.5 rounded-[10px] px-2.5 py-2 hover:bg-brand-blue-tint"
                                    :class="cal.disabled ? 'opacity-65' : ''"
                                >
                                    <input
                                        type="checkbox"
                                        class="h-[17px] w-[17px] shrink-0 accent-brand-green"
                                        :checked="googleDraftIds.includes(cal.id)"
                                        :disabled="cal.disabled || savingGoogleCalendars"
                                        @change="toggleGoogleDraft(cal.id)"
                                    >
                                    <span class="min-w-0 flex-1">
                                        <span class="block text-[13px] font-semibold" x-text="cal.summary"></span>
                                        <span class="block text-[11px] text-faint" x-show="cal.subtitle" x-text="'· ' + cal.subtitle"></span>
                                    </span>
                                    <span
                                        x-show="cal.assigned_business && cal.disabled"
                                        class="shrink-0 rounded-full border border-line bg-line-soft px-2 py-0.5 text-[10.5px] font-bold text-muted"
                                        x-text="cal.assigned_business?.name"
                                    ></span>
                                </label>
                            </template>
                            <div class="flex justify-end gap-2 pt-2.5">
                                <button type="button" @click="cancelGoogleDraft()" class="rounded-[10px] border border-line bg-white px-[15px] py-2 text-[12.5px] font-bold text-ink">Cancel</button>
                                <button type="button" @click="saveGoogleCalendars()" :disabled="savingGoogleCalendars" class="rounded-[10px] bg-brand-blue px-[15px] py-2 text-[12.5px] font-bold text-white disabled:opacity-60">
                                    <span x-show="!savingGoogleCalendars">Save calendars</span>
                                    <span x-show="savingGoogleCalendars" style="display:none">Saving…</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            @if(!($isGuest ?? false) || ($calendlyTrackLeadId ?? 0) > 0 || ($calendlyTrackLanderKey ?? '') === 'invite-reply-calendly')
            {{-- Calendly --}}
            <div
                class="relative mb-3 rounded-[14px] border border-line"
                :class="removeMenuOpen === 'calendly' ? 'z-40' : ''"
            >
                <div class="relative flex items-center gap-3 px-4 py-3.5">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-[11px] border border-line-soft bg-[#FAFBFD] text-base">📅</div>
                    <div class="min-w-0 flex-1">
                        <div class="text-[14.5px] font-bold">Calendly</div>
                        <template x-if="hasBusinessScopedCalendly && calendlyMapping">
                            <div class="mt-0.5 truncate text-xs text-faint" x-text="calendlyMapping.account_label"></div>
                        </template>
                        <div x-show="!hasBusinessScopedCalendly" class="mt-0.5 text-xs text-faint">Also take bookings on Calendly? Connect it too.</div>
                    </div>
                    @if($hasBusinessScopedCalendly ?? false)
                        <div class="relative shrink-0" @click.stop>
                            <button
                                type="button"
                                @click="openRemoveMenu('calendly')"
                                :disabled="disconnectingCalendar"
                                class="rounded-full border border-line bg-white px-[15px] py-2 text-[12.5px] font-bold text-ink-2 hover:bg-[#FAFBFD] disabled:opacity-50"
                            >Remove ▾</button>
                            <div
                                x-show="removeMenuOpen === 'calendly'"
                                x-transition
                                class="absolute right-0 top-[calc(100%+6px)] z-30 w-[270px] overflow-hidden rounded-xl border border-line bg-white shadow-[0_14px_40px_rgba(11,21,38,.18)]"
                                style="display:none"
                            >
                                <button type="button" @click="closeRemoveMenu(); refreshCalendar()" class="block w-full cursor-pointer border-0 bg-white px-3.5 py-[11px] text-left hover:bg-brand-blue-tint">
                                    <b class="block text-[13px] font-bold text-ink">Resync calendar</b>
                                    <span class="mt-0.5 block text-[11.5px] leading-[1.4] text-muted">Pull latest appointments for this business</span>
                                </button>
                                <button type="button" @click="removeFromBusiness('calendly')" class="block w-full cursor-pointer border-0 bg-white px-3.5 py-[11px] text-left hover:bg-brand-blue-tint">
                                    <b class="block text-[13px] font-bold text-ink">Remove from this business</b>
                                    <span class="mt-0.5 block text-[11.5px] leading-[1.4] text-muted">Stops Calendly auto-invites for this location only</span>
                                </button>
                            </div>
                        </div>
                    @else
                        <a href="{{ $calendlyConnectUrl ?? route('integration.authenticate', ['app' => 'calendly', 'return_to' => 'dashboard']) }}"
                           @if($isGuest ?? false) @click.prevent="connectCalendly()" @endif
                           class="shrink-0 rounded-full bg-brand-blue px-[15px] py-2 text-[12.5px] font-bold text-white">Connect</a>
                    @endif
                </div>

                <template x-if="hasBusinessScopedCalendly && calendlyMapping">
                    <div>
                        <template x-if="(calendlyMapping.event_types || []).length">
                            <div>
                                <div class="flex items-center gap-2 border-t border-line-soft bg-[#FAFBFD] px-4 py-[11px] text-[12.5px] text-muted">
                                    <span class="h-[7px] w-[7px] shrink-0 rounded-full bg-brand-green"></span>
                                    <span>
                                        <b class="font-semibold text-ink-2" x-text="(calendlyMapping.selected_event_type_uris || []).length"></b>
                                        of <b class="font-semibold text-ink-2" x-text="(calendlyMapping.event_types || []).length"></b>
                                        event types assigned to this business
                                    </span>
                                    <button type="button" @click="toggleCalendlyPicker()" class="ml-auto text-[12.5px] font-bold text-brand-blue" x-text="calendlyPickerOpen ? 'Close' : 'Edit'"></button>
                                </div>
                                <div x-show="calendlyPickerOpen" x-collapse class="border-t border-line-soft bg-[#FAFBFD] px-4 pb-3.5 pt-1">
                                    <div class="py-2 text-[10.5px] font-bold uppercase tracking-[0.07em] text-faint">Event types found on this account</div>
                                    <template x-for="et in (calendlyMapping?.event_types || [])" :key="et.uri">
                                        <label
                                            class="flex cursor-pointer items-center gap-2.5 rounded-[10px] px-2.5 py-2 hover:bg-brand-blue-tint"
                                            :class="et.disabled ? 'opacity-65' : ''"
                                        >
                                            <input
                                                type="checkbox"
                                                class="h-[17px] w-[17px] shrink-0 accent-brand-green"
                                                :checked="calendlyDraftUris.includes(et.uri)"
                                                :disabled="et.disabled || savingCalendlyEventTypes"
                                                @change="toggleCalendlyDraft(et.uri)"
                                            >
                                            <span class="min-w-0 flex-1">
                                                <span class="block text-[13px] font-semibold" x-text="et.name"></span>
                                                <span class="block text-[11px] text-faint" x-show="et.subtitle" x-text="'· ' + et.subtitle"></span>
                                            </span>
                                            <span
                                                x-show="et.assigned_business && et.disabled"
                                                class="shrink-0 rounded-full border border-line bg-line-soft px-2 py-0.5 text-[10.5px] font-bold text-muted"
                                                x-text="et.assigned_business?.name"
                                            ></span>
                                        </label>
                                    </template>
                                    <div class="flex justify-end gap-2 pt-2.5">
                                        <button type="button" @click="cancelCalendlyDraft()" class="rounded-[10px] border border-line bg-white px-[15px] py-2 text-[12.5px] font-bold text-ink">Cancel</button>
                                        <button type="button" @click="saveCalendlyEventTypes()" :disabled="savingCalendlyEventTypes" class="rounded-[10px] bg-brand-blue px-[15px] py-2 text-[12.5px] font-bold text-white disabled:opacity-60">
                                            <span x-show="!savingCalendlyEventTypes">Save event types</span>
                                            <span x-show="savingCalendlyEventTypes" style="display:none">Saving…</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template x-if="!(calendlyMapping.event_types || []).length">
                            <div class="flex items-center gap-2 border-t border-line-soft bg-[#FAFBFD] px-4 py-[11px] text-[12.5px] text-muted">
                                <span class="h-[7px] w-[7px] shrink-0 rounded-full bg-amber-500"></span>
                                <span>No event types found on this Calendly account — appointments still sync when available.</span>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            @endif

            {{-- Zapier --}}
            <div class="mb-3 overflow-hidden rounded-[14px] border border-line">
                <div class="flex items-center gap-3 px-4 py-3.5">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-[11px] border border-line-soft bg-[#FAFBFD] text-base" style="color:#FF4F00">⚡</div>
                    <div class="min-w-0 flex-1">
                        <div class="text-[14.5px] font-bold">Zapier</div>
                        <div class="mt-0.5 text-xs text-faint">5,000+ apps, including your booking software</div>
                    </div>
                    <a href="{{ route('dashboard', ['tab' => 'profile']) }}" class="shrink-0 rounded-full bg-brand-blue px-[15px] py-2 text-[12.5px] font-bold text-white">Set up</a>
                </div>
            </div>

            <div class="mb-2.5 mt-5 text-[11px] font-bold uppercase tracking-[0.08em] text-faint">Team</div>
            <div class="mb-3 flex items-center gap-3 px-1">
                <div class="flex h-[38px] w-[38px] items-center justify-center rounded-full bg-gradient-to-br from-[#8B5CF6] to-[#6D3AE0] font-sora text-[15px] font-bold text-white">{{ $userInitials }}</div>
                <div>
                    <div class="text-sm font-bold">{{ $isGuest ?? false ? ($firstName ?? 'Guest') : $user->name }}</div>
                    <div class="text-xs text-faint">{{ $isGuest ?? false ? (($displayEmail ?? '') !== '' ? $displayEmail : 'Demo account') : $user->email }} · Owner</div>
                </div>
            </div>
            @if(!($isGuest ?? false) && ($isBusinessOwner ?? false))
                <button
                    type="button"
                    @click="openInviteManager()"
                    class="block w-full rounded-xl border-[1.5px] border-dashed border-line py-3 text-center text-[13.5px] font-bold text-brand-blue hover:bg-[#FAFBFD]"
                >+ Add a team member</button>
            @endif
        </div>
    </div>
</div>

{{-- Disconnect confirm (legacy fallback) --}}
<div
    x-show="modal === 'disconnect-google'"
    x-transition.opacity
    @keydown.escape.window="modal === 'disconnect-google' && cancelDisconnectGoogle()"
    class="fixed inset-0 z-[60] flex items-start justify-center overflow-y-auto bg-[rgba(11,21,38,.5)] px-4 py-10 backdrop-blur-[3px]"
    style="display:none"
    @click.self="cancelDisconnectGoogle()"
>
    <div class="w-full max-w-[420px] overflow-hidden rounded-[18px] bg-white shadow-[0_30px_80px_rgba(11,21,38,.4)]" @click.stop>
        <div class="px-5 pt-5 pb-2">
            <h3 class="font-sora text-[15px] font-bold text-ink" x-text="disconnectConfirmTitle">Disconnect Google Calendar?</h3>
            <p class="mt-2 text-[13px] leading-relaxed text-muted" x-text="disconnectConfirmMessage"></p>
        </div>
        <div class="flex justify-end gap-2.5 border-t border-line-soft bg-[#FAFBFD] px-5 py-3.5">
            <button type="button" @click="cancelDisconnectGoogle()" :disabled="disconnectingCalendar" class="rounded-[11px] border-[1.5px] border-line bg-white px-5 py-3 text-[13px] font-bold text-ink-2 disabled:opacity-50">Cancel</button>
            <button type="button" @click="confirmDisconnectGoogle()" :disabled="disconnectingCalendar" class="rounded-[11px] bg-red-600 px-5 py-3 text-[13px] font-bold text-white hover:bg-red-700 disabled:opacity-60">
                <span x-show="!disconnectingCalendar">Remove</span>
                <span x-show="disconnectingCalendar" style="display:none">Removing…</span>
            </button>
        </div>
    </div>
</div>

{{-- Limit modal --}}
<div
    x-show="modal === 'limit'"
    x-transition.opacity
    class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-[rgba(11,21,38,.5)] px-4 py-10 backdrop-blur-[3px]"
    style="display:none"
    @click.self="closeModal()"
>
    <div class="w-full max-w-[460px] overflow-hidden rounded-[18px] bg-white p-7 text-center shadow-[0_30px_80px_rgba(11,21,38,.4)]" @click.stop>
        <div class="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-50 text-2xl">⚠️</div>
        <div class="mb-1.5 font-sora text-lg font-extrabold">Reply limit reached</div>
        <div class="mb-5 text-[13px] leading-relaxed text-muted">Upgrade to keep inviting every customer and posting AI replies automatically.</div>
        <button
            type="button"
            @click="closeModal(); guestExistingPaidUser ? requireLogin('existing_customer_dashboard') : goTab('plans')"
            class="mb-2.5 w-full rounded-[11px] bg-gradient-to-br from-[#2E64F0] to-brand-blue-deep py-3.5 text-[13px] font-bold text-white shadow-[0_5px_15px_rgba(36,86,230,.3)]"
            x-text="guestExistingPaidUser ? 'Log in to dashboard' : 'See plans — from $29/month'"
        >See plans — from $29/month</button>
        <button type="button" @click="closeModal()" class="text-xs font-semibold text-faint hover:text-muted">Not now</button>
    </div>
</div>

{{-- GBP modal --}}
<div
    x-show="modal === 'gbp'"
    x-transition.opacity
    class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-[rgba(11,21,38,.5)] px-4 py-10 backdrop-blur-[3px]"
    style="display:none"
    @click.self="closeModal()"
>
    <div class="w-full max-w-[460px] overflow-hidden rounded-[18px] bg-white p-7 text-center shadow-[0_30px_80px_rgba(11,21,38,.4)]" @click.stop>
        <div class="mb-2 text-[11px] font-bold uppercase tracking-[0.07em] text-brand-blue" x-text="gbpReason">Connect Google listing</div>
        <div class="mb-1.5 font-sora text-lg font-extrabold">Connect your Google listing</div>
        <div class="mb-5 text-[13px] leading-relaxed text-muted">One-time connection to the Google account that manages your listing. We only post replies you approve — <b class="font-bold text-ink">nothing goes live without you</b>.</div>
        <a :href="gbpConnectUrl || '#'" @click="guestMode ? ($event.preventDefault(), requireLogin('connect_gbp')) : null" class="mb-2.5 flex w-full items-center justify-center gap-2 rounded-[11px] bg-gradient-to-br from-[#2E64F0] to-brand-blue-deep py-3.5 text-[13px] font-bold text-white shadow-[0_5px_15px_rgba(36,86,230,.3)]">Connect with Google</a>
        <div class="text-[11px] text-faint">Takes 20 seconds · your reply is saved and posts right after</div>
        <button type="button" @click="closeModal()" class="mt-3 text-xs font-semibold text-faint hover:text-muted">Maybe later</button>
    </div>
</div>

{{-- Guest demo: logo upload placeholder --}}
<div
    x-show="modal === 'logo'"
    x-transition.opacity
    class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-[rgba(11,21,38,.5)] px-4 py-10 backdrop-blur-[3px]"
    style="display:none"
    @click.self="closeModal()"
>
    <div class="w-full max-w-[420px] overflow-hidden rounded-[18px] bg-white p-7 text-center shadow-[0_30px_80px_rgba(11,21,38,.4)]" @click.stop>
        <div class="mb-2 font-sora text-lg font-extrabold">Add your logo</div>
        <div class="mb-5 text-[13px] leading-relaxed text-muted">Your logo appears on invite emails and the review lander.</div>
        <div class="mb-4 flex flex-col items-center gap-3">
            <div class="flex h-[120px] w-[120px] items-center justify-center overflow-hidden rounded-[14px] border border-line bg-[#FAFBFD]">
                <img
                    :src="guestLogoUrl"
                    alt="Business logo"
                    class="max-h-full max-w-full object-contain"
                >
            </div>
            <button
                x-show="guestHasCustomLogo"
                type="button"
                @click="removeGuestLogo()"
                class="text-[12px] font-semibold text-red-600 hover:text-red-700 disabled:cursor-not-allowed disabled:opacity-50"
                style="display:none"
            >
                Remove logo
            </button>
        </div>
        <label class="mb-2 block text-left text-[13px] font-semibold text-ink-2">Upload logo</label>
        <input type="file" x-ref="guestLogoInput" @change="uploadGuestLogo($event)" accept=".png,.jpg,.jpeg,.gif,.webp" class="hidden">
        <button type="button" @click="$refs.guestLogoInput && $refs.guestLogoInput.click()" class="mb-3 w-full rounded-xl border border-dashed border-line bg-[#FAFBFD] px-4 py-10 text-[12.5px] text-faint hover:border-[#9FB0C6]">
            <span x-show="!guestLogoUploading">Choose an image · PNG, JPG, GIF, or WebP</span>
            <span x-show="guestLogoUploading" style="display:none">Uploading…</span>
        </button>
        <p class="mb-3 text-left text-[11px] leading-relaxed text-faint">JPG, PNG, GIF, or WebP · max 2MB. Shown on your invite lander and emails.</p>
        <button type="button" @click="closeModal()" class="w-full rounded-[11px] border border-line bg-white py-3 text-[13px] font-bold text-ink-2">Close</button>
    </div>
</div>

{{-- Trial modal — post-calendar-connect (HTML justconnected) --}}
<div
    x-show="modal === 'trial'"
    x-transition.opacity
    @keydown.escape.window="closeModal()"
    class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-[rgba(11,21,38,.55)] px-4 py-10 backdrop-blur-md"
    style="display:none"
    @click.self="closeModal()"
>
    <div class="w-full max-w-[460px] overflow-hidden rounded-[18px] bg-white px-6 pb-6 pt-7 text-center shadow-[0_30px_80px_rgba(11,21,38,.4)]" @click.stop>
        <div class="mx-auto mb-3.5 flex h-[52px] w-[52px] items-center justify-center rounded-[15px] bg-brand-green-tint">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 12.5l5 5L20 6.5" stroke="#0E9F6E" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <div class="mb-2 text-[11px] font-bold uppercase tracking-[0.07em] text-brand-green-deep" x-text="calendarConnectedLabel">Google Calendar connected</div>
        <div class="mb-2 font-sora text-[26px] font-extrabold leading-[1.15] tracking-[-0.02em]">
            <span x-text="trialAppointments + ' ' + (trialAppointments === 1 ? 'appointment' : 'appointments') + ' found'"></span>
        </div>
        <div class="mx-auto mb-[18px] max-w-[330px] text-[13px] leading-relaxed text-muted">
            <b class="font-bold text-brand-green-deep"><span x-text="trialQueuedOnFree + ' ' + (trialQueuedOnFree === 1 ? 'is' : 'are') + ' queued'"></span></b> on the free plan.
            <span x-show="trialUncovered > 0"> The other <b class="font-bold text-ink"><span x-text="trialUncovered + ' ' + (trialUncovered === 1 ? 'customer' : 'customers') + ' won\'t be invited'"></span></b> this month.</span>
        </div>
        <a
            :href="calendarTrialSubscribeUrl"
            @click="trackCalendlyExplore('click_upgrade')"
            class="mb-[9px] flex w-full items-center justify-center rounded-[11px] bg-gradient-to-br from-[#2E64F0] to-brand-blue-deep py-3 text-[13px] font-bold text-white shadow-[0_5px_15px_rgba(36,86,230,.3)] transition hover:brightness-105"
        >
            <span x-text="'Cover all ' + trialAppointments + ' — start 7-day free trial'"></span>
        </a>
        <div class="mb-3.5 text-[11px] text-faint">Card required · $79/month after · cancel anytime</div>
        <button
            type="button"
            @click="closeModal()"
            class="flex w-full items-center justify-center rounded-[11px] border-[1.5px] border-line bg-white py-3 text-[13px] font-bold text-ink-2 transition hover:border-[#B9C6D8] hover:bg-[#FAFBFD]"
        >
            <span x-text="'Continue with ' + trialInviteCover + ' free invites'"></span>
        </button>
    </div>
</div>

{{-- Manage plan modal --}}
<div
    x-show="modal === 'managePlan'"
    x-transition.opacity
    @keydown.escape.window="modal === 'managePlan' && closeModal()"
    class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-[rgba(11,21,38,.5)] px-4 py-10 backdrop-blur-[3px]"
    style="display:none"
    @click.self="closeModal()"
>
    <div class="w-full max-w-[460px] overflow-hidden rounded-[18px] bg-white shadow-[0_30px_80px_rgba(11,21,38,.4)]" @click.stop>
        <div class="flex items-center justify-between border-b border-line-soft px-5 py-4">
            <div class="font-sora text-[15px] font-bold text-ink">Manage your plan</div>
            <button type="button" @click="closeModal()" class="flex h-7 w-7 items-center justify-center rounded-lg bg-[#EFF3F8] text-xs text-muted hover:bg-line" aria-label="Close">✕</button>
        </div>
        <div class="px-5 py-5">
            <div class="mb-2.5 flex items-center justify-between gap-3.5 rounded-xl border border-line px-4 py-3.5">
                <div class="min-w-0">
                    <div class="text-[13.5px] font-bold text-ink">Add invite packs</div>
                    <div class="mt-0.5 text-xs leading-snug text-muted">
                        Each pack adds <b class="font-bold text-ink-2">2,500 invites + 500 replies</b> · $34/mo each, $24.90 from your 10th
                    </div>
                </div>
                <div class="flex shrink-0 items-center overflow-hidden rounded-[10px] border border-line">
                    <button
                        type="button"
                        @click="managePlanPacks = Math.max(0, managePlanPacks - 1)"
                        class="flex h-[34px] w-[34px] items-center justify-center bg-[#EFF3F8] text-[17px] font-bold text-ink hover:bg-line"
                        aria-label="Remove a pack"
                    >−</button>
                    <span class="min-w-[34px] text-center font-sora text-sm font-extrabold text-ink" x-text="managePlanPacks">0</span>
                    <button
                        type="button"
                        @click="managePlanPacks = Math.min(200, managePlanPacks + 1)"
                        class="flex h-[34px] w-[34px] items-center justify-center bg-[#EFF3F8] text-[17px] font-bold text-ink hover:bg-line"
                        aria-label="Add a pack"
                    >+</button>
                </div>
            </div>

            <div class="my-3.5 rounded-[10px] bg-[#EFF3F8] px-3.5 py-3 text-center text-[13px] text-ink-2" x-html="managePlanTotalHtml"></div>

            <button
                type="button"
                @click="cancelManagePlan()"
                class="block w-full bg-transparent py-1 text-center text-[11.5px] text-faint hover:text-[#D14343] hover:underline"
            >
                Cancel plan — runs until the end of your billing period, then drops to Free
            </button>
        </div>
        <div class="flex items-center justify-end gap-2.5 border-t border-line-soft px-5 py-3.5">
            <button type="button" @click="closeModal()" class="rounded-[11px] border-[1.5px] border-line bg-white px-4 py-2.5 text-[13px] font-bold text-ink-2 hover:border-[#B9C6D8] hover:bg-[#FAFBFD]">Close</button>
            <button
                type="button"
                @click="updateManagePlan()"
                :disabled="!managePlanCanUpdate"
                class="rounded-[11px] bg-gradient-to-br from-[#2E64F0] to-brand-blue-deep px-4 py-2.5 text-[13px] font-bold text-white shadow-[0_5px_15px_rgba(36,86,230,.3)] disabled:cursor-not-allowed disabled:opacity-50"
                x-text="managePlanUpdateLabel"
            >Update plan</button>
        </div>
    </div>
</div>