---
import Badge from '@/components/primitives/Badge.astro';
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 { CapabilityClusterContent } from '@/types/site';

interface Props {
    description?: string;
    eyebrow?: string;
    items: CapabilityClusterContent[];
    title: string;
    titleHtml?: string;
}

const { description, eyebrow, items, title, titleHtml } = Astro.props;
---

<Section layer="2" tone="tinted" data-section="capability">
    <Container width="wide">
        <div class="space-y-8">
            <SectionHeader eyebrow={eyebrow} title={title} titleHtml={titleHtml} description={description} />
            <Grid cols="2" gap="lg">
                {items.map((cluster) => (
                    <Card class="h-full" hoverable>
                        <div class="space-y-4">
                            <div class="flex items-start justify-between gap-3">
                                <Headline as="h3" size="card">
                                    {cluster.title}
                                </Headline>
                                {cluster.meta && (
                                    <Badge tone="signal">{cluster.meta}</Badge>
                                )}
                            </div>
                            <Lead size="body">
                                {cluster.description}
                            </Lead>
                            <ul class="flex flex-wrap gap-2 p-0">
                                {cluster.capabilities.map((cap) => (
                                    <li class="list-none rounded-full border border-[color:var(--color-line)] bg-white/60 px-3 py-1.5 text-sm text-[var(--color-ink-800)]">
                                        {cap}
                                    </li>
                                ))}
                            </ul>
                            {cluster.href && (
                                <a class="text-link mt-2 inline-block text-sm font-semibold" href={cluster.href}>
                                    Learn more →
                                </a>
                            )}
                        </div>
                    </Card>
                ))}
            </Grid>
        </div>
    </Container>
</Section>