---
import Button from '@/components/primitives/Button.astro';
import Card from '@/components/primitives/Card.astro';
import Eyebrow from '@/components/content/Eyebrow.astro';
import Headline from '@/components/content/Headline.astro';
import type { CtaLink } from '@/types/site';

interface Props {
    cta: CtaLink;
    points: string[];
    title: string;
}

const { cta, points, title } = Astro.props;
---

<Card variant="accent">
    <Eyebrow>Qualified outreach</Eyebrow>
    <Headline as="h3" size="card" class="mt-4 text-3xl">
        {title}
    </Headline>
    <ul class="mt-5 space-y-3 p-0">
        {
            points.map((point) => (
                <li class="list-none rounded-[1rem] bg-white/72 px-4 py-3 text-sm text-[var(--color-ink-800)]">
                    {point}
                </li>
            ))
        }
    </ul>
    <div class="mt-6">
        <Button href={cta.href} variant={cta.variant ?? 'primary'}>{cta.label}</Button>
    </div>
</Card>