@php
    $ps = $ctx->publicSettings();
    $form = $ctx->form(($data['form_slug'] ?? '') ?: 'contact');
    $showDetails = ! empty($data['show_details']);
@endphp
<section class="{{ $cls }}" {{ $attrs }}>
    <div class="container-page">
        <div @class(['grid gap-12 lg:gap-16', 'lg:grid-cols-5' => $showDetails])>
            @if($showDetails)
                <div class="lg:col-span-2">
                    <div class="premium-card p-8">
                        <h2 class="text-lg font-bold text-secondary">{{ $data['details_title'] ?? 'Get in touch' }}</h2>
                        <ul class="mt-6 space-y-5">
                            @foreach([
                                ['key' => 'contact.phone', 'label' => 'Phone', 'href' => 'tel:', 'icon' => 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'],
                                ['key' => 'contact.email', 'label' => 'Email', 'href' => 'mailto:', 'icon' => 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'],
                                ['key' => 'contact.business_hours', 'label' => 'Hours', 'href' => null, 'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'],
                            ] as $row)
                                @continue(empty($ps[$row['key']]))
                                <li class="flex items-start gap-4">
                                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $row['icon'] }}"/></svg>
                                    </span>
                                    <div>
                                        <p class="text-xs font-semibold uppercase tracking-widest text-muted">{{ $row['label'] }}</p>
                                        @if($row['href'])
                                            <a href="{{ $row['href'].$ps[$row['key']] }}" class="mt-1 block font-semibold text-primary">{{ $ps[$row['key']] }}</a>
                                        @else
                                            <p class="mt-1 text-sm text-secondary">{{ $ps[$row['key']] }}</p>
                                        @endif
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                        @if(filled($data['button_text'] ?? null))
                            <x-ui.button :href="$href($data['button_url'] ?? null, route('book.index'))" class="mt-8 w-full justify-center" data-track-cta="contact-book">
                                {{ $data['button_text'] }}
                            </x-ui.button>
                        @endif
                    </div>
                </div>
            @endif

            <div @class(['lg:col-span-3' => $showDetails, 'mx-auto w-full max-w-3xl' => ! $showDetails])>
                <div class="premium-card p-8 md:p-10">
                    @if(filled($data['form_title'] ?? null))
                        <h2 class="text-lg font-bold text-secondary">{{ $data['form_title'] }}</h2>
                    @endif
                    @if(filled($data['form_lead'] ?? null))
                        <p class="mt-2 text-sm text-muted">{{ $data['form_lead'] }}</p>
                    @endif
                    <div class="mt-8">
                        @if($form)
                            <x-forms.multistep :form="$form" />
                        @else
                            <p class="text-muted">Contact form unavailable. Please email us directly.</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>