@extends('layouts.site')

@section('title', $page->meta_title ?: $page->title)
@section('meta_description', $page->meta_description ?? 'Contact Hillcrest Living for referrals, enquiries, and directions.')

@section('content')
    @php
        $branches = collect($siteSettings->contact_branches ?? [])
            ->filter(fn ($branch) => filled($branch['name'] ?? null) && filled($branch['address'] ?? null))
            ->values();
        $primaryBranch = $branches->first(fn ($branch) => (bool) ($branch['is_primary'] ?? false)) ?? $branches->first();
        $turnstileEnabled = (bool) config('hillcrest.turnstile.enabled')
            && filled(config('hillcrest.turnstile.site_key'))
            && filled(config('hillcrest.turnstile.secret_key'));
    @endphp
    <div class="section-contrast-sage section-gap">
        <div class="section-shell">
            <div class="grid gap-10 lg:grid-cols-2 lg:gap-12">
                <div data-aos="fade-up">
                    <h1 class="font-display text-4xl font-bold text-[var(--color-heading)] md:text-5xl" style="font-family: var(--font-heading);">Contact Us</h1>
                    <p class="mt-5 max-w-xl text-lg text-neutral-700">Ready to discuss supported living, referrals, or partnership opportunities? Our team will guide you through the right next step.</p>

                <div class="mt-8 grid gap-3 sm:grid-cols-2">
                    @if(filled($primaryBranch['phone'] ?? null) || filled($siteSettings->contact_phone))
                        <a class="rounded-xl border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-700 shadow-sm transition hover:-translate-y-0.5 hover:border-[var(--color-accent)]/60 hover:shadow-md" href="tel:{{ preg_replace('/\s+/', '', $primaryBranch['phone'] ?? $siteSettings->contact_phone) }}">
                            <p class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-[var(--color-heading)]/70">
                                <i data-lucide="phone-call" class="h-3.5 w-3.5"></i>
                                Phone
                            </p>
                            <p class="mt-1 font-semibold text-[var(--color-heading)]">{{ $primaryBranch['phone'] ?? $siteSettings->contact_phone }}</p>
                        </a>
                    @endif
                    @if(filled($primaryBranch['email'] ?? null) || filled($siteSettings->contact_email))
                        <a class="rounded-xl border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-700 shadow-sm transition hover:-translate-y-0.5 hover:border-[var(--color-accent)]/60 hover:shadow-md" href="mailto:{{ $primaryBranch['email'] ?? $siteSettings->contact_email }}">
                            <p class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-[var(--color-heading)]/70">
                                <i data-lucide="mail" class="h-3.5 w-3.5"></i>
                                Email
                            </p>
                            <p class="mt-1 break-all font-semibold text-[var(--color-heading)]">{{ $primaryBranch['email'] ?? $siteSettings->contact_email }}</p>
                        </a>
                    @endif
                </div>

                <div class="mt-8 rounded-2xl border border-neutral-200 bg-white/90 p-4 shadow-sm sm:p-5" x-data="{ selectedBranch: 0, branches: @js($branches) }">
                    @if($branches->isNotEmpty())
                        <div class="mb-3 flex items-center justify-between gap-3">
                            <h2 class="inline-flex items-center gap-2 font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">
                                <i data-lucide="building-2" class="h-4 w-4 text-[var(--color-accent)]"></i>
                                Our locations
                            </h2>
                            <p class="text-xs text-neutral-500" x-text="`${branches.length} branch${branches.length > 1 ? 'es' : ''}`"></p>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <template x-for="(branch, idx) in branches" :key="idx">
                                <button type="button" @click="selectedBranch = idx" class="rounded-full border px-3 py-1.5 text-sm font-medium transition" :class="selectedBranch === idx ? 'border-[var(--color-accent)] bg-[var(--color-accent)] text-white shadow-sm' : 'border-neutral-300 bg-white text-neutral-700 hover:border-[var(--color-accent)]/50'">
                                    <span x-text="branch.name"></span>
                                </button>
                            </template>
                        </div>
                        <div class="mt-4 grid gap-4 lg:grid-cols-[0.95fr_1.05fr]">
                            <div class="rounded-xl border border-neutral-200 bg-[var(--color-surface-alt)]/80 p-4 text-sm text-neutral-700">
                                <p class="inline-flex items-center gap-2 font-semibold text-[var(--color-heading)]">
                                    <i data-lucide="map-pin" class="h-4 w-4 text-[var(--color-accent)]"></i>
                                    <span x-text="branches[selectedBranch]?.name"></span>
                                </p>
                                <p class="mt-2 whitespace-pre-line leading-relaxed" x-text="branches[selectedBranch]?.address"></p>
                                <template x-if="branches[selectedBranch]?.phone">
                                    <p class="mt-3 inline-flex items-center gap-2">
                                        <i data-lucide="phone" class="h-3.5 w-3.5 text-[var(--color-accent)]"></i>
                                        <span class="font-semibold text-[var(--color-heading)]">Phone:</span> <span x-text="branches[selectedBranch]?.phone"></span>
                                    </p>
                                </template>
                                <template x-if="branches[selectedBranch]?.email">
                                    <p class="mt-1 inline-flex items-center gap-2 break-all">
                                        <i data-lucide="at-sign" class="h-3.5 w-3.5 shrink-0 text-[var(--color-accent)]"></i>
                                        <span class="font-semibold text-[var(--color-heading)]">Email:</span> <span x-text="branches[selectedBranch]?.email"></span>
                                    </p>
                                </template>
                            </div>
                            <div class="overflow-hidden rounded-xl border border-neutral-200 shadow-sm">
                                <div class="aspect-[16/11]" x-show="branches[selectedBranch]?.map_embed_url">
                                    <iframe :src="branches[selectedBranch]?.map_embed_url" class="h-full w-full" title="Branch location map" style="border:0" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
                                </div>
                                <div class="inline-flex w-full items-center gap-1.5 bg-white px-3 py-2 text-xs text-neutral-500">
                                    <i data-lucide="navigation" class="h-3.5 w-3.5"></i>
                                    Interactive map for selected branch
                                </div>
                            </div>
                        </div>
                    @elseif(filled($siteSettings->contact_map_embed_url))
                        <h2 class="mb-3 inline-flex items-center gap-2 font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">
                            <i data-lucide="map-pinned" class="h-4 w-4 text-[var(--color-accent)]"></i>
                            Location
                        </h2>
                        <div class="aspect-[16/11] overflow-hidden rounded-xl border border-neutral-200 shadow-sm">
                            <iframe src="{{ $siteSettings->contact_map_embed_url }}" class="h-full w-full" title="{{ $siteSettings->contact_map_place_label ?: 'Office location map' }}" style="border:0" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
                        </div>
                        @if(filled($siteSettings->contact_map_place_label))
                            <p class="mt-2 text-xs text-neutral-600">{{ $siteSettings->contact_map_place_label }}</p>
                        @endif
                        @if(filled($primaryBranch['address'] ?? null) || filled($siteSettings->contact_address))
                            <p class="mt-3 whitespace-pre-line rounded-xl border border-neutral-200 bg-[var(--color-surface-alt)]/70 p-3 text-sm text-neutral-700">{{ $primaryBranch['address'] ?? $siteSettings->contact_address }}</p>
                        @endif
                    @else
                        <p class="text-sm text-neutral-600">A map embed can be added from the admin panel under Site settings.</p>
                    @endif
                </div>
                </div>

                <div data-aos="fade-left">
                    <div class="floral-soft overflow-hidden rounded-2xl border border-neutral-100 bg-[var(--color-surface-alt)] p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl md:p-7">
                        <h2 class="inline-flex items-center gap-2 font-display text-2xl font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">
                            <i data-lucide="messages-square" class="h-5 w-5 text-[var(--color-accent)]"></i>
                            Send us a message
                        </h2>
                        <p class="mt-2 text-sm text-neutral-600">Use this form for enquiries, support requests, referrals, and service interest.</p>

                    @if(session('status'))
                        <div class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900" role="status">{{ session('status') }}</div>
                    @else
                        @if ($errors->any())
                            <div class="mt-4 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-900" role="alert">
                                <p class="font-semibold">Please review the highlighted fields.</p>
                                <ul class="mt-2 list-disc pl-5">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form class="mt-6 space-y-4" action="{{ route('contact.store') }}" method="post">
                            @csrf
                            @honeypot
                            <div class="grid gap-4 sm:grid-cols-2">
                                <div>
                                    <label class="block text-sm font-medium" for="enquiry_type">Enquiry type</label>
                                    <select class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="enquiry_type" name="enquiry_type" required>
                                        <option value="general" @selected(old('enquiry_type') === 'general')>General enquiry</option>
                                        <option value="services" @selected(old('enquiry_type') === 'services')>Service interest</option>
                                        <option value="referral" @selected(old('enquiry_type') === 'referral')>Referral discussion</option>
                                        <option value="partnership" @selected(old('enquiry_type') === 'partnership')>Partnership enquiry</option>
                                        <option value="careers" @selected(old('enquiry_type') === 'careers')>Careers enquiry</option>
                                        <option value="other" @selected(old('enquiry_type') === 'other')>Other</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium" for="preferred_contact">Preferred contact</label>
                                    <select class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="preferred_contact" name="preferred_contact">
                                        <option value="either" @selected(old('preferred_contact') === 'either')>Either email or phone</option>
                                        <option value="email" @selected(old('preferred_contact') === 'email')>Email preferred</option>
                                        <option value="phone" @selected(old('preferred_contact') === 'phone')>Phone preferred</option>
                                    </select>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium" for="name">Name</label>
                                <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="name" name="name" type="text" value="{{ old('name') }}" required>
                            </div>
                            <div class="grid gap-4 sm:grid-cols-2">
                                <div>
                                    <label class="block text-sm font-medium" for="email">Email</label>
                                    <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="email" name="email" type="email" value="{{ old('email') }}" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium" for="phone">Phone (optional)</label>
                                    <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="phone" name="phone" type="text" value="{{ old('phone') }}">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium" for="subject">Subject</label>
                                <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="subject" name="subject" type="text" value="{{ old('subject') }}" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium" for="message">Message</label>
                                <textarea class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" id="message" name="message" rows="6" required>{{ old('message') }}</textarea>
                                <p class="mt-1 text-xs text-neutral-500">Please avoid adding multiple links. Messages with excessive links may be blocked as spam.</p>
                            </div>
                            @if($turnstileEnabled)
                                <div>
                                    <div class="cf-turnstile" data-sitekey="{{ config('hillcrest.turnstile.site_key') }}" data-theme="light"></div>
                                    @error('cf-turnstile-response')
                                        <p class="mt-1 text-xs text-red-700">{{ $message }}</p>
                                    @enderror
                                </div>
                            @endif
                            <button class="inline-flex min-h-[44px] w-full items-center justify-center gap-2 rounded-md bg-[var(--color-accent)] px-4 py-3 text-sm font-semibold text-white hover:opacity-90" type="submit">
                                <i data-lucide="send" class="h-4 w-4"></i>
                                Submit
                            </button>
                        </form>
                    @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@if($turnstileEnabled)
    @push('scripts')
        <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    @endpush
@endif