{{--
    /book (PRD §18): meeting types + the scheduling calendar embedded on-page (lazy-loaded), with a fallback
    (hosted booking page + direct email) if it does not load within a few seconds, when the embed is off, or
    when JS is disabled. Never a blank space (PRD §18.4).
--}}
@inject('settings', 'App\Domain\Site\Settings\BookingSettings')
@inject('presenter', 'App\Domain\Engagement\Booking\BookingPresenter')
@inject('contact', 'App\Domain\Site\Settings\ContactSettings')
@inject('cta', 'App\Domain\Site\Settings\CtaSettings')
@php
    $types = $settings->meeting_types;
    $fallbackEmail = $settings->fallback_email ?: $contact->public_email;
    $hosted = $settings->fallback_url ?: $settings->booking_url;
    $embeds = $presenter->embeds();
    $defaultSrc = $embeds ? $presenter->embedUrl($types[0]['url'] ?? $settings->booking_url) ?? $presenter->embedUrl($settings->booking_url) : null;
@endphp
<x-section :vm="$vm" class="!pt-6">
    <div class="container-site" @if ($embeds) data-module="booking" @endif>
        <x-section-heading :title="$vm->get('heading')" :subtitle="$vm->get('intro')" class="mb-8" />

        @if ($types !== [])
            <ul class="grid-auto mb-8" role="list">
                @foreach ($types as $type)
                    @php($typeEmbed = $embeds ? $presenter->embedUrl($type['url'] ?? null) : null)
                    <li>
                        <x-card class="flex h-full flex-col gap-3">
                            <h2 class="text-h4">{{ $type['label'] }}</h2>
                            @if (! empty($type['duration_minutes']))<p class="text-sm text-muted">{{ __('portfolio.ui.minutes', ['count' => (int) $type['duration_minutes']]) }}</p>@endif
                            @if (! empty($type['description']))<p class="text-muted">{{ $type['description'] }}</p>@endif
                            <div class="mt-auto pt-2">
                                @if ($typeEmbed)
                                    <x-button :href="$type['url']" variant="primary" data-booking-type="{{ $typeEmbed }}" data-booking-label="{{ $type['label'] }}"
                                              track="booking_widget_open" :track-props="['location' => 'book', 'meeting' => $type['label']]">{{ $cta->book_call_label }}</x-button>
                                @else
                                    <x-button :href="$type['url']" :new-tab="true" variant="primary" track="booking_widget_open" :track-props="['location' => 'book', 'meeting' => $type['label']]">{{ $cta->book_call_label }}</x-button>
                                @endif
                            </div>
                        </x-card>
                    </li>
                @endforeach
            </ul>
        @endif

        @if ($embeds && $defaultSrc)
            <div data-booking-frame data-src="{{ $defaultSrc }}" data-frame-title="{{ __('portfolio.ui.booking_frame_title') }}" class="hidden min-h-[44rem] overflow-hidden rounded-[var(--radius-card)] border border-transparent bg-surface shadow-[var(--shadow-card)]" aria-live="polite">
                <p data-booking-loading class="p-6 text-muted">{{ __('portfolio.ui.booking_loading') }}</p>
            </div>
        @endif

        <div data-booking-fallback @if ($embeds) data-fallback-when-js @endif class="rounded-[var(--radius-card)] border border-transparent bg-surface shadow-[var(--shadow-card)] p-6">
            <p>{{ $settings->fallback_message }}</p>
            <div class="mt-4 flex flex-wrap gap-3">
                @if ($hosted)<x-button :href="$hosted" :new-tab="true" variant="secondary" track="booking_widget_open" :track-props="['location' => 'book_fallback']">{{ $cta->book_call_label }}</x-button>@endif
                @if ($fallbackEmail)<x-button :href="'mailto:'.$fallbackEmail" variant="tertiary">{{ $fallbackEmail }}</x-button>@endif
            </div>
        </div>
    </div>
</x-section>