---
import SecondaryCTA from '@/components/content/SecondaryCTA.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="sticky top-0 z-30 px-[var(--space-page-x)] pt-4 sm:pt-6">
    <Container width="wide">
        <div
            class="shell-panel flex items-center justify-between gap-4 rounded-[var(--radius-panel)] px-4 py-3 sm:px-5"
            data-shell-surface="header"
        >
            <a href="/" class="flex min-w-0 items-center gap-3 no-underline">
                <span
                    class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--color-primary),#8eaed1)] font-[var(--font-display)] text-lg text-white shadow-[var(--shadow-inline)]"
                >
                    TA
                </span>
                <span class="min-w-0">
                    <span class="block truncate text-sm font-semibold uppercase tracking-[0.16em] text-[var(--color-ink-900)]">
                        {siteMetadata.siteName}
                    </span>
                    <span class="block truncate text-sm text-[var(--color-copy)]">
                        {siteMetadata.siteTagline}
                    </span>
                </span>
            </a>

            <nav class="hidden items-center gap-1 lg:flex" aria-label="Primary">
                {
                    primaryNavigation.map((item) => (
                        <a
                            href={item.href}
                            aria-current={isActiveNavigationPath(currentPath, item.href) ? 'page' : undefined}
                            class:list={[
                                'rounded-full px-4 py-2 text-sm font-medium transition',
                                isActiveNavigationPath(currentPath, item.href)
                                    ? 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)]'
                                    : 'text-[var(--color-ink-800)] hover:bg-white/70',
                            ]}
                            data-nav-link="primary"
                        >
                            {item.label}
                        </a>
                    ))
                }
            </nav>

            <div class="hidden lg:block">
                <SecondaryCTA cta={headerCta} size="sm" />
            </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-white/85 text-[var(--color-ink-900)]"
                    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-ink-800)] hover:bg-white/75',
                                    ]}
                                    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>
                            ))
                        }
                        <div class="mt-2 rounded-[1rem] bg-[rgba(47,111,183,0.08)] p-3">
                            <SecondaryCTA cta={headerCta} size="sm" showHelper />
                        </div>
                    </nav>
                </div>
            </details>
        </div>
    </Container>
</header>