@php
    $settings = $siteSettings ?? \App\Models\Setting::fallback();
@endphp

<footer class="footer-bg text-gray-300">
    <div class="mx-auto max-w-6xl px-4 py-12">
        <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
            <div class="col-span-2 md:col-span-1">
                <div class="mb-3 flex items-center gap-2">
                    <img src="{{ asset('icon-3.png') }}" alt="aamloon" class="h-15 w-auto">
                </div>
                <p class="mb-4 text-xs leading-relaxed text-gray-400">আপনার জন্য খাঁটি মান</p>
                <div class="space-y-1 text-xs text-gray-500">
                    <div>{{ $settings->address }}</div>
                    <div><a href="{{ $settings->emailHref() }}"
                            class="transition hover:text-white">{{ $settings->email }}</a></div>
                    <div><a href="{{ $settings->phoneHref() }}"
                            class="transition hover:text-white">{{ $settings->phone }}</a></div>
                </div>
            </div>

            <div>
                <h4 class="font-poppins mb-4 text-sm font-semibold text-white">সহায়তা</h4>
                <ul class="space-y-2 text-xs text-gray-400">
                    <li><a href="{{ route('track-order.index') }}" class="transition hover:text-white">অর্ডার ট্র্যাক
                            করুন</a></li>
                    <li><a href="{{ route('cart') }}" class="transition hover:text-white">শপিং কার্ট</a></li>
                    <li><a href="{{ route('contact-us') }}" class="transition hover:text-white">যোগাযোগ করুন</a></li>
                </ul>
            </div>

            <div>
                <h4 class="font-poppins mb-4 text-sm font-semibold text-white">দ্রুত লিংক</h4>
                <ul class="space-y-2 text-xs text-gray-400">
                    <li><a href="{{ route('about-us') }}" class="transition hover:text-white">আমাদের সম্পর্কে</a></li>
                    <li><a href="{{ route('privacy-policy') }}" class="transition hover:text-white">গোপনীয়তা নীতি</a>
                    </li>
                    <li><a href="{{ route('terms-and-conditions') }}" class="transition hover:text-white">শর্তাবলি</a>
                    </li>
                </ul>
            </div>

            <div>
                <h4 class="font-poppins mb-4 text-sm font-semibold text-white">আমাদের অনুসরণ করুন</h4>
                <div class="flex gap-3">
                    @foreach ($settings->socialLinks() as $link)
                        @php
                            $socialClass = match ($link['type']) {
                                'facebook' => 'bg-blue-600 hover:bg-blue-500',
                                'instagram' => 'hover:opacity-90',
                                'youtube' => 'bg-red-600 hover:bg-red-500',
                                'linkedin' => 'bg-sky-700 hover:bg-sky-600',
                                default => 'bg-gray-700 hover:bg-gray-600',
                            };
                        @endphp

                        <a href="{{ $link['url'] }}" target="_blank" rel="noopener noreferrer"
                            class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition {{ $socialClass }}"
                            @if ($link['type'] === 'instagram') style="background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);" @endif
                            aria-label="{{ $link['label'] }}">
                            @if ($link['type'] === 'facebook')
                                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
                                </svg>
                            @elseif ($link['type'] === 'instagram')
                                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <rect x="2" y="2" width="20" height="20" rx="5" fill="none"
                                        stroke="white" stroke-width="2" />
                                    <circle cx="12" cy="12" r="4" fill="none" stroke="white"
                                        stroke-width="2" />
                                    <circle cx="17.5" cy="6.5" r="1" fill="white" />
                                </svg>
                            @elseif ($link['type'] === 'youtube')
                                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path
                                        d="M23 7.5a3 3 0 00-2.1-2.1C19 5 12 5 12 5s-7 0-8.9.4A3 3 0 001 7.5 31.5 31.5 0 001 16.5a3 3 0 002.1 2.1C5 19 12 19 12 19s7 0 8.9-.4a3 3 0 002.1-2.1 31.5 31.5 0 000-9zM10 15.5v-7l6 3.5-6 3.5z" />
                                </svg>
                            @else
                                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path
                                        d="M6.5 8.8H3V21h3.5V8.8zM4.8 3a2 2 0 100 4 2 2 0 000-4zM21 14.3c0-3.5-1.9-5.8-4.9-5.8a4.2 4.2 0 00-3.7 2V8.8H9V21h3.5v-6.1c0-1.7.8-2.8 2.4-2.8 1.4 0 2.1.9 2.1 2.7V21h4v-6.7z" />
                                </svg>
                            @endif
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="border-t border-gray-800 py-4">
        <div class="mx-auto max-w-6xl px-4 text-center text-xs text-gray-500">
            সর্বস্বত্ব সংরক্ষিত <span class="font-semibold text-white">আমলন</span> ২০২৫ | ডেভেলপ করেছেন
            <span class="text-orange-400">মোঃ নাইমুল ইসলাম</span>
        </div>
    </div>
</footer>