@extends('layouts.public')

@section('title', __('Contact Us'))
@section('meta_description', __('Office locations, contact details and the inquiry form for ABACO INFRA.'))

@section('content')
    <x-page-hero :eyebrow="__('Contact')"
                 :title="__('Get in touch')"
                 :subtitle="__('Talk to our consulting teams about an assignment, partnership or procurement opportunity.')"
                 :breadcrumbs="[__('Contact') => null]"
                 :meta="[
                     __('Email') => setting('contact_email'),
                     __('Phone') => setting('contact_phone'),
                     __('Offices') => $offices->count(),
                 ]" />

    <section class="section">
        <div class="container-page grid gap-14 lg:grid-cols-2">

            <div>
                @if (session('success'))
                    <x-alert type="success" class="mb-8" :title="__('Message received')">{{ session('success') }}</x-alert>
                @endif

                <h2 class="font-display text-title font-bold text-text">{{ __('Send us a message') }}</h2>
                <p class="mt-2 text-sm text-text-secondary">{{ __('We respond to enquiries within two working days.') }}</p>

                @if ($errors->any())
                    <x-alert type="error" class="mt-6" :title="__('Please correct the following')">
                        <ul class="mt-1 list-inside list-disc space-y-0.5">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </x-alert>
                @endif

                <form action="{{ route('contact.store') }}" method="POST" class="mt-8 grid gap-6 sm:grid-cols-2"
                      x-data="submitGuard" @submit="submit()">
                    @csrf

                    <x-form.select name="type" :label="__('Reason for contact')" required :placeholder="false"
                                   :options="['contact' => __('General enquiry'), 'inquiry' => __('Project / consulting inquiry')]"
                                   class="sm:col-span-2" />

                    <x-form.input name="name" :label="__('Full name')" required autocomplete="name" />
                    <x-form.input name="email" type="email" :label="__('Email address')" required autocomplete="email" />
                    <x-form.input name="phone" :label="__('Phone')" autocomplete="tel" />
                    <x-form.input name="organization" :label="__('Organisation')" autocomplete="organization" />
                    <x-form.input name="subject" :label="__('Subject')" class="sm:col-span-2" />
                    <x-form.textarea name="message" :label="__('Message')" rows="7" required class="sm:col-span-2" />

                    @include('public.partials.honeypot', ['formId' => 'contact'])
                    @include('public.partials.captcha')

                    <div class="sm:col-span-2">
                        <button type="submit" class="btn-primary" :disabled="submitting">
                            <span x-show="!submitting">{{ __('Send message') }}</span>
                            <span x-show="submitting" x-cloak>{{ __('Sending…') }}</span>
                        </button>
                    </div>
                </form>
            </div>

            <div>
                <h2 class="font-display text-title font-bold text-text">{{ __('Our offices') }}</h2>

                @if ($offices->isEmpty())
                    <x-empty-state icon="building" class="mt-8" :title="__('Office details are being published')" />
                @else
                    <div class="mt-8 space-y-4" data-reveal-group>
                        @foreach ($offices as $office)
                            <div @class(['panel p-6', 'ring-1 ring-primary' => $office->is_primary]) data-reveal-child>
                                <p class="meta-label">{{ $office->typeLabel() }}</p>
                                <h3 class="mt-1.5 font-display text-base font-semibold text-text">{{ $office->name }}</h3>
                                <p class="mt-2 text-sm text-text-secondary">{{ $office->fullAddress() }}</p>

                                <div class="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm">
                                    @if ($office->phone)
                                        <a href="tel:{{ preg_replace('/\s+/', '', $office->phone) }}"
                                           class="inline-flex items-center gap-2 text-text-secondary transition hover:text-text-brand">
                                            <x-icon name="phone" class="size-4" /> {{ $office->phone }}
                                        </a>
                                    @endif

                                    @if ($office->email)
                                        <a href="mailto:{{ $office->email }}"
                                           class="inline-flex items-center gap-2 text-text-secondary transition hover:text-text-brand">
                                            <x-icon name="mail" class="size-4" /> {{ $office->email }}
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <div class="mt-8 overflow-hidden rounded-2xl border border-border">
                    @if ($embed = ($primaryOffice?->map_embed ?: setting('contact_map_embed', config('services.google_maps.embed_url'))))
                        <iframe src="{{ $embed }}" class="h-80 w-full" style="border:0" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade" title="{{ __('Office location map') }}"></iframe>
                    @else
                        <div class="flex h-80 flex-col items-center justify-center gap-3 bg-surface-muted text-text-muted">
                            <x-icon name="map" class="size-7" />
                            <p class="max-w-xs text-center text-sm">
                                {{ __('Add a Google Maps embed URL in Settings → Contact to display the map here.') }}
                            </p>
                        </div>
                    @endif
                </div>

                <p class="mt-8 text-sm text-text-secondary">
                    {{ __('Have a complaint or feedback about our services?') }}
                    <a href="{{ route('contact.feedback') }}" class="font-medium text-text-brand underline underline-offset-4">
                        {{ __('Use the grievance form') }}
                    </a>.
                </p>
            </div>
        </div>
    </section>
@endsection