---
import { Icon } from 'astro-icon/components';
import Container from '@/components/primitives/Container.astro';
import Section from '@/components/primitives/Section.astro';
import SectionHeader from '@/components/primitives/SectionHeader.astro';
import type { FeatureItemContent } from '@/types/site';

interface Props {
    items: FeatureItemContent[];
}

const { items } = Astro.props;

const lucideMap: Record<string, string> = {
    archive: 'lucide:archive',
    refresh: 'lucide:refresh-cw',
    'git-branch': 'lucide:git-branch',
    'file-check': 'lucide:file-check',
    clipboard: 'lucide:clipboard-list',
    shield: 'lucide:shield-check',
};
---

<Section data-section="feature-pillars">
    <Container width="wide">
        <div class="grid gap-8 lg:grid-cols-[0.78fr_1.22fr] lg:items-start">
            <SectionHeader
                eyebrow="Tenantial capabilities"
                title="The operating loop buyers need to verify."
                description="Each pillar stays tied to evidence, safety, and review context instead of unsupported proof claims."
            />

            <div class="grid gap-4 sm:grid-cols-2">
                {
                    items.map((item) => {
                        const iconName = item.icon ? lucideMap[item.icon] : undefined;

                        return (
                            <article
                                class="rounded-[var(--radius-lg)] border border-[color:var(--color-border)] bg-[var(--color-card)] p-5 shadow-[var(--shadow-soft)]"
                                data-surface="tenantial-pillar"
                            >
                                <div class="flex items-start gap-4">
                                    {iconName && (
                                        <div class="feature-icon" aria-hidden="true">
                                            <Icon name={iconName} size={20} />
                                        </div>
                                    )}
                                    <div class="min-w-0">
                                        <h2 class="m-0 text-lg font-semibold text-[var(--color-foreground)]">
                                            {item.title}
                                        </h2>
                                        <p class="mt-2 text-sm leading-6 text-[var(--color-copy)]">
                                            {item.description}
                                        </p>
                                        {item.meta && (
                                            <p class="mt-3 text-sm font-semibold text-[var(--color-primary)]">
                                                {item.meta}
                                            </p>
                                        )}
                                    </div>
                                </div>
                            </article>
                        );
                    })
                }
            </div>
        </div>
    </Container>
</Section>