---
interface Props {
    tangled: string;
}

const { tangled } = Astro.props;

const links = [
    { href: "#privacy", label: "Privacy" },
    { href: "#faq", label: "FAQ" },
    { href: tangled, label: "Source", external: true },
] as const;
---

<header class="site-header">
    <div class="wrap">
        <div class="site-header__inner">
            <a class="brand-lockup" href="/">
                <img
                    class="brand-lockup__mark"
                    src="/images/summarizer-logo.svg"
                    width="32"
                    height="32"
                    alt=""
                    decoding="async"
                />
                <span>Lede</span>
            </a>
            <div class="site-header__actions">
                <nav aria-label="Page">
                    <ul class="nav">
                        {
                            links.map((link) => (
                                <li>
                                    <a
                                        href={link.href}
                                        {...(link.external
                                            ? {
                                                  target: "_blank",
                                                  rel: "noopener noreferrer",
                                              }
                                            : {})}
                                    >
                                        {link.label}
                                    </a>
                                </li>
                            ))
                        }
                    </ul>
                </nav>
                <a class="btn btn--primary btn--sm nav-install" href="#install"
                    >Install beta</a
                >
            </div>
        </div>
    </div>
</header>

<script is:inline>
    (function () {
        var header = document.querySelector(".site-header");
        if (!header) return;
        /* Hysteresis: avoids borderline flicker when scroll sits near the threshold */
        var enter = 36;
        var exit = 12;
        var floated = false;
        var cls = "site-header--scrolled";
        var rootCls = "site-nav-floated";
        var root = document.documentElement;
        var raf = 0;
        function sync() {
            var y = window.scrollY || document.documentElement.scrollTop;
            var next = floated;
            if (!floated && y > enter) next = true;
            else if (floated && y < exit) next = false;
            if (next === floated) return;
            floated = next;
            header.classList.toggle(cls, floated);
            root.classList.toggle(rootCls, floated);
        }
        function onScroll() {
            if (raf) return;
            raf = requestAnimationFrame(function () {
                raf = 0;
                sync();
            });
        }
        sync();
        window.addEventListener("scroll", onScroll, { passive: true });
    })();
</script>