---
import Card from '@/components/primitives/Card.astro';
import Container from '@/components/primitives/Container.astro';
import Grid from '@/components/primitives/Grid.astro';
import Headline from '@/components/content/Headline.astro';
import Lead from '@/components/content/Lead.astro';
import Section from '@/components/primitives/Section.astro';
import SectionHeader from '@/components/primitives/SectionHeader.astro';
import type { OutcomeSectionContent } from '@/types/site';

interface Props {
    content: OutcomeSectionContent;
}

const { content } = Astro.props;
---

<Section layer="2" data-section="outcome">
    <Container width="wide">
        <div class="space-y-8">
            <SectionHeader
                eyebrow="Why it matters"
                title={content.title}
                description={content.description}
            />
            <Grid cols="3">
                {content.outcomes.map((outcome) => (
                    <Card class="h-full">
                        <Headline as="h3" size="card">
                            {outcome.title}
                        </Headline>
                        <Lead class="mt-3" size="body">
                            {outcome.description}
                        </Lead>
                    </Card>
                ))}
            </Grid>
        </div>
    </Container>
</Section>