---
import BarsIcon from '@/assets/icons/bars.svg';
import CloseIcon from '@/assets/icons/close.svg';
import { getNavItems, routes } from '@/config/site';
import { t } from '@/i18n';
import Button from '@/components/ui/Button.astro';
import Container from '@/components/ui/Container.astro';
import Logo from '@/components/ui/Logo.astro';
import StoreBadges from '@/components/ui/StoreBadges.astro';

const currentPath = Astro.url.pathname;
const navItems = getNavItems(currentPath);
---

<Button
	size="sm"
	iconOnly
	data-disclosure
	aria-expanded="false"
	aria-controls="mobile-menu"
	aria-label={t.nav.openMenu}
	class="lg:hidden"
>
	<BarsIcon class="size-6" aria-hidden="true" />
</Button>

{/* Absolute, not fixed: the header's backdrop filter would trap a fixed panel. The sticky
    header always sits at the top of the viewport, so this still covers the screen. */}
<div id="mobile-menu" data-disclosure-panel hidden class="absolute inset-x-0 top-0 flex h-dvh flex-col bg-white lg:hidden">
	<Container class="shrink-0">
		<div class="flex h-22.5 items-center justify-between border-b border-ink/20">
			<a href={routes.home} aria-label={t.nav.home}>
				<Logo />
			</a>
			<button
				type="button"
				data-disclosure-close
				data-disclosure-autofocus
				aria-label={t.nav.closeMenu}
				class="flex size-10 cursor-pointer items-center justify-center rounded-button border border-ink/30 transition-colors hover:bg-ink/5"
			>
				<CloseIcon class="size-6" aria-hidden="true" />
			</button>
		</div>
	</Container>

	<Container class="flex-1 overflow-y-auto">
		<nav aria-label={t.nav.main}>
			<ul class="flex flex-col divide-y divide-ink/20 pt-3.75 pb-6.25">
				{
					navItems.map(({ key, href }) => (
						<li>
							<a
								href={href}
								aria-current={href === currentPath ? 'page' : undefined}
								class="block py-7.5 text-[2rem] font-semibold transition-colors hover:text-jade aria-[current=page]:text-jade"
							>
								{t.nav.items[key]}
							</a>
						</li>
					))
				}
			</ul>
		</nav>
	</Container>

	<Container class="shrink-0 pb-6.25">
		<StoreBadges />
	</Container>
</div>

<style is:global>
	/* No page scrolling behind the open menu. */
	@media (width < 64rem) {
		html:has(#mobile-menu:not([hidden])) {
			overflow: hidden;
		}
	}
</style>

<script>
	import '@/scripts/disclosure';
</script>