{{-- Global locations & contact (SOW 1.18). --}}
@php($ctaImage = setting('home_locations_image'))

<section class="relative overflow-hidden bg-dark" data-parallax-scope>
    @if ($ctaImage)
        {{-- Background photography with a brand gradient over it for legibility. --}}
        <img src="{{ image_url($ctaImage) }}" alt="" aria-hidden="true" loading="lazy" decoding="async"
             class="absolute inset-0 size-full scale-110 object-cover" data-parallax="0.06">
        <div class="absolute inset-0 bg-gradient-to-r from-dark via-dark/92 to-dark/70"></div>
    @else
        <div class="absolute inset-0 bg-blueprint-dark opacity-50" aria-hidden="true"></div>
    @endif

    <div class="container-page relative grid gap-10 py-16 lg:grid-cols-2 lg:py-20">
        <div>
            <x-section-heading tone="dark"
                               :eyebrow="__('Global presence')"
                               :title="setting('home_locations_title', __('Where we work'))"
                               :subtitle="setting('home_locations_intro')" />

            @if ($layoutOffices->isNotEmpty())
                <div class="mt-8 grid gap-px overflow-hidden rounded-2xl border border-white/10 bg-white/10 sm:grid-cols-2"
                     data-reveal-group>
                    @foreach ($layoutOffices->take(4) as $office)
                        <div class="bg-dark p-6" data-reveal-child>
                            <p class="meta-label text-white/50">{{ $office->typeLabel() }}</p>
                            <h3 class="mt-1.5 font-display text-base font-semibold text-white">{{ $office->name }}</h3>
                            <p class="mt-2 text-sm text-white/65">{{ $office->fullAddress() }}</p>

                            @if ($office->phone)
                                <a href="tel:{{ preg_replace('/\s+/', '', $office->phone) }}"
                                   class="mt-3 inline-flex items-center gap-2 text-sm text-white/80 transition hover:text-white">
                                    <x-icon name="phone" class="size-3.5" /> {{ $office->phone }}
                                </a>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif

            <div class="mt-10 flex flex-wrap gap-3" data-reveal>
                <x-button :href="route('contact.index')" arrow>{{ __('Get in touch') }}</x-button>
                <x-button variant="on-dark" :href="route('careers.index')">{{ __('Work with us') }}</x-button>
            </div>
        </div>

        <div class="overflow-hidden rounded-2xl border border-white/10" data-reveal>
            @if ($embed = setting('contact_map_embed', config('services.google_maps.embed_url')))
                <iframe src="{{ $embed }}" class="h-full min-h-[22rem] w-full" style="border:0" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade" title="{{ __('Office locations map') }}"></iframe>
            @else
                {{-- No map configured: show the office list rather than an empty frame. --}}
                <div class="flex h-full min-h-[22rem] flex-col justify-center gap-4 bg-white/5 p-8">
                    <x-icon name="map" class="size-7 text-white/40" />
                    <p class="text-sm text-white/60">
                        {{ __('Add a Google Maps embed URL in Settings → Contact to display the office map here.') }}
                    </p>

                    <ul class="mt-2 space-y-2 text-sm text-white/75">
                        @foreach ($layoutOffices as $office)
                            <li>{{ $office->name }} — {{ $office->fullAddress() }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>
</section>