---
import PrimaryCTA from '@/components/content/PrimaryCTA.astro';
import Container from '@/components/primitives/Container.astro';
import { footerNavigationGroups, getFooterLead, siteMetadata } from '@/lib/site';

interface Props {
    currentPath: string;
}

const { currentPath: _currentPath } = Astro.props;
const currentYear = new Date().getFullYear();
const footerLead = getFooterLead(_currentPath);
---

<footer class="section-divider px-[var(--space-page-x)] pt-10 sm:pt-12" data-footer-intent={footerLead.intent}>
    <Container width="wide">
        <div class="surface-card-muted grid gap-8 rounded-[var(--radius-panel)] p-6 lg:grid-cols-[1.3fr,1fr] lg:p-8">
            <div class="space-y-5">
                <p class="m-0 text-sm font-semibold uppercase tracking-[0.16em] text-[var(--color-brand)]">
                    {footerLead.eyebrow}
                </p>
                <h2 class="m-0 max-w-xl font-[var(--font-display)] text-3xl leading-[0.98] text-[var(--color-ink-900)] sm:text-4xl">
                    {footerLead.title}
                </h2>
                <p class="m-0 max-w-xl text-base leading-7 text-[var(--color-copy)]">
                    {footerLead.description}
                </p>
                <PrimaryCTA cta={footerLead.primaryCta} size="sm" />
            </div>

            <div class="grid gap-6 sm:grid-cols-3">
                {
                    footerNavigationGroups.map((group) => (
                        <div>
                            <p class="m-0 text-sm font-semibold uppercase tracking-[0.14em] text-[var(--color-ink-900)]">
                                {group.title}
                            </p>
                            <ul class="mt-4 space-y-3 p-0 text-sm text-[var(--color-copy)]">
                                {group.items.map((item) => (
                                    <li class="list-none">
                                        <a class="transition hover:text-[var(--color-brand)]" href={item.href}>
                                            {item.label}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    ))
                }
            </div>
        </div>

        <div class="flex flex-col gap-3 py-6 text-sm text-[var(--color-copy)] sm:flex-row sm:items-center sm:justify-between">
            <p class="m-0">© {currentYear} {siteMetadata.siteName}. Public product site v0 foundation.</p>
            <p class="m-0">
                Built as a static Astro track with no platform auth, session, or API coupling.
            </p>
        </div>
    </Container>
</footer>