---
import RichText from '@/components/content/RichText.astro';
import PageShell from '@/components/layout/PageShell.astro';
import Card from '@/components/primitives/Card.astro';
import Container from '@/components/primitives/Container.astro';
import Grid from '@/components/primitives/Grid.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 { legalHero, legalNoticeSections, legalSeo } from '@/content/pages/legal';
---

<PageShell currentPath="/legal" title={legalSeo.title} description={legalSeo.description}>
    <PageHero
        hero={legalHero}
        calloutTitle="The legal baseline should stay explicit without taking over the route hierarchy."
        calloutDescription="The retained legal hub helps visitors find the privacy, terms, and notice baseline quickly while Trust and Contact remain easier to discover."
    />

    <Section tone="muted" density="base" layer="2">
        <Container width="wide">
            <div class="space-y-8">
                <SectionHeader
                    eyebrow="Available now"
                    title="Keep the legal baseline explicit without promoting it into the main navigation."
                    description="The retained legal hub should work as an index for Trust, Privacy, Terms, and Imprint while staying secondary to the core buyer journey."
                />
                <Grid cols="2">
                    <Card>
                        <h3 class="m-0 text-2xl font-semibold text-[var(--color-ink-900)]">Trust</h3>
                        <p class="mt-3 text-base leading-7 text-[var(--color-copy)]">
                            Review the canonical public trust surface for tenant isolation, access boundaries, and operating discipline.
                        </p>
                        <a class="mt-5 inline-flex text-sm font-semibold text-[var(--color-brand)]" href="/trust">
                            Trust
                        </a>
                    </Card>
                    <Card>
                        <h3 class="m-0 text-2xl font-semibold text-[var(--color-ink-900)]">Privacy</h3>
                        <p class="mt-3 text-base leading-7 text-[var(--color-copy)]">
                            Review how the public contact path handles inquiry information and what this static website does not claim to process.
                        </p>
                        <a class="mt-5 inline-flex text-sm font-semibold text-[var(--color-brand)]" href="/privacy">
                            Privacy
                        </a>
                    </Card>
                    <Card>
                        <h3 class="m-0 text-2xl font-semibold text-[var(--color-ink-900)]">Terms</h3>
                        <p class="mt-3 text-base leading-7 text-[var(--color-copy)]">
                            Read the website terms that explain the public-site scope and why marketing pages do not replace signed agreements.
                        </p>
                        <a class="mt-5 inline-flex text-sm font-semibold text-[var(--color-brand)]" href="/terms">
                            Terms
                        </a>
                    </Card>
                    <Card variant="accent">
                        <h3 class="m-0 text-2xl font-semibold text-[var(--color-ink-900)]">Imprint</h3>
                        <p class="mt-3 text-base leading-7 text-[var(--color-copy)]">
                            Review the canonical notice baseline for publisher identity and jurisdiction-specific disclosure details.
                        </p>
                        <a class="mt-5 inline-flex text-sm font-semibold text-[var(--color-brand)]" href="/imprint">
                            Imprint
                        </a>
                    </Card>
                    <Card>
                        <h3 class="m-0 text-2xl font-semibold text-[var(--color-ink-900)]">Terms</h3>
                        <p class="mt-3 text-base leading-7 text-[var(--color-copy)]">
                            Read the website terms that explain the public-site scope and why marketing pages do not replace signed agreements.
                        </p>
                        <a class="mt-5 inline-flex text-sm font-semibold text-[var(--color-brand)]" href="/terms">
                            Terms
                        </a>
                    </Card>
                </Grid>
            </div>
        </Container>
    </Section>

    <Section density="compact" layer="3">
        <Container width="measure">
            <RichText sections={legalNoticeSections} />
        </Container>
    </Section>

    <CTASection
        eyebrow="Continue"
        title="Return to trust or contact once the legal baseline is clear."
        description="The legal surface should support a qualified conversation, not interrupt it."
        primary={{ href: '/contact', label: 'Return to contact' }}
        secondary={{ href: '/trust', label: 'Review the trust posture', variant: 'secondary' }}
    />
</PageShell>