<script lang="ts">
    import { onMount } from "svelte"
    import { spaLink } from "../../actions"
    import { location } from "../../store"
    import { headerLinks } from "../../../config"
    import type { HeaderLink } from "../../../config"

    let scrolled: boolean = $state(false)

    const links: HeaderLink[] = headerLinks

    function checkScroll() {
        scrolled = window.scrollY >= 100
    }

    onMount(() => {
        if (typeof window !== "undefined") {
            checkScroll()
            window.addEventListener("scroll", checkScroll)
            return () => {
                window.removeEventListener("scroll", checkScroll)
            }
        }
    })

    $effect(() => {
        checkScroll()
    })
    let isHomepage = $derived($location?.path === "/")
    let darkBG = $derived(scrolled || !isHomepage)

    const resolveHref = (link: HeaderLink) => ("sectionId" in link ? `/#${link.sectionId}` : link.href)
</script>

<header
    class="headercontainer"
    id={"header-container"}
    class:scrolled={darkBG}
    class:homepageHeader={isHomepage}
    role="dialog"
    aria-label="Hauptnavigation"
>
    <div class="padding">
        <nav class="menu">
            <a
                href="/"
                use:spaLink
                class="logo-container"
                aria-label="Go to homepage"
            >
                <img
                    src="../../../../logo/KontextWerk.svg"
                    alt="logo"
                />
            </a>
            <ul class="nav-links">
                {#each links as link}
                    <li>
                        <a
                            href={resolveHref(link)}
                            use:spaLink
                            class="nav-link"
                            class:nav-link-button={link.type === "button"}
                        >
                            {link.label}
                        </a>
                    </li>
                {/each}
            </ul>
        </nav>
    </div>
</header>

<style lang="less">
    @import "../../assets/css/variables.less";

    @desktop: ~"only screen and (min-width: 1440px)";

    .headercontainer {
        display: flex;
        flex-direction: column;
        @media @mobile {
            overflow: hidden;
        }
        position: sticky;
        z-index: 5500;
        top: 0px;

        justify-content: space-between;
        background-color: #0d0c0c;

        align-items: center;
        width: 100%;
        .padding {
            width: 100%;
            padding: 0px var(--horizontal-default-margin);
            height: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            .menu {
                max-width: var(--normal-max-width);
                width: 100%;
                display: flex;
                height: 86px;
                align-items: center;
                justify-content: space-between;
                .logo-container {
                    height: 64px;
                    display: flex;
                    align-items: flex-start;
                    img {
                        height: 60px;
                        width: auto;
                        object-fit: contain;
                    }
                }
                .nav-links {
                    display: flex;
                    align-items: center;
                    gap: 1.5rem;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    li {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .nav-link {
                        color: var(--text-100);
                        text-decoration: none;
                        font-weight: 500;
                        font-size: 0.95rem;
                        transition:
                            color 0.2s ease,
                            background-color 0.2s ease,
                            border-color 0.2s ease;
                        padding: 0.5rem 0;
                        position: relative;

                        &:focus-visible {
                            outline: 2px solid var(--primary-200);
                            outline-offset: 3px;
                        }

                        &:after {
                            content: "";
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            width: 100%;
                            height: 2px;
                            background: currentColor;
                            transform: scaleX(0);
                            transform-origin: left;
                            transition: transform 0.2s ease;
                        }

                        &:hover,
                        &:focus-visible {
                            color: var(--primary-200);

                            &:after {
                                transform: scaleX(1);
                            }
                        }
                    }

                    .nav-link-button {
                        border: 1px solid var(--primary-200);
                        border-radius: 4px;
                        padding: 0.45rem 1.4rem;
                        font-weight: 600;
                        color: var(--neutral-white);
                        background: linear-gradient(135deg, var(--primary-200), var(--primary-100));
                        box-shadow: 0 0 12px rgba(116, 30, 32, 0.45);

                        &:after {
                            display: none;
                        }
                        transition:
                            background 0.3s ease,
                            color 0.3s ease;
                        &:hover,
                        &:focus-visible {
                            color: var(--neutral-white);
                            background: linear-gradient(135deg, var(--primary-100), #ff5252);
                        }
                    }
                }
            }
        }
        &.homepageHeader {
            background-color: transparent;
        }
        &.scrolled&.homepageHeader {
            box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
            background-color: var(--bg-100);
        }
    }

    @media @mobile {
        .headercontainer {
            .padding {
                .menu {
                    flex-direction: column;
                    height: auto;
                    padding: 0.8rem 0;
                    gap: 0.8rem;
                    .logo-container {
                        height: 48px;
                        img {
                            height: 44px;
                        }
                    }
                    .nav-links {
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: 0.8rem 1.2rem;
                        .nav-link {
                            padding: 0.4rem 0;
                            font-size: 0.9rem;
                        }
                        .nav-link-button {
                            padding: 0.4rem 1rem;
                        }
                    }
                }
            }
        }
    }
</style>
