---
import { Image } from 'astro:assets'
import logo from '../../public/assets/brand/logo.png'
import FaBluesky from '../assets/icon/faBluesky.svg'
---

<nav class="w-full px-0 py-4 lg:py-10 font-jb-mono flex flex-col items-center">
    <div class="w-full bg-zinc-300 h-px"></div>
    <div class="w-full flex flex-col lg:flex-row justify-between items-center py-2 max-w-[80ch]">
        <div class="flex flex-row gap-[0.25ch] lg:gap-[4ch] px-4 my-4 lg:my-0 justify-center items-center">
            <Image src={logo} alt="dummy.cafe" class="h-18 w-auto" loading="eager" />
        </div>
        <div class="flex flex-row gap-[0.25ch] lg:gap-[4ch] px-4 justify-center items-center">
            <a href="/">[ home ]</a>
            <!--<a href="/">[ terms ]</a>-->
        </div>
    </div>
    <div class="w-full bg-zinc-300 h-px"></div>
    <div class="w-full flex flex-col lg:flex-row gap-[0.25ch] lg:gap-[4ch] px-4 justify-end items-center py-2 max-w-[80ch]">
        <a target="_blank" href="https://status.dummy.cafe">[ status ]</a>
        <a target="_blank" href="mailto:hi@dummy.cafe">[ contact ]</a>
        <a target="_blank" href="https://bsky.app/profile/dummy.cafe" class="flex flex-row gap-[1ch] items-center"><span>[</span><FaBluesky class="w-[1em]" aria-hidden="true" /><span> Bluesky ]</span></a>
    </div>
    <div class="w-full bg-zinc-300 h-px"></div>
</nav>