---
import { routes } from '@/config/site';
import { t } from '@/i18n';
import Container from '@/components/ui/Container.astro';
import Logo from '@/components/ui/Logo.astro';
import QrPrompt from '@/components/ui/QrPrompt.astro';
import StoreBadges from '@/components/ui/StoreBadges.astro';

const linkClass = 'font-medium underline underline-offset-4 hover:text-jade';
---

<footer class="mt-8.75 border-t border-ink/20 lg:mt-15">
	<Container class="flex flex-col gap-6.25 pt-7.5 pb-9 lg:pt-15">
		<div class="flex flex-col gap-2.5">
			<a href={routes.home} aria-label={t.nav.home} class="w-fit">
				<Logo />
			</a>
			<p class="max-w-126 text-xl font-light text-muted">{t.footer.tagline}</p>
		</div>

		{/* Same layout on every screen; on narrow ones the QR block wraps under the store badges. */}
		<div class="flex flex-wrap items-center gap-6.25">
			<StoreBadges stacked />
			<QrPrompt class="lg:[&_p]:max-w-none" />
		</div>

		<nav aria-label={t.footer.navLabel} class="pt-1 sm:self-end">
			<ul class="flex gap-6.25">
				<li><a href={routes.privacy} class={linkClass}>{t.footer.privacy}</a></li>
				<li><a href={routes.contact} class={linkClass}>{t.footer.contact}</a></li>
			</ul>
		</nav>
	</Container>
</footer>