---
import { siteConfig } from "../config/site";
import Icon from "./Icon.astro";
import { Image } from "astro:assets";
---

<header
    class="sticky top-0 z-50 backdrop-blur-lg bg-base-100/80 border-b border-base-200"
    role="banner"
>
    <div class="navbar max-w-7xl mx-auto px-4 lg:px-6">
        <div class="navbar-start">
            <div class="dropdown">
                <div
                    tabindex="0"
                    role="button"
                    class="btn btn-ghost btn-circle lg:hidden"
                    aria-label="Open menu"
                >
                    <Icon name="bars-3-bottom-left" class="h-5 w-5" />
                </div>
                <ul
                    tabindex="0"
                    class="menu menu-sm dropdown-content bg-base-100 rounded-xl z-50 mt-3 w-56 p-3 shadow-xl border border-base-200"
                    aria-label="Navigation Button"
                >
                    {
                        siteConfig.header.nav.map(({ text, href }) => (
                            <li>
                                <a
                                    href={href}
                                    class="py-3 px-4 rounded-lg font-medium hover:bg-primary/10 hover:text-primary transition-colors"
                                >
                                    {text}
                                </a>
                            </li>
                        ))
                    }
                </ul>
            </div>
            <a
                href={siteConfig.header.logo.href}
                class="btn btn-ghost text-xl font-bold tracking-tight hover:bg-transparent hover:text-primary transition-colors gap-2"
                aria-label="Home"
            >
                <Image
                    src="/logo.svg"
                    alt=""
                    width="32"
                    height="32"
                    class="h-8 w-8"
                    aria-hidden="true"
                />
                <span class="hidden sm:inline"
                    >{siteConfig.header.logo.text}</span
                >
                <span class="sm:hidden">{siteConfig.header.mobileLogoText}</span
                >
            </a>
        </div>
        <nav class="navbar-center hidden lg:flex" aria-label="Main navigation">
            <ul class="menu menu-horizontal gap-1">
                {
                    siteConfig.header.nav.map(({ text, href }) => (
                        <li>
                            <a
                                href={href}
                                class="font-medium px-4 py-2 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors"
                            >
                                {text}
                            </a>
                        </li>
                    ))
                }
            </ul>
        </nav>
        <div class="navbar-end">
            <a
                href={siteConfig.header.cta.href}
                class="btn btn-primary btn-sm lg:btn-md shadow-md hover:shadow-lg transition-all"
                aria-label={siteConfig.header.cta.text}
            >
                {siteConfig.header.cta.text}
            </a>
        </div>
    </div>
</header>