@php
    $socials = [
        ['name' => 'Instagram', 'url' => \App\Support\SiteSettings::get('instagram')],
        ['name' => 'TikTok', 'url' => \App\Support\SiteSettings::get('tiktok')],
        ['name' => 'Facebook', 'url' => \App\Support\SiteSettings::get('facebook')],
        ['name' => 'YouTube', 'url' => \App\Support\SiteSettings::get('youtube')],
    ];
    $links = [
        ['label' => __('ui.about'), 'route' => 'about'],
        ['label' => __('ui.contact_us'), 'route' => 'contact'],
        ['label' => __('ui.privacy'), 'route' => 'privacy'],
        ['label' => __('ui.terms'), 'route' => 'terms'],
        ['label' => __('ui.shipping'), 'route' => 'shipping'],
    ];
@endphp

<footer class="store-footer">
    <div class="mx-auto flex w-full max-w-[1320px] flex-col items-center px-4 py-8 text-center lg:py-10">
        <span class="inline-flex items-center rounded-lg bg-brand px-2.5 py-1.5">
            <img src="{{ asset('images/beigoods-logo.png') }}" alt="BeiGoods" width="946" height="163" class="brand-logo">
        </span>
        <p class="mt-3 text-[13px] font-medium text-navy">{{ __('ui.tagline') }}</p>

        <ul class="mt-4 flex items-center justify-center gap-2.5">
            @foreach ($socials as $social)
                <li>
                    @if ($social['url'])
                        <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer" class="store-social footer-social" aria-label="{{ $social['name'] }}">
                    @else
                        <span class="store-social footer-social" role="img" aria-label="{{ $social['name'] }}">
                    @endif
                        @include('components.store.social-icon', ['name' => $social['name']])
                    @if ($social['url'])
                        </a>
                    @else
                        </span>
                    @endif
                </li>
            @endforeach
        </ul>

        <nav aria-label="Footer" class="mt-5 flex max-w-xl flex-wrap items-center justify-center gap-x-4 gap-y-2">
            @foreach ($links as $link)
                <a href="{{ route($link['route']) }}" class="footer-link text-[13px] font-medium text-navy">{{ $link['label'] }}</a>
            @endforeach
        </nav>

        <div class="mt-5 w-full max-w-md border-t border-[#E4DFF5] pt-4">
            <p class="text-[11px] font-semibold uppercase tracking-[0.12em] text-brand">{{ __('ui.payment_methods') }}</p>
            <ul class="mt-3 flex flex-wrap items-center justify-center gap-3">
                <li class="footer-pay">
                    <img src="{{ asset('images/whish-pay.png') }}" alt="Whish Pay" width="614" height="614" class="whish-pay-logo">
                    <span class="text-[13px] font-bold text-navy">Whish Money</span>
                </li>
                <li class="footer-pay">
                    <x-store.icon name="cash" class="text-brand" width="16" height="16" />
                    <span>
                        <span class="block text-[13px] font-bold text-navy">{{ __('ui.cash_on_delivery') }}</span>
                        <span class="block text-[11px] text-muted">{{ __('ui.pay_on_arrival') }}</span>
                    </span>
                </li>
            </ul>
        </div>

        <p class="mt-5 text-[12px] text-muted">© {{ date('Y') }} BeiGoods. {{ __('ui.rights') }}</p>
    </div>
</footer>