---
import PrimaryCTA from '@/components/content/PrimaryCTA.astro';
import TenantialLogo from '@/components/content/TenantialLogo.astro';
import Container from '@/components/primitives/Container.astro';
import { getHeaderCta, getPrimaryNavigation, isActiveNavigationPath, siteMetadata } from '@/lib/site';

interface Props {
    currentPath: string;
}

const { currentPath } = Astro.props;
const headerCta = getHeaderCta(currentPath);
const primaryNavigation = await getPrimaryNavigation();
---

<header class="relative z-30 px-[var(--space-page-x)] pt-5 sm:pt-7">
    <Container width="wide" class="!max-w-[96rem]">
        <div
            class="flex items-center justify-between gap-4 py-1"
            data-shell-surface="header"
            data-visual-tone="dark"
        >
            <a href="/" class="group flex min-w-0 no-underline" aria-label="Tenantial home">
                <TenantialLogo
                    label={siteMetadata.siteName}
                    imageClass="h-[2.75rem] w-auto sm:h-12"
                />
            </a>

            <nav class="hidden items-center gap-9 lg:flex" aria-label="Primary">
                {
                    primaryNavigation.map((item) => (
                        <a
                            href={item.href}
                            aria-current={isActiveNavigationPath(currentPath, item.href) ? 'page' : undefined}
                            class:list={[
                                'text-sm font-medium transition',
                                isActiveNavigationPath(currentPath, item.href)
                                    ? 'text-[var(--color-foreground)]'
                                    : 'text-[var(--color-stone-200)] hover:text-[var(--color-primary)]',
                            ]}
                            data-nav-link="primary"
                        >
                            {item.label}
                        </a>
                    ))
                }
            </nav>

            <div class="hidden items-center gap-5 lg:flex">
                <span
                    class="text-sm font-medium text-[var(--color-stone-200)]"
                    data-nav-state="deferred"
                    title="Sign in is not available from the public website yet."
                >
                    Sign in
                </span>
                <div data-header-cta>
                    <PrimaryCTA cta={headerCta} size="sm" />
                </div>
            </div>

            <details class="relative lg:hidden" data-mobile-nav>
                <summary
                    aria-label="Open navigation menu"
                    class="flex h-11 w-11 cursor-pointer list-none items-center justify-center rounded-full border border-[color:var(--color-line)] bg-[rgba(255,247,225,0.06)] text-[var(--color-foreground)]"
                    data-mobile-nav-trigger
                >
                    <span class="sr-only">Open navigation menu</span>
                    <span class="flex flex-col gap-1">
                        <span class="block h-0.5 w-4 bg-current"></span>
                        <span class="block h-0.5 w-4 bg-current"></span>
                        <span class="block h-0.5 w-4 bg-current"></span>
                    </span>
                </summary>
                <div
                    class="glass-panel absolute right-0 top-[calc(100%+0.75rem)] w-[min(18rem,88vw)] rounded-[1.5rem] border border-white/80 p-3"
                >
                    <nav class="flex flex-col gap-1" aria-label="Mobile primary">
                        {
                            primaryNavigation.map((item) => (
                                <a
                                    href={item.href}
                                    aria-current={isActiveNavigationPath(currentPath, item.href) ? 'page' : undefined}
                                    class:list={[
                                        'rounded-[1rem] px-4 py-3 text-sm',
                                        isActiveNavigationPath(currentPath, item.href)
                                            ? 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)]'
                                            : 'text-[var(--color-muted-foreground)] hover:bg-[var(--surface-muted)] hover:text-[var(--color-foreground)]',
                                    ]}
                                    data-nav-link="mobile-primary"
                                >
                                    <span class="block font-semibold">{item.label}</span>
                                    {item.description && (
                                        <span class="mt-1 block text-xs text-[var(--color-copy)]">
                                            {item.description}
                                        </span>
                                    )}
                                </a>
                            ))
                        }
                        <span
                            class="rounded-[1rem] px-4 py-3 text-sm font-medium text-[var(--color-muted-foreground)] opacity-75"
                            data-nav-state="deferred"
                        >
                            Sign in
                        </span>
                        <div class="mt-2 rounded-[1rem] bg-[var(--surface-accent)] p-3" data-header-cta>
                            <PrimaryCTA cta={headerCta} size="sm" showHelper />
                        </div>
                    </nav>
                </div>
            </details>
        </div>
    </Container>
</header>