@php
    $ps = $publicSettings ?? $themeSettings ?? [];
    $heroTitle = $page?->title ?: 'Contact Us';
    $heroSubtitle = $page?->excerpt
        ?: 'Book a free consultation or send us a message — we typically respond within one business day.';
@endphp

<x-layouts.app :seo="$seo" :schema="$schema ?? []">
    <x-public.page-hero
        eyebrow="Contact"
        :title="$heroTitle"
        :subtitle="$heroSubtitle"
        :breadcrumbs="[
            ['label' => 'Home', 'url' => url('/')],
            ['label' => $heroTitle],
        ]"
    />

    <section class="home-section bg-white">
        <div class="container-page">
            <div class="grid gap-12 lg:grid-cols-5 lg:gap-16">
                <div class="lg:col-span-2">
                    <div class="premium-card p-8">
                        <h2 class="text-lg font-bold text-secondary">Get in touch</h2>
                        <ul class="mt-6 space-y-5">
                            @if(!empty($ps['contact.phone']))
                                <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="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"/></svg>
                                    </span>
                                    <div>
                                        <p class="text-xs font-semibold uppercase tracking-widest text-muted">Phone</p>
                                        <a href="tel:{{ $ps['contact.phone'] }}" class="mt-1 block font-semibold text-primary">{{ $ps['contact.phone'] }}</a>
                                    </div>
                                </li>
                            @endif
                            @if(!empty($ps['contact.email']))
                                <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="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"/></svg>
                                    </span>
                                    <div>
                                        <p class="text-xs font-semibold uppercase tracking-widest text-muted">Email</p>
                                        <a href="mailto:{{ $ps['contact.email'] }}" class="mt-1 block font-semibold text-primary">{{ $ps['contact.email'] }}</a>
                                    </div>
                                </li>
                            @endif
                            @if(!empty($ps['contact.business_hours']))
                                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    </span>
                                    <div>
                                        <p class="text-xs font-semibold uppercase tracking-widest text-muted">Hours</p>
                                        <p class="mt-1 text-sm text-secondary">{{ $ps['contact.business_hours'] }}</p>
                                    </div>
                                </li>
                            @endif
                        </ul>
                        <x-ui.button href="{{ route('book.index') }}" class="mt-8 w-full justify-center" data-track-cta="contact-book">
                            Book Free Consultation
                        </x-ui.button>
                    </div>
                </div>

                <div class="lg:col-span-3">
                    <div class="premium-card p-8 md:p-10">
                        <h2 class="text-lg font-bold text-secondary">Send a message</h2>
                        <p class="mt-2 text-sm text-muted">Fill out the form and our team will get back to you shortly.</p>
                        <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>
</x-layouts.app>