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';
import styles from './TrustSection.module.css';

export function TrustSection({ content }: { content: HomepageContent['trust'] }) {
  return (
    <Section className={styles.sectionBorder} aria-label={content.title}>
      <Container>
        <Stack gap="large">
          <SectionHeader
            eyebrow={content.eyebrow}
            title={content.title}
            body={content.body}
            alignment="center"
          />
          <FeatureGrid>
            {content.items.map((item) => (
              <FeatureCard
                key={item.id}
                title={item.title}
                description={item.description}
                {...(item.icon ? { icon: item.icon } : {})}
                emphasis="muted"
              />
            ))}
          </FeatureGrid>
        </Stack>
      </Container>
    </Section>
  );
}
