<template>
	<footer class="bg-gray-900 text-white">
		<!-- Trust Bar -->
		<TrustBar variant="light" />

		<div class="mx-auto xl:container p-6 pt-8 lg:pt-20 lg:py-7">
			<div class="md:flex md:justify-between">
				<div class="mb-12">
					<NuxtLink to="/" class="flex items-center" @click="trackEvent('footer-logo-clicked')">
						<span class="tracking-wide text-3xl font-bebas leading-none"> MUELLERPRINTS.<br />Paperwork </span>
					</NuxtLink>
					<p class="mt-4 text-white">
						Mo - Do 9.00 - 16.00 Uhr<br />
						Fr 9.00 - 14.00 Uhr<br />
						und nach Vereinbarung
					</p>
				</div>
				<div class="grid grid-cols-1 gap-8 lg:gap-6 lg:grid-cols-4">
					<div>
						<!-- Intentionally left empty -->
					</div>
					<div>
						<h2 class="mb-4 text-sm font-semibold uppercase">Kollektion</h2>
						<ul class="text-gray-400 font-medium mb-4">
							<li v-for="item in sortedCovers" :key="item.id" class="mb-2 lg:mb-4">
								<NuxtLink
									:title="item.description ?? item.label"
									:to="`/notebooks/${item.slug}`"
									class="hover:text-white"
									aria-label="Navigation"
									@click="trackEvent('footer-link-clicked', { section: 'kollektion', label: item.label })"
								>
									{{ item.label }}
								</NuxtLink>
							</li>
						</ul>
					</div>
					<div>
						<h2 class="mb-4 text-sm font-semibold uppercase">Über uns</h2>
						<ul class="text-gray-400 font-medium mb-4">
							<li class="mb-2 lg:mb-4">
								<NuxtLink to="/about" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'about', label: 'About' })">About</NuxtLink>
							</li>
							<li class="mb-2 lg:mb-4">
								<NuxtLink to="/oeffnungszeiten" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'about', label: 'Öffnungszeiten' })">Öffnungszeiten</NuxtLink>
							</li>
							<li class="mb-2 lg:mb-4">
								<NuxtLink to="/anfahrt" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'about', label: 'Anfahrt' })">Anfahrt</NuxtLink>
							</li>
							<li class="mb-2 lg:mb-4">
								<NuxtLink to="/kontakt" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'about', label: 'Kontakt' })">Kontakt</NuxtLink>
							</li>
							<li class="mb-2 lg:mb-4">
								<a title="Sitemap" href="/sitemap.xml" target="_blank" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'about', label: 'Sitemap' })">Sitemap</a>
							</li>
						</ul>
					</div>
					<div>
						<h2 class="mb-4 text-sm font-semibold uppercase">Rechtliches</h2>
						<ul class="text-gray-400 font-medium mb-4">
							<li class="mb-2 lg:mb-4">
								<NuxtLink to="/impressum" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'legal', label: 'Impressum' })">Impressum</NuxtLink>
							</li>
							<li class="mb-2 lg:mb-4">
								<NuxtLink to="/datenschutz" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'legal', label: 'Datenschutz' })">Datenschutzerklärung</NuxtLink>
							</li>
							<li class="mb-2 lg:mb-4">
								<NuxtLink to="/agb" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'legal', label: 'AGB' })">Allgemeine Geschäftsbedingungen (AGB)</NuxtLink>
							</li>
							<li class="mb-2 lg:mb-4">
								<NuxtLink to="/zahlung" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'legal', label: 'Zahlung' })">Zahlungsarten</NuxtLink>
							</li>
							<li>
								<NuxtLink to="/versand" class="hover:text-white" @click="trackEvent('footer-link-clicked', { section: 'legal', label: 'Versand' })">Versandarten</NuxtLink>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<hr class="my-6 sm:mx-auto border-gray-700 lg:my-8" />
			<div class="flex flex-col-reverse lg:flex-row items-center justify-between gap-8">
				<span class="text-gray-400">
					© {{ currentYear }} <a href="/" class="hover:text-white">MUELLERPRINTS. PAPERWORK</a> – Alle Rechte vorbehalten
				</span>
				<div class="flex flex-col lg:flex-row mt-4 lg:mt-0 items-start lg:items-center text-gray-400 gap-8">
					<span>Unterstützte Zahlungsanbieter: BAR, VISA, Mastercard und PayPal</span>
					<img class="h-12" src="~/assets/visa-mastercard-paypal.svg" alt="VISA Mastercard PayPal Logos" />
				</div>
			</div>
		</div>
	</footer>
</template>

<script setup lang="ts">
import type { CoverNavItem } from "~/types";

const props = defineProps<{
	covers: CoverNavItem[];
}>();

const currentYear = new Date().getFullYear();

const sortedCovers = computed(() => [...props.covers].sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)));
</script>
