---
import { House, Image, Phone, Table2 } from '@lucide/astro'
---

<header style="animation: wsun 0.1s ease-in-out" class="
    flex flex-row justify-between z-20
    mb-3 py-0.5 px-3 rounded-md h-14
    bg-slate-100 drop-shadow-slate-300 drop-shadow-md
">
    <a class="
        flex flex-col
        my-auto
        hover:text-shadow-sm text-shadow-slate-50
        hover:scale-110
        not-motion-reduce:transition-all
    " href="/">
        <h1 class="font-serif text-xl">Jakiś fotograf</h1>
        <h5 class="text-xs font-light ml-0.5">Zdjęcia na zamówienie</h5>
    </a>
    <nav class="
        flex flex-row gap-3.5 mt-auto mb-0 font-light font-xs text-center
    ">
        <a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/">
            <House class="mx-auto" stroke-width={1} />
            Strona główna
        </a>
        <a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/uslugi">
            <Table2 class="mx-auto" stroke-width={1} />
            Uslugi
        </a>
        <a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/portfolio">
            <Image class="mx-auto" stroke-width={1} />
            Portfolio
        </a>
        <a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1 mr-1" href="/kontakt">
            <Phone class="mx-auto" stroke-width={1} />
            Kontakt
        </a>
    </nav>
</header>