{{-- Footer (SOW 1.19): sitemap, ESG statement, accreditation badges, policy links. --}}
<footer class="mt-auto bg-dark text-white/65">
    <div class="container-page grid gap-12 py-16 md:grid-cols-2 lg:grid-cols-12 lg:py-20">

        <div class="lg:col-span-4">
            @if ($logo = setting('site_logo_light', setting('site_logo')))
                <img src="{{ asset_path($logo) }}" alt="{{ setting('site_name', config('app.name')) }}"
                     class="mb-5 h-14 w-auto sm:h-16" loading="lazy" decoding="async">
            @else
                <p class="mb-5 font-display text-lg font-bold text-white">{{ setting('site_name', config('app.name')) }}</p>
            @endif

            <p class="prose-measure text-sm leading-relaxed">{{ setting('footer_about') }}</p>

            @if ($esg = setting('footer_esg_statement'))
                <p class="mt-6 border-l-2 border-primary pl-4 text-sm leading-relaxed text-white/55">{{ $esg }}</p>
            @endif
        </div>

        <div class="lg:col-span-2">
            <h2 class="mb-5 text-xs font-semibold uppercase tracking-[0.18em] text-white">{{ __('Sectors') }}</h2>
            <ul class="space-y-2.5 text-sm">
                @foreach ($layoutSectors->take(8) as $sector)
                    <li>
                        <a href="{{ route('sectors.show', $sector) }}" class="transition hover:text-white">{{ $sector->name }}</a>
                    </li>
                @endforeach
            </ul>
        </div>

        <div class="lg:col-span-2">
            <h2 class="mb-5 text-xs font-semibold uppercase tracking-[0.18em] text-white">{{ __('Explore') }}</h2>
            <ul class="space-y-2.5 text-sm">
                @forelse ($footerMenu as $item)
                    <li>
                        <a href="{{ $item->resolvedUrl() }}" target="{{ $item->target }}"
                           class="transition hover:text-white">{{ $item->label }}</a>
                    </li>
                @empty
                    @foreach ([
                        'about' => __('About Us'),
                        'projects.index' => __('Projects'),
                        'team.index' => __('Our Team'),
                        'media.index' => __('Media & Notices'),
                        'careers.index' => __('Careers'),
                        'downloads.index' => __('Downloads'),
                        'contact.index' => __('Contact'),
                    ] as $route => $label)
                        <li><a href="{{ route($route) }}" class="transition hover:text-white">{{ $label }}</a></li>
                    @endforeach
                @endforelse
            </ul>
        </div>

        <div class="lg:col-span-4">
            <h2 class="mb-5 text-xs font-semibold uppercase tracking-[0.18em] text-white">{{ __('Get in touch') }}</h2>

            <ul class="space-y-3.5 text-sm">
                @foreach ($layoutOffices->where('is_primary', true)->take(1) as $office)
                    <li class="flex gap-3">
                        <x-icon name="map" class="mt-0.5 size-4 shrink-0 text-text-brand" />
                        <span>{{ $office->fullAddress() }}</span>
                    </li>
                @endforeach

                @if ($phone = setting('contact_phone'))
                    <li class="flex gap-3">
                        <x-icon name="phone" class="mt-0.5 size-4 shrink-0 text-text-brand" />
                        <a href="tel:{{ preg_replace('/\s+/', '', $phone) }}" class="transition hover:text-white">{{ $phone }}</a>
                    </li>
                @endif

                @if ($email = setting('contact_email'))
                    <li class="flex gap-3">
                        <x-icon name="mail" class="mt-0.5 size-4 shrink-0 text-text-brand" />
                        <a href="mailto:{{ $email }}" class="transition hover:text-white">{{ $email }}</a>
                    </li>
                @endif
            </ul>

            @include('partials.newsletter-form')
        </div>
    </div>

    @if ($layoutAccreditations->isNotEmpty())
        <div class="border-t border-white/10">
            <div class="container-page flex flex-wrap items-center gap-x-10 gap-y-5 py-6">
                <span class="meta-label text-white/45">{{ __('Accreditation') }}</span>
                @foreach ($layoutAccreditations as $badge)
                    <img src="{{ image_url($badge->badge ?: $badge->image) }}" alt="{{ $badge->title }}"
                         title="{{ $badge->title }}" loading="lazy" decoding="async"
                         class="h-9 w-auto opacity-70 transition hover:opacity-100">
                @endforeach
            </div>
        </div>
    @endif

    @if ($layoutQuickLinks->isNotEmpty())
        <div class="border-t border-white/10">
            <div class="container-page grid gap-8 py-8 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($layoutQuickLinks as $category)
                    <div>
                        <h3 class="meta-label mb-3 text-white/45">{{ $category->name }}</h3>
                        <ul class="space-y-2 text-sm">
                            @foreach ($category->activeLinks as $link)
                                <li>
                                    <a href="{{ $link->url }}" target="{{ $link->target }}" rel="noopener"
                                       class="inline-flex items-center gap-1.5 transition hover:text-white">
                                        {{ $link->label }}
                                        @if ($link->target === '_blank')
                                            <x-icon name="external" class="size-3 opacity-50" />
                                        @endif
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <div class="border-t border-white/10">
        <div class="container-page flex flex-col items-center justify-between gap-4 py-6 text-xs text-white/50 sm:flex-row">
            <p>&copy; {{ now()->year }} {{ setting('site_name', config('app.name')) }}. {{ __('All rights reserved.') }}</p>

            <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
                <a href="{{ url('privacy-policy') }}" class="transition hover:text-white">{{ __('Privacy Policy') }}</a>
                <a href="{{ url('terms-of-use') }}" class="transition hover:text-white">{{ __('Terms of Use') }}</a>
                <a href="{{ route('faqs.index') }}" class="transition hover:text-white">{{ __('FAQs') }}</a>
                <a href="{{ route('contact.feedback') }}" class="transition hover:text-white">{{ __('Feedback & Grievance') }}</a>
            </div>
        </div>
    </div>
</footer>