@php
    $lead = $shellLead ?? [];
    $useAssistant = site_capability('lead_assistant');
    $chatIntents = site_chat_intents();
    $showAssistant = $useAssistant && $chatIntents !== [];
@endphp

@if ($showAssistant)
<div class="site-lead-launcher" x-data="siteLeadFab()" @keydown.escape.window="open && close()">
    <div class="site-fab-stack" :class="{ 'is-hidden': open }">
        <div
            class="site-fab-teaser"
            x-show="teaserVisible && !open"
            x-cloak
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-3"
            x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            role="status"
        >
            <button
                type="button"
                class="site-fab-teaser__body"
                @click="openModal({ userGesture: true })"
            >
                <p class="site-fab-teaser__text">{{ __('assistant.teaser_text') }}</p>
            </button>
            <button
                type="button"
                class="site-fab-teaser__dismiss"
                @click.stop="dismissTeaser()"
                aria-label="{{ __('site.close') }}"
            >×</button>
        </div>

        <button
            type="button"
            class="site-fab site-fab-lead"
            @click="openModal({ userGesture: true })"
            :aria-expanded="open.toString()"
            aria-controls="site-lead-modal-panel"
            title="{{ __('site.lead_fab') }}"
        >
            <span class="sr-only">{{ __('site.lead_fab') }}</span>
            <x-site.svg-icon name="chat_bubble" class="h-6 w-6" />
            <span
                class="site-fab-badge"
                x-show="unreadCount > 0"
                x-cloak
                x-text="unreadCount > 99 ? '99+' : unreadCount"
                :aria-label="unreadCount + ' {{ __('site.lead_fab_unread') }}'"
            ></span>
        </button>

        <a
            href="{{ site_whatsapp_url() }}"
            target="_blank"
            rel="noopener"
            class="site-fab site-fab-whatsapp"
            title="{{ __('site.whatsapp_fab') }}"
        >
            <span class="sr-only">{{ __('site.whatsapp_fab') }}</span>
            <x-site.svg-icon name="socials" class="h-6 w-6" />
        </a>
    </div>

    <div
        x-show="open"
        x-cloak
        x-transition:enter="transition-opacity ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition-opacity ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="site-lead-modal-backdrop"
        @click.self="close()"
    >
        <template x-if="isPhone">
            <div
                id="site-lead-modal-panel"
                x-show="open"
                x-transition:enter="transition-opacity ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition-opacity ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="site-lead-modal-panel"
                role="dialog"
                aria-modal="true"
                aria-labelledby="site-lead-modal-title"
                @click.stop
            >
                @include('partials.site.lead-fab-modal-inner', [
                    'lead' => $lead,
                    'useAssistant' => $useAssistant,
                ])
            </div>
        </template>

        <template x-if="!isPhone">
            <div
                id="site-lead-modal-panel"
                x-show="open"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 translate-y-4"
                class="site-lead-modal-panel"
                role="dialog"
                aria-modal="true"
                aria-labelledby="site-lead-modal-title"
                @click.stop
            >
                @include('partials.site.lead-fab-modal-inner', [
                    'lead' => $lead,
                    'useAssistant' => $useAssistant,
                ])
            </div>
        </template>
    </div>
</div>
@else
<div class="site-fab-stack">
    <a
        href="{{ site_whatsapp_url() }}"
        target="_blank"
        rel="noopener"
        class="site-fab site-fab-whatsapp"
        title="{{ __('site.whatsapp_fab') }}"
    >
        <span class="sr-only">{{ __('site.whatsapp_fab') }}</span>
        <x-site.svg-icon name="socials" class="h-6 w-6" />
    </a>
</div>
@endif