---
import SecondaryCTA from '@/components/content/SecondaryCTA.astro';
import PrimaryCTA from '@/components/content/PrimaryCTA.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 type { CtaLink } from '@/types/site';

interface Props {
    description: string;
    eyebrow?: string;
    primary: CtaLink;
    secondary?: CtaLink;
    title: string;
}

const { description, eyebrow, primary, secondary, title } = Astro.props;
---

<Section>
    <Container width="wide">
        <Card variant="accent" class="overflow-hidden" data-cta-section>
            <div class="grid gap-6 lg:grid-cols-[1.35fr,0.85fr] lg:items-end">
                <SectionHeader eyebrow={eyebrow} title={title} description={description} />
                <div class="flex flex-col gap-3 sm:flex-row lg:justify-end">
                    <PrimaryCTA cta={primary} />
                    {secondary && <SecondaryCTA cta={secondary} />}
                </div>
            </div>
        </Card>
    </Container>
</Section>
