@php($channels = app(App\Services\ContactChannels::class)->all())

{{--
    Floating actions, bottom-right: the contact channels sit above the
    back-to-top control, matching the order visitors expect on mobile.

    Both are progressive: the channel list is a normal disclosure of real links,
    and back-to-top only appears once there is something to scroll back from, so
    it never occupies the tab order on a short page.
--}}
<div class="pointer-events-none fixed bottom-5 right-5 z-40 flex flex-col items-end gap-3 sm:bottom-7 sm:right-7"
     x-data="floatingActions">

    @if ($channels->isNotEmpty())
        <div class="pointer-events-auto flex flex-col items-end gap-3" @click.outside="open = false">

            {{-- Channels, revealed above the trigger. --}}
            <div x-show="open" x-cloak
                 x-transition:enter="transition duration-200 ease-out"
                 x-transition:enter-start="opacity-0 translate-y-2"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 x-transition:leave="transition duration-150 ease-in"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 translate-y-2"
                 id="contact-channels"
                 class="flex flex-col items-end gap-2.5">

                @foreach ($channels as $channel)
                    <a href="{{ $channel['url'] }}"
                       @if ($channel['key'] !== 'phone') target="_blank" rel="noopener" @endif
                       class="group flex items-center gap-3"
                       @keydown.escape="open = false">

                        {{-- The label is always rendered, not hover-only: on touch
                             there is no hover, and an unlabelled icon is a guess. --}}
                        <span class="rounded-lg bg-surface px-3 py-1.5 text-xs font-medium text-text shadow-card">
                            {{ $channel['label'] }}
                        </span>

                        <span class="flex size-11 items-center justify-center rounded-full shadow-raised transition group-hover:scale-105 {{ $channel['tone'] }}">
                            <x-icon :name="$channel['icon']" class="size-5" />
                        </span>

                        <span class="sr-only">{{ $channel['label'] }}: {{ $channel['value'] }}</span>
                    </a>
                @endforeach
            </div>

            <button type="button" @click="open = ! open"
                    class="flex size-14 items-center justify-center rounded-full bg-primary text-text shadow-brand-md transition hover:bg-primary-500 hover:shadow-brand-lg"
                    :aria-expanded="open" aria-controls="contact-channels"
                    :aria-label="open ? '{{ __('Hide contact options') }}' : '{{ __('Show contact options') }}'">

                <x-icon name="close" class="size-6 transition-transform duration-200" x-show="open" x-cloak />
                <x-icon name="phone" class="size-6" x-show="! open" />
            </button>
        </div>
    @endif

    <button type="button" @click="toTop()" x-show="scrolled" x-cloak
            x-transition:enter="transition duration-200 ease-out"
            x-transition:enter-start="opacity-0 translate-y-2"
            x-transition:enter-end="opacity-100 translate-y-0"
            class="pointer-events-auto flex size-11 items-center justify-center rounded-full border border-border bg-surface text-text-secondary shadow-card transition hover:border-primary hover:text-text"
            aria-label="{{ __('Back to top') }}">
        <x-icon name="arrow-up" class="size-5" />
    </button>
</div>