@php
    $footer = config('front-navigation.footer', []);
@endphp

<div class="grid gap-10 lg:grid-cols-[1.2fr_2fr] lg:gap-16">
    {{-- Brand --}}
    <div class="max-w-sm">
        <a href="{{ route('home') }}" class="inline-flex" aria-label="{{ config('app.name') }}">
            <x-common.logo class="h-12 w-auto" />
        </a>
        <p class="mt-4 text-sm leading-relaxed text-muted-foreground">
            {{ $footer['description'] ?? '' }}
        </p>

        @if (!empty($footer['social']))
            <div class="mt-6 flex items-center gap-3">
                @foreach ($footer['social'] as $social)
                    @php
                        $socialURL = 'javascript:void(0)';
                        if(isset($social['url']) && !empty($social['url']) && $social['url'] !== 'javascript:void(0)' && $social['url'] !== '#') {
                            $socialURL = $social['url'];
                        }
                    @endphp
                    <a
                        href="{{$socialURL}}"
                        class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground transition-colors hover:border-primary-200 hover:text-primary-600 dark:hover:border-primary-800 dark:hover:text-primary-400"
                        aria-label="{{ $social['label'] }}"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        @if (empty($social['icon']))
                            <span class="text-xs font-semibold uppercase">{{ substr($social['label'], 0, 1) }}</span>
                        @else
                            {!! $social['icon'] !!}
                        @endif
                    </a>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Link columns --}}
    <div class="grid grid-cols-2 gap-8 sm:grid-cols-4">
        @foreach ($footer['columns'] ?? [] as $column)
            <div>
                <h3 class="text-sm font-semibold text-foreground">{{ $column['title'] }}</h3>
                <ul class="mt-4 space-y-2.5">
                    @foreach ($column['links'] ?? [] as $link)
                        @php
                            $linkURL = 'javascript:void(0)';
                            if(isset($link['route']) && !empty($link['route']) && Route::has($link['route'])) {
                                $linkURL = route($link['route']);
                            }elseif(isset($link['url']) && !empty($link['url']) && $link['url'] !== 'javascript:void(0)' && $link['url'] !== '#') {
                                $linkURL = $link['url'];
                            }
                        @endphp
                        <li>
                            <a
                                href="{{ $linkURL }}"
                                class="text-sm text-muted-foreground transition-colors hover:text-foreground"
                            >
                                {{ $link['label'] }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endforeach
    </div>
</div>