@extends('layouts.public')

@section('content')
    <section class="container-shell section-gap">
        <div class="grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
            <div class="premium-card">
                <div class="eyebrow">{{ __('messages.contact_us') }}</div>
                <h1 class="mt-5 text-4xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white sm:text-5xl">{{ __('messages.contact_page_title') }}</h1>
                <p class="mt-4 body-lg">{{ __('messages.contact_intro') }}</p>
                <div class="mt-8 space-y-4">
                    <div class="rounded-2xl bg-slate-50 p-4 dark:bg-slate-950">
                        <div class="text-xs text-slate-500 dark:text-slate-400">{{ __('patient.phone') }}</div>
                        <div class="mt-2 font-semibold text-slate-950 dark:text-white">{{ $settings->phone }}</div>
                    </div>
                    @if($settings->email)
                        <div class="rounded-2xl bg-slate-50 p-4 dark:bg-slate-950">
                            <div class="text-xs text-slate-500 dark:text-slate-400">{{ __('common.email') }}</div>
                            <div class="mt-2 font-semibold text-slate-950 dark:text-white">{{ $settings->email }}</div>
                        </div>
                    @endif
                    @foreach($chambers as $chamber)
                        <div class="rounded-2xl border border-slate-200 p-4 dark:border-slate-800">
                            <div class="font-semibold text-slate-950 dark:text-white">{{ $chamber->localized_name }}</div>
                            <div class="mt-2 text-sm text-slate-600 dark:text-slate-300">{{ $chamber->localized_address }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="premium-card">
                @livewire('public.contact-form')
            </div>
        </div>
    </section>

    <section class="container-shell section-gap pt-0">
        @include('components.public.google-map', [
            'chambers' => $chambers,
            'title' => __('messages.map_overview'),
            'description' => __('messages.direction_hint'),
        ])
    </section>
@endsection