@php
    $schools = \App\Models\School::active()->ordered()->get(['name', 'slug']);
@endphp

<footer class="mt-24 bg-brand-900 text-slate-300">
    <div class="container-page py-14">
        <div class="grid gap-10 md:grid-cols-2 lg:grid-cols-4">

            <div>
                <img src="{{ asset('images/kcu-logo.png') }}"
                     alt="{{ setting('university_name') }}"
                     class="mb-5 h-12 w-auto brightness-0 invert"
                     width="900" height="338">

                <p class="text-sm leading-relaxed text-slate-400">
                    {{ setting('university_accreditation') }}
                </p>

                <p class="mt-4 font-display text-lg text-gold-300">
                    {{ setting('university_motto') }}
                    <span class="ml-1 font-sans text-xs uppercase tracking-wider text-slate-500">
                        {{ setting('university_motto_meaning') }}
                    </span>
                </p>

                <div class="mt-5 flex gap-2">
                    @foreach ([
                        'social_facebook' => ['Facebook', 'M13.5 9H16l.5-3h-3V4.2c0-.8.2-1.3 1.4-1.3H16.6V.1C16.3.1 15.3 0 14.2 0 11.8 0 10.2 1.4 10.2 4v2H7.7v3h2.5v8h3.3V9Z'],
                        'social_twitter' => ['X', 'M13.8 1h2.4l-5.2 6 6.2 8.2h-4.9l-3.8-5-4.4 5H1.7l5.6-6.4L1.4 1h5l3.5 4.6L13.8 1Zm-.9 13.7h1.4L5.3 2.4H3.8l9.1 12.3Z'],
                        'social_linkedin' => ['LinkedIn', 'M4.4 17H1.1V6.6h3.3V17ZM2.7 5.2A1.9 1.9 0 1 1 2.8 1.4a1.9 1.9 0 0 1 0 3.8ZM17 17h-3.3v-5c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7V17H6.7V6.6h3.2V8h.1a3.5 3.5 0 0 1 3.1-1.7c3.4 0 4 2.2 4 5V17Z'],
                        'social_youtube' => ['YouTube', 'M18.6 5.2a2.3 2.3 0 0 0-1.6-1.6C15.5 3.2 9.5 3.2 9.5 3.2s-6 0-7.5.4A2.3 2.3 0 0 0 .4 5.2C0 6.7 0 9.8 0 9.8s0 3.1.4 4.6a2.3 2.3 0 0 0 1.6 1.6c1.5.4 7.5.4 7.5.4s6 0 7.5-.4a2.3 2.3 0 0 0 1.6-1.6c.4-1.5.4-4.6.4-4.6s0-3.1-.4-4.6ZM7.6 12.7V6.9l5 2.9-5 2.9Z'],
                    ] as $key => [$name, $path])
                        @if (setting($key))
                            <a href="{{ setting($key) }}"
                               target="_blank"
                               rel="noopener noreferrer"
                               class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/5 text-slate-400 transition hover:bg-gold-300 hover:text-brand-900"
                               aria-label="{{ $name }}">
                                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="{{ $path }}"/></svg>
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>

            <div>
                <h2 class="mb-4 text-sm font-semibold uppercase tracking-wider text-white">Schools</h2>
                <ul class="space-y-2.5 text-sm">
                    @foreach ($schools as $school)
                        <li>
                            <a href="{{ route('schools.show', $school) }}" class="text-slate-400 transition hover:text-gold-300">
                                {{ $school->name }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

            <div>
                <h2 class="mb-4 text-sm font-semibold uppercase tracking-wider text-white">Admissions</h2>
                <ul class="space-y-2.5 text-sm">
                    <li><a href="{{ route('admissions') }}" class="text-slate-400 transition hover:text-gold-300">How to Apply</a></li>
                    <li><a href="{{ route('admissions.requirements') }}" class="text-slate-400 transition hover:text-gold-300">Entry Requirements</a></li>
                    <li><a href="{{ route('programmes.index') }}" class="text-slate-400 transition hover:text-gold-300">Programme Catalogue</a></li>
                    <li><a href="{{ route('apply') }}" class="text-slate-400 transition hover:text-gold-300">Start an Application</a></li>
                    <li><a href="{{ route('login') }}" class="text-slate-400 transition hover:text-gold-300">Applicant Portal</a></li>
                    <li><a href="{{ route('faqs') }}" class="text-slate-400 transition hover:text-gold-300">Frequently Asked Questions</a></li>
                </ul>
            </div>

            <div>
                <h2 class="mb-4 text-sm font-semibold uppercase tracking-wider text-white">Contact</h2>
                <address class="space-y-3 text-sm not-italic text-slate-400">
                    <p>
                        {{ setting('university_address') }}<br>
                        {{ setting('university_city') }}, {{ setting('university_country') }}
                    </p>
                    <p>
                        <a href="tel:{{ preg_replace('/\s+/', '', setting('university_phone')) }}" class="transition hover:text-gold-300">{{ setting('university_phone') }}</a><br>
                        <a href="tel:{{ preg_replace('/\s+/', '', setting('university_phone_alt')) }}" class="transition hover:text-gold-300">{{ setting('university_phone_alt') }}</a>
                    </p>
                    <p>
                        <a href="mailto:{{ setting('university_email') }}" class="transition hover:text-gold-300">{{ setting('university_email') }}</a><br>
                        <a href="mailto:{{ setting('university_admissions_email') }}" class="transition hover:text-gold-300">{{ setting('university_admissions_email') }}</a>
                    </p>
                </address>
            </div>
        </div>
    </div>

    <div class="border-t border-white/10">
        <div class="container-page flex flex-col items-center justify-between gap-3 py-5 text-xs text-slate-500 sm:flex-row">
            <p>&copy; {{ date('Y') }} {{ setting('university_name') }}. All rights reserved.</p>
            <p>Established {{ setting('university_established') }} &middot; {{ setting('university_tagline') }}</p>
        </div>
    </div>
</footer>
