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 RolesSection({ content }: { content: HomepageContent['roles'] }) {
  return (
    <Section tone="strong" aria-label={content.title}>
      <Container>
        <Stack gap="large">
          <SectionHeader eyebrow={content.eyebrow} title={content.title} alignment="center" />
          <FeatureGrid>
            {content.items.map((item) => (
              <FeatureCard
                key={item.id}
                title={item.title}
                description={item.description}
                {...(item.icon ? { icon: item.icon } : {})}
                emphasis="primary"
              />
            ))}
          </FeatureGrid>
        </Stack>
      </Container>
    </Section>
  );
}
