---
import path from "../utils/path.ts"
import {Users, List, Info} from "@lucide/astro"
---

<div class="navbar bg-base-100 shadow-sm z-30 sticky top-0 left-0 w-screen">
  <div class="navbar-start w-fit max-h-14">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost sm:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/>
        </svg>
      </div>
      <ul
          tabindex="-1"
          class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-4 gap-4 shadow-xl border">
        <li><a class="text-xl" href={path(import.meta.env.BASE_URL, "/")}>
          <Info/>
          Wann & Wo
        </a></li>
        <li><a class="text-xl" href={path(import.meta.env.BASE_URL, "/hamburg/2026/programm/")}>
          <List/>
          Programm
        </a></li>
        <li><a class="text-xl" href={path(import.meta.env.BASE_URL, "/hamburg/2026/wer/")}>
          <Users/>
          Wer
        </a></li>
      </ul>
    </div>
    <a class="btn btn-link text-xl max-h-14" href={path(import.meta.env.BASE_URL, "/")}>
      <picture class="h-full">
        <img src={path(import.meta.env.BASE_URL, "/logo.svg")} alt="Logo von den DiDays 2026 in Hamburg"
             class="h-full"/>
      </picture>
    </a>
  </div>
  <div class="navbar-center hidden sm:flex">
    <ul class="menu menu-horizontal px-1 gap-2">
      <li><a href={path(import.meta.env.BASE_URL, "/")}>
        <Info/>
        Wann & Wo
      </a></li>
      <li><a href={path(import.meta.env.BASE_URL, "/hamburg/2026/programm/")}>
        <List/>
        Programm
      </a></li>
      <li><a href={path(import.meta.env.BASE_URL, "/hamburg/2026/wer/")}>
        <Users/>
        Wer
      </a></li>
    </ul>
  </div>
</div>