---
import ContactPanel from '@/components/content/ContactPanel.astro';
import DemoPrompt from '@/components/content/DemoPrompt.astro';
import RichText from '@/components/content/RichText.astro';
import PageShell from '@/components/layout/PageShell.astro';
import Card from '@/components/primitives/Card.astro';
import Cluster from '@/components/primitives/Cluster.astro';
import Container from '@/components/primitives/Container.astro';
import Grid from '@/components/primitives/Grid.astro';
import Input from '@/components/primitives/Input.astro';
import Section from '@/components/primitives/Section.astro';
import SectionHeader from '@/components/primitives/SectionHeader.astro';
import Textarea from '@/components/primitives/Textarea.astro';
import CTASection from '@/components/sections/CTASection.astro';
import PageHero from '@/components/sections/PageHero.astro';
import {
    contactHero,
    contactLegalSections,
    contactPreview,
    contactPrompts,
    contactSeo,
    contactTopics,
} from '@/content/pages/contact';
---

<PageShell currentPath="/contact" title={contactSeo.title} description={contactSeo.description}>
    <PageHero
        hero={contactHero}
        calloutTitle="Qualified conversations beat anonymous form funnels."
        calloutDescription="The page should make it obvious who should reach out, why, and what a useful first exchange looks like."
    />

    <Section>
        <Container wide>
            <Grid cols="3">
                <ContactPanel cta={contactHero.primaryCta} points={contactTopics} title="Who should get in touch" />
                {contactPrompts.map((prompt) => <DemoPrompt title={prompt.title} description={prompt.description} />)}
            </Grid>
        </Container>
    </Section>

    <Section>
        <Container wide>
            <div class="grid gap-6 lg:grid-cols-[1fr,0.8fr]">
                <Card>
                    <SectionHeader
                        eyebrow="Suggested note"
                        title="Give the team enough context to make the first reply useful."
                        description="The public path stays static in v0, but it can still help a serious buyer structure the first message."
                    />
                    <div class="mt-6 space-y-4">
                        <Input readonly value={contactPreview.topic} />
                        <Textarea readonly rows={7} value={contactPreview.message} />
                    </div>
                </Card>

                <Card variant="accent">
                    <SectionHeader
                        eyebrow="Before you share details"
                        title="Legal basics stay visible from the contact flow."
                        description="Visitors should be able to inspect privacy and terms before they continue."
                    />
                    <Cluster class="mt-6">
                        <a
                            href="/privacy"
                            class="inline-flex min-h-11 items-center justify-center rounded-full border border-[color:var(--color-line)] bg-white/85 px-5 text-sm font-semibold text-[var(--color-ink-900)]"
                        >
                            Privacy
                        </a>
                        <a
                            href="/terms"
                            class="inline-flex min-h-11 items-center justify-center rounded-full border border-[color:var(--color-line)] bg-white/85 px-5 text-sm font-semibold text-[var(--color-ink-900)]"
                        >
                            Terms
                        </a>
                        <a
                            href="/legal"
                            class="inline-flex min-h-11 items-center justify-center rounded-full border border-[color:var(--color-line)] bg-white/85 px-5 text-sm font-semibold text-[var(--color-ink-900)]"
                        >
                            Legal
                        </a>
                    </Cluster>
                    <div class="mt-6">
                        <RichText sections={contactLegalSections} />
                    </div>
                </Card>
            </div>
        </Container>
    </Section>

    <CTASection
        eyebrow="Next step"
        title="Move from a public introduction into the legal and product details that support a real evaluation."
        description="The contact route should never strand a serious buyer. The next path stays visible whether they need product context, privacy details, or website terms."
        primary={{ href: '/legal', label: 'Read the legal surface' }}
        secondary={{ href: '/product', label: 'Revisit the product model', variant: 'secondary' }}
    />
</PageShell>