@use('App\Models\Setting')
@php
    $club = Setting::get('club_name', 'UU Computer Programming Club');
    $links = [['About', 'about'], ['Members', 'members.index'], ['Events', 'events.index'], ['Committee', 'committee'], ['Achievements', 'achievements'], ['Join', 'join']];
    if (Route::has('registration.status')) { $links[] = ['Check registration', 'registration.status']; }

    $address = Setting::get('address');
    $email = Setting::get('email');
    $phone = Setting::get('phone');
    $socials = collect(['facebook', 'github', 'linkedin'])->mapWithKeys(fn ($n) => [$n => Setting::get($n)])->filter();
@endphp
<footer class="relative mt-20 overflow-hidden bg-slate-950 text-slate-300">
    {{-- Background: blue + amber glows over a dotted grid --}}
    <div class="pointer-events-none absolute inset-0" aria-hidden="true"
         style="background-image: radial-gradient(620px circle at 8% 0%, rgba(59,130,246,.28), transparent 60%), radial-gradient(520px circle at 95% 100%, rgba(245,158,11,.20), transparent 60%), radial-gradient(rgba(148,163,184,.20) 1px, transparent 1.3px); background-size: auto, auto, 22px 22px;"></div>
    <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-blue-500/70 to-transparent"></div>

    <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

        {{-- Call to action --}}
        <div class="flex flex-col items-center gap-4 border-b border-slate-800/80 py-12 text-center">
            <h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-3xl">Ready to code with us?</h2>
            <p class="max-w-xl text-sm text-slate-400 sm:text-base">Join workshops, contests and a community that grows together.</p>
            <div class="mt-2 flex flex-wrap justify-center gap-3">
                <a href="{{ route('join') }}" class="btn btn-accent">Join the club</a>
                <a href="{{ route('events.index') }}" class="btn border border-slate-700 text-slate-200 hover:bg-slate-800">See events</a>
            </div>
        </div>

        <div class="grid gap-12 py-12 sm:grid-cols-2 lg:grid-cols-4">
            {{-- Brand --}}
            <div class="flex flex-col items-center text-center md:items-start md:text-left">
                <a href="{{ route('home') }}" class="flex items-center gap-3">
                    <x-logo class="h-12 w-12" />
                    <span class="max-w-[10rem] text-left text-base font-bold leading-tight text-white">{{ $club }}</span>
                </a>
                <p class="mt-4 max-w-xs text-sm leading-relaxed text-slate-400">{{ Setting::get('footer_description') }}</p>
                @if($socials->isNotEmpty())
                    <div class="mt-5 flex gap-3">
                        @foreach($socials as $net => $url)
                            <a href="{{ $url }}" target="_blank" rel="noopener" aria-label="{{ ucfirst($net) }}"
                               class="flex h-10 w-10 items-center justify-center rounded-full border border-slate-700 bg-slate-900/60 text-slate-300 transition hover:-translate-y-0.5 hover:border-blue-500 hover:bg-blue-600 hover:text-white">
                                <x-icon :name="$net" class="h-5 w-5" />
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Quick links --}}
            <div class="flex flex-col items-center text-center md:items-start md:text-left">
                <h3 class="font-semibold text-white">Quick links</h3>
                <ul class="mt-4 flex flex-wrap justify-center gap-x-5 gap-y-2 text-sm md:flex-col md:gap-y-2.5">
                    @foreach($links as [$label, $route])
                        <li><a href="{{ route($route) }}" class="text-slate-400 transition hover:text-amber-400">{{ $label }}</a></li>
                    @endforeach
                </ul>
            </div>

            {{-- Contact --}}
            <div class="flex flex-col items-center text-center md:items-start md:text-left">
                <h3 class="font-semibold text-white">Contact</h3>
                <ul class="mt-4 space-y-3 text-sm text-slate-400">
                    @if($address)
                        <li class="flex items-start justify-center gap-3 md:justify-start"><x-icon name="pin" class="mt-0.5 h-5 w-5 shrink-0 text-amber-400" /><span class="max-w-[14rem]">{{ $address }}</span></li>
                    @endif
                    @if($email)
                        <li class="flex items-center justify-center gap-3 md:justify-start"><x-icon name="mail" class="h-5 w-5 shrink-0 text-amber-400" /><a href="mailto:{{ $email }}" class="break-all hover:text-white">{{ $email }}</a></li>
                    @endif
                    @if($phone)
                        <li class="flex items-center justify-center gap-3 md:justify-start">
                            <svg class="h-5 w-5 shrink-0 text-amber-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"/></svg>
                            <a href="tel:{{ preg_replace('/[^\d+]/', '', $phone) }}" class="hover:text-white">{{ $phone }}</a>
                        </li>
                    @endif
                </ul>
            </div>

            {{-- Location map --}}
            <div class="flex flex-col items-center text-center md:items-start md:text-left sm:col-span-2 lg:col-span-1">
                <h3 class="font-semibold text-white">Find us</h3>
                @if($address)
                    <iframe title="University location" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
                            src="https://maps.google.com/maps?q={{ urlencode($address) }}&amp;output=embed"
                            class="mt-4 h-44 w-full max-w-sm rounded-2xl border border-slate-700 opacity-90"></iframe>
                    <a href="https://www.google.com/maps/search/?api=1&amp;query={{ urlencode($address) }}" target="_blank" rel="noopener"
                       class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-amber-400 hover:text-amber-300">
                        <x-icon name="pin" class="h-4 w-4" /> Get directions
                    </a>
                @else
                    <p class="mt-4 text-sm text-slate-500">Add the university address in Site settings to show the map.</p>
                @endif
            </div>
        </div>

        <div class="border-t border-slate-800/80 py-6 text-center text-sm text-slate-500">
            &copy; {{ date('Y') }} {{ $club }}
        </div>
    </div>
</footer>