---
import { getCollection } from 'astro:content';

import PageShell from '@/components/layout/PageShell.astro';
import Card from '@/components/primitives/Card.astro';
import Container from '@/components/primitives/Container.astro';
import Section from '@/components/primitives/Section.astro';
import SectionHeader from '@/components/primitives/SectionHeader.astro';
import CTASection from '@/components/sections/CTASection.astro';
import PageHero from '@/components/sections/PageHero.astro';
import { changelogHero, changelogSeo } from '@/content/pages/changelog';

const formatter = new Intl.DateTimeFormat('en', { dateStyle: 'long' });
const entries = (await getCollection('changelog'))
    .filter((entry) => entry.data.draft !== true)
    .sort((left, right) => right.data.publishedAt.valueOf() - left.data.publishedAt.valueOf());
---

<PageShell currentPath="/changelog" title={changelogSeo.title} description={changelogSeo.description}>
    <PageHero
        hero={changelogHero}
        calloutTitle="Visible progress should be dated and concrete."
        calloutDescription="The changelog exists so returning visitors can verify product motion without mistaking placeholder resources or editorial ambitions for current release truth."
    />

    <Section tone="muted" density="base" layer="2">
        <Container width="wide">
            <div class="space-y-8">
                <SectionHeader
                    eyebrow="Published updates"
                    title="Dated updates, not vague momentum signals."
                    description="Each entry should explain what changed in a concrete way and connect back to product understanding, trust, or the contact path."
                />

                <div class="grid gap-6">
                    {entries.map((entry) => (
                        <Card as="article" class="space-y-4">
                            <p class="m-0 text-sm font-semibold uppercase tracking-[0.14em] text-[var(--color-brand)]">
                                {formatter.format(entry.data.publishedAt)}
                            </p>
                            <h2 class="m-0 font-[var(--font-display)] text-3xl text-[var(--color-ink-900)]">
                                {entry.data.title}
                            </h2>
                            <p class="m-0 max-w-3xl text-base leading-7 text-[var(--color-copy)]">
                                {entry.data.description}
                            </p>
                        </Card>
                    ))}
                </div>
            </div>
        </Container>
    </Section>

    <CTASection
        eyebrow="Next step"
        title="Use visible progress to start a more concrete evaluation conversation."
        description="Once the route model and recent progress are clear, the next move should stay obvious: inspect the product model again or start the contact path."
        primary={{ href: '/contact', label: 'Start the working session' }}
        secondary={{ href: '/product', label: 'See the product model', variant: 'secondary' }}
    />
</PageShell>