@php $navServices = $navServices ?? config('brokam.services'); @endphp

<footer class="theme-dark relative mt-auto border-t border-white/10 bg-night overflow-hidden">
    <div class="glow w-[40rem] h-[40rem] -bottom-80 left-1/2 -translate-x-1/2" style="background: radial-gradient(circle, rgba(179,83,39,.16), transparent 70%);"></div>

    <div class="relative shell py-16 grid gap-12 lg:grid-cols-[1.5fr_1fr_1fr_1.1fr]">
        <div>
            <img src="{{ asset('brand/v2_reversed.svg') }}" alt="Brokam International" class="h-8 w-auto">
            <p class="mt-5 text-sm leading-relaxed max-w-xs text-slate-500">
                Integrated procurement, logistics, and technology infrastructure — sourced, delivered, and integrated under one accountable partner, worldwide.
            </p>
            <a href="{{ route('quote') }}" class="btn btn-primary mt-6 text-sm !py-2.5">Request a Quote <x-icon name="arrow" class="w-4 h-4"/></a>
        </div>

        <div>
            <p class="kicker mb-5">Services</p>
            <ul class="space-y-2.5 text-sm">
                @foreach ($navServices as $s)
                    <li><a href="{{ route('services.show', $s['slug']) }}" class="text-slate-500 hover:text-slate-ink transition">{{ $s['title'] }}</a></li>
                @endforeach
            </ul>
        </div>

        <div>
            <p class="kicker mb-5">Company</p>
            <ul class="space-y-2.5 text-sm">
                <li><a href="{{ route('about') }}" class="text-slate-500 hover:text-slate-ink transition">About Us</a></li>
                <li><a href="{{ route('approach') }}" class="text-slate-500 hover:text-slate-ink transition">Our Approach</a></li>
                <li><a href="{{ route('industries') }}" class="text-slate-500 hover:text-slate-ink transition">Industries</a></li>
                <li><a href="{{ route('projects.index') }}" class="text-slate-500 hover:text-slate-ink transition">Projects</a></li>
                <li><a href="{{ route('news.index') }}" class="text-slate-500 hover:text-slate-ink transition">News &amp; Insights</a></li>
                <li><a href="{{ route('suppliers') }}" class="text-slate-500 hover:text-slate-ink transition">Suppliers</a></li>
                <li><a href="{{ route('careers') }}" class="text-slate-500 hover:text-slate-ink transition">Careers</a></li>
            </ul>
        </div>

        <div>
            <p class="kicker mb-5">Get in touch</p>
            <ul class="space-y-3 text-sm">
                <li class="flex items-start gap-3"><x-icon name="mail" class="w-5 h-5 text-brand-400 shrink-0"/><a href="mailto:{{ config('brokam.company.email') }}" class="text-slate-500 hover:text-slate-ink transition">{{ config('brokam.company.email') }}</a></li>
                <li class="flex items-start gap-3"><x-icon name="phone" class="w-5 h-5 text-brand-400 shrink-0"/><a href="tel:{{ preg_replace('/\s+/', '', config('brokam.company.phone')) }}" class="text-slate-500 hover:text-slate-ink transition">{{ config('brokam.company.phone') }}</a></li>
                <li class="flex items-start gap-3"><x-icon name="pin" class="w-5 h-5 text-brand-400 shrink-0"/><span class="text-slate-500">{{ config('brokam.company.address') }}</span></li>
            </ul>
            <a href="{{ route('contact') }}" class="link-underline inline-flex items-center gap-1.5 text-slate-ink mt-5 text-sm font-medium">Contact us <x-icon name="arrow" class="w-4 h-4"/></a>
        </div>
    </div>

    <div class="relative border-t border-white/10">
        <div class="shell py-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-500">
            <p class="font-mono">&copy; {{ date('Y') }} {{ config('brokam.company.name') }}</p>
            <div class="flex items-center gap-5">
                <a href="{{ route('privacy') }}" class="hover:text-slate-ink transition">Privacy</a>
                <a href="{{ route('search') }}" class="hover:text-slate-ink transition">Search</a>
                <a href="{{ config('brokam.erp_url') }}/login" class="inline-flex items-center gap-1.5 hover:text-brand-400 transition"><x-icon name="lock" class="w-4 h-4"/> ERP Login</a>
                <a href="{{ auth()->check() ? route('admin.dashboard') : route('login') }}" class="hover:text-slate-ink transition">{{ auth()->check() ? 'Admin' : 'Staff login' }}</a>
                <span class="font-mono text-slate-400">{{ config('brokam.company.domain') }}</span>
            </div>
        </div>
    </div>
</footer>