@php
    $navigation = [['name' => 'Home', 'href' => url('/')], ['name' => 'About WBU', 'href' => url('/wbu')], ['name' => 'I-Am Academy', 'href' => url('/academics')], ['name' => 'Activities', 'href' => url('/activities')], ['name' => 'News & Events', 'href' => url('/news')], ['name' => 'Contact Us', 'href' => url('/contact')]];

    $social = [['name' => 'Line', 'href' => '#', 'icon' => 'line'], ['name' => 'Facebook', 'href' => '#', 'icon' => 'facebook'], ['name' => 'YouTube', 'href' => '#', 'icon' => 'youtube'], ['name' => 'X', 'href' => '#', 'icon' => 'x'], ['name' => 'Instagram', 'href' => '#', 'icon' => 'instagram'], ['name' => 'TikTok', 'href' => '#', 'icon' => 'tiktok'], ['name' => 'LinkedIn', 'href' => '#', 'icon' => 'linkedin']];
@endphp

<footer class="bg-gray-50 border-t border-border">
    <div class="mx-auto max-w-7xl px-6 py-12 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Logo and Description -->
            <div class="space-y-4 footer-logo">
                <a class="flex items-center gap-3 w-fit" href="{{ url('/') }}">
                    <div class="relative w-12 h-12">
                        <img class="object-contain w-full h-full" src="{{ check_file($data['page_init']['setting']['logo']['footer']) }}" alt="WBU Logo">
                    </div>
                    <div>
                        <p class="text-lg font-bold">{{ $data['page_init']['setting']['footer_title'] ?? '' }}</p>
                        <p class="text-xs ">{{ $data['page_init']['setting']['footer_desc'] ?? '' }}</p>
                    </div>
                </a>
                <p class="text-sm  leading-relaxed">
                    {{ $data['page_init']['setting']['footer_detail'] ?? '' }}
                </p>
            </div>

            <!-- Quick Links -->
            <div class="footer-quick-links">
                @if (!empty($data['page_init']['menu_footer']))
                    <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">{{ $data['page_init']['menu_footer_main']['name'] ?? '' }}</h3>
                    <ul class="space-y-2">
                        @foreach ($data['page_init']['menu_footer'] as $item)
                            <li>
                                <a class="text-sm  hover:text-primary transition-colors" href="{{ $item['url'] ?? '#' }}">
                                    {{ $item['name'] ?? '' }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>

            <!-- Contact Info -->
            <div class="footer-contact">
                <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">{{ __('frontend::common.contact_info') }}</h3>
                <ul class="space-y-3 list-contact">
                    @if (!empty($data['page_init']['contact']['office']))
                        <li class="flex items-start gap-3">
                            <svg class="h-5 w-5 mt-0.5 shrink-0 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <span class="text-sm ">
                                {{ $data['page_init']['contact']['office'] ?? '' }}
                            </span>
                        </li>
                    @endif
                    @if (!empty($data['page_init']['contact']['tel']))
                        <li class="flex items-center gap-3">
                            <svg class="h-5 w-5 shrink-0 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                            <a href="tel:{{ $data['page_init']['contact']['tel'] ?? '' }}">
                                <span class="text-sm ">{{ $data['page_init']['contact']['tel'] ?? '' }}</span>
                            </a>
                        </li>
                    @endif
                    @if (!empty($data['page_init']['contact']['email']))
                        <li class="flex items-center gap-3">
                            <svg class="h-5 w-5 shrink-0 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            <a href="mailto:{{ $data['page_init']['contact']['email'] ?? '' }}">
                                <span class="text-sm ">{{ $data['page_init']['contact']['email'] ?? '' }}</span>
                            </a>
                        </li>
                    @endif
                </ul>

                @if (!empty($data['page_init']['contact']['social']))
                    <div class="mt-6 footer-social">
                        <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">{{ __('frontend::common.follow_us') }}</h4>
                        <div class="flex gap-4">
                            @foreach ($data['page_init']['contact']['social'] as $type => $item)
                                <a class=" hover:text-primary transition-colors" href="{{ $item['url'] }}" aria-label="{{ $type }}">
                                    <span class="sr-only">{{ $type }}</span>
                                    @if ($type === 'line')
                                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314" />
                                        </svg>
                                    @elseif($type === 'facebook')
                                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                                        </svg>
                                    @elseif($type === 'youtube')
                                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                                        </svg>
                                    @elseif($type === 'twitter')
                                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                                        </svg>
                                    @elseif($type === 'instagram')
                                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                                        </svg>
                                    @elseif($type === 'tiktok')
                                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
                                        </svg>
                                    @elseif($type === 'linkedin')
                                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.25 8.25h4.5V24h-4.5zM8.75 8.25h4.31v2.13h.06c.6-1.14 2.07-2.34 4.26-2.34 4.55 0 5.39 2.99 5.39 6.88V24h-4.5v-7.45c0-1.78-.03-4.06-2.47-4.06-2.47 0-2.85 1.93-2.85 3.93V24h-4.5z" />
                                        </svg>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="mt-12  pt-8 footer-copyright">
            <div class="footer-copyright-inner flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="footer-copyright-text flex flex-col sm:flex-row items-center justify-center gap-4">
                    <p class="text-sm ">
                        {{ $data['page_init']['setting']['copyright'] ?? '' }}
                    </p>
                    <div class="footer-policy flex items-center gap-4">
                        <a class="text-sm  hover:text-primary transition-colors" href="{{ $data['page_init']['policy']['url'] ?? '#' }}">
                            {{ $data['page_init']['policy']['name'] ?? '' }}
                        </a>
                    </div>
                </div>
                <!-- Go to Top Button -->
                <button class="btn btn-totop px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center gap-2" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                    </svg>
                    {{ __('frontend::common.go_to_top') }}
                </button>
            </div>
        </div>
    </div>
</footer>