import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
import { FeatureCard } from '@/components/marketing/FeatureCard';
import { SectionHeader } from '@/components/marketing/SectionHeader';
import { FeatureGrid } from '@/components/marketing/SectionPatterns';
import type { HomepageContent } from '@/content/homepage-model';

export function SecuritySection({ content }: { content: HomepageContent['security'] }) {
  return (
    <Section tone="strong" aria-label={content.title}>
      <Container>
        <Stack gap="large">
          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
          <FeatureGrid>
            {content.checks.map((check) => (
              <FeatureCard
                key={check.id}
                title={check.title}
                description={check.description}
                {...(check.icon ? { icon: check.icon } : {})}
                emphasis="primary"
              />
            ))}
          </FeatureGrid>
        </Stack>
      </Container>
    </Section>
  );
}
